CSS实战样例之人物介绍滚动出现效果的生成
本节我们介绍在CSS中可以使一段人物介绍的文字滚动出现的效果生成方法：
在css中，我们可以利用animationh和keyframest通过给文字绑定一个循环滚动动画来实现文字循环滚动效果。
其中animationh函数的用法为：
1.animation
animation是一个简写属性，用来设置做某个动画，属性内容包括：
animation-name:  规定动画的名字。这个动画名是由@keframes设置的，下面有关于@keyframes的详细内容。
animation-duration:  规定动画要执行的时间。参数为：一个数字n，单位为毫秒。
animation-timing-function:  规定动画的速度曲线。
其参数值为：
linear: 动画匀速执行
ease:  慢速开始，然后加速执行，最后以低速结束
ease-in:  以慢速开始
ease-out:  以慢速结束
ease-in-out:  以慢速开始和结束
animation-delay: 规定执行动画前要延迟的时间。单位为毫秒。
animation-interation-count:  规定动画执行的次数
参数1:  number, 表示动画执行的次数
参数2： infinite, 表示一直执行下去,无限次数地执行
animation-direction:  规定动画执行的方向，是否应该轮流反向播放动画。
参数1：  normal: 默认值，规定动画正常播放
参数2：  alternate:  规定动画应该轮流反向播放。
@keyframes 规定将一套CSS样式转化为另一套CSS样式,可以通过from,to关键字来规定动画的变化，或者可使用多个百分比来详细地规定某个时间点应该做什么变化。若是用from于to,那么，from与to里的量应该是一致的，若是不一致，缺少的那个量表示默认值。
实现代码：
<div class="box">
    <p class="animate">
        李白作为唐代浪漫主义诗人的代表之一，他的一生都充满着传奇彩。（这里填写一段人物介绍的文字）
    </p>
</div>
Css代码：
.box {
    width: 100%;
    margin: 0 auto;
    border: 1px solid #ff6700;
    overflow: hidden;
}
 
.animate {
    padding-left: 20px;
    font-size: 12px;
    color: #000;
    display: inline-block;
    white-space: nowrap;
    animation: 5s wordsLoop linear infinite normal;
}
 
@keyframes wordsLoop {
    0% {
        transform: translateX(100%);
        -webkit-transform: translateX(100%);
    }
    100% {
        transform: translateX(-100%);
        -webkit-transform: translateX(-100%);
    }
}
 
@-webkit-keyframes wordsLoop {
    0% {
        transform: translateX(100%);
        -webkit-transform: translateX(100%);
    }
    100% {
        transform: translateX(-100%);
        -webkit-transform: translateX(-100%);
    }
}
最后我们就可以生成一段人物介绍滚动出现的效果啦~html滚动效果代码

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。