文字滚动插件（css3动画）- 代码篇

文字滚动插件（css3动画）- 代码篇

---

效果图动画：

---

templete代码如下：

<div class="list">
    <div class="rowup">
        <div class="item"><span>桑法元</span>刚刚更新简历，联系方式<span  class="address">183****5352</span>，求职意向<span>网络销售</span>，期望薪资待遇为<span>4K</span>，意向地区为<span class="address">经开区明珠广场</span></div>
        <div class="item"><span>储祺</span>刚刚更新简历，联系方式<span  class="address">183****5025</span>，求职意向<span>电话销售</span>，期望薪资待遇为<span>4K</span>，意向地区为<span class="address">经开区凤凰国际</span></div>
        <div class="item"><span>贾海俊</span>刚刚更新简历，联系方式<span  class="address">156****6361</span>，求职意向<span>销售经理</span>，期望薪资待遇为<span>3K</span>，倾向地区为<span class="address">蜀山区</span></div>
        <div class="item"><span>许慧</span>刚刚更新简历，联系方式<span  class="address">159****9570</span>，求职意向<span>销售经理</span>，期望薪资待遇为<span>3K</span>，倾向地区为<span class="address">经开区大华国际港</span></div>
        <div class="item"><span>朱洋洋</span>刚刚更新简历，联系方式<span  class="address">156****1978</span>，求职意向<span>销售助理</span>，期望薪资待遇为<span>3K</span>，倾向地区为<span class="address">经开区中环城附近</span></div>
        <div class="item"><span>陈一泓</span>刚刚更新简历，联系方式<span  class="address">186****0666</span>，求职意向<span>客户经理</span>，期望薪资待遇为<span>3K</span>，倾向地区为<span class="address">明珠广场附近</span></div>
        <div class="item"><span>孙淼</span>刚刚更新简历，联系方式<span  class="address">153****5092</span>，求职意向<span>房产销售代表</span>，期望薪资待遇为<span>5K</span>，倾向地区为<span class="address">繁华世界附近</span></div>
        <div class="item"><span>孙淼</span>刚刚更新简历，联系方式<span  class="address">153****5092</span>，求职意向<span>房产销售代表</span>，期望薪资待遇为<span>5K</span>，倾向地区为<span class="address">明珠广场附近</span></div>
        <div class="item"><span>江新白</span>刚刚更新简历，联系方式<span  class="address">182****9119</span>，求职意向<span>销售经理</span>，期望薪资待遇为<span>3K</span>，倾向地区为<span class="address">蜀山区华邦附近</span></div>
        <div class="item"><span>张杨</span>刚刚更新简历，联系方式<span  class="address">186****0666</span>，求职意向<span>电话客服</span>，期望薪资待遇为<span>3K</span>，倾向地区为<span class="address">经开区明珠广场附近</span></div>
        <div class="item"><span>南湾</span>刚刚更新简历，联系方式<span  class="address">132****9558</span>，求职意向<span>销售助理</span>，期望薪资待遇为<span>3K</span>，倾向地区为<span class="address">蔚蓝商务港附近</span></div>
        <div class="item"><span>谢小毛</span>刚刚更新简历，联系方式<span  class="address">189****3441</span>，求职意向<span>网络销售</span>，期望薪资待遇为<span>3K</span>，倾向地区为<span class="address">蔚蓝商务港附近</span></div>
        <div class="item"><span>戴凌慧</span>刚刚更新简历，联系方式<span  class="address">150****8060</span>，求职意向<span>房产客服</span>，期望薪资待遇为<span>3K</span>，倾向地区为<span class="address">明珠广场附近</span></div>
        <div class="item"><span>许先秦</span>刚刚更新简历，联系方式<span  class="address">137****8563</span>，求职意向<span>坐席专员</span>，期望薪资待遇为<span>3K</span>，倾向地区为<span class="address">明珠广场附近</span></div>
        <div class="item"><span>王上清</span>刚刚更新简历，联系方式<span  class="address">136****0623</span>，求职意向<span>贷款专员</span>，期望薪资待遇为<span>3K</span>，倾向地区为<span class="address">尚泽大都会</span></div>
        <div class="item"><span>朱乃顺</span>刚刚更新简历，联系方式<span  class="address">199****2580</span>，求职意向<span>催收专员</span>，期望薪资待遇为<span>3K</span>，倾向地区为<span class="address">莲花电子产业园</span></div>
        <div class="item"><span>张宏伟</span>刚刚更新简历，联系方式<span  class="address">174****1037</span>，求职意向<span>销售代表</span>，期望薪资待遇为<span>4K</span>，倾向地区为<span class="address">明珠广场附近</span></div>
        <div class="item"><span>石离</span>刚刚更新简历，联系方式<span  class="address">136****0529</span>，求职意向<span>电话网络销售</span>，期望薪资待遇为<span>3K</span>，倾向地区为<span class="address">尚泽国际附近</span></div>
        <div class="item"><span>何天风</span>刚刚更新简历，联系方式<span  class="address">188****2047</span>，求职意向<span>销售经理</span>，期望薪资待遇为<span>4K</span>，倾向地区为<span class="address">明珠广场附近</span></div>

        <div class="item"><span>桑法元</span>刚刚更新简历，联系方式<span  class="address">183****5352</span>，求职意向<span>网络销售</span>，期望薪资待遇为<span>4K</span>，意向地区为<span class="address">经开区明珠广场</span></div>
        <div class="item"><span>储祺</span>刚刚更新简历，联系方式<span  class="address">183****5025</span>，求职意向<span>电话销售</span>，期望薪资待遇为<span>4K</span>，意向地区为<span class="address">经开区凤凰国际</span></div>
        <div class="item"><span>贾海俊</span>刚刚更新简历，联系方式<span  class="address">156****6361</span>，求职意向<span>销售经理</span>，期望薪资待遇为<span>3K</span>，倾向地区为<span class="address">蜀山区</span></div>
        <div class="item"><span>许慧</span>刚刚更新简历，联系方式<span  class="address">159****9570</span>，求职意向<span>销售经理</span>，期望薪资待遇为<span>3K</span>，倾向地区为<span class="address">经开区大华国际港</span></div>
        <div class="item"><span>朱洋洋</span>刚刚更新简历，联系方式<span  class="address">156****1978</span>，求职意向<span>销售助理</span>，期望薪资待遇为<span>3K</span>，倾向地区为<span class="address">经开区中环城附近</span></div>
        <div class="item"><span>陈一泓</span>刚刚更新简历，联系方式<span  class="address">186****0666</span>，求职意向<span>客户经理</span>，期望薪资待遇为<span>3K</span>，倾向地区为<span class="address">明珠广场附近</span></div>
        <div class="item"><span>孙淼</span>刚刚更新简历，联系方式<span  class="address">153****5092</span>，求职意向<span>房产销售代表</span>，期望薪资待遇为<span>5K</span>，倾向地区为<span class="address">繁华世界附近</span></div>
        <div class="item"><span>孙淼</span>刚刚更新简历，联系方式<span  class="address">153****5092</span>，求职意向<span>房产销售代表</span>，期望薪资待遇为<span>5K</span>，倾向地区为<span class="address">明珠广场附近</span></div>
        <div class="item"><span>江小白</span>刚刚更新简历，联系方式<span  class="address">182****9119</span>，求职意向<span>销售经理</span>，期望薪资待遇为<span>3K</span>，倾向地区为<span class="address">蜀山区华邦附近</span></div>
        <div class="item"><span>张杨</span>刚刚更新简历，联系方式<span  class="address">186****0666</span>，求职意向<span>电话客服</span>，期望薪资待遇为<span>3K</span>，倾向地区为<span class="address">明珠广场附近</span></div>
        <div class="item"><span>南湾</span>刚刚更新简历，联系方式<span  class="address">132****9558</span>，求职意向<span>销售助理</span>，期望薪资待遇为<span>3K</span>，倾向地区为<span class="address">蔚蓝商务港附近</span></div>
        <div class="item"><span>谢小毛</span>刚刚更新简历，联系方式<span  class="address">189****3441</span>，求职意向<span>网络销售</span>，期望薪资待遇为<span>3K</span>，倾向地区为<span class="address">蔚蓝商务港附近</span></div>
        <div class="item"><span>戴凌慧</span>刚刚更新简历，联系方式<span  class="address">150****8060</span>，求职意向<span>房产客服</span>，期望薪资待遇为<span>3K</span>，倾向地区为<span class="address">明珠广场附近</span></div>
        <div class="item"><span>许先秦</span>刚刚更新简历，联系方式<span  class="address">137****8563</span>，求职意向<span>坐席专员</span>，期望薪资待遇为<span>3K</span>，倾向地区为<span class="address">明珠广场附近</span></div>
        <div class="item"><span>王上清</span>刚刚更新简历，联系方式<span  class="address">136****0623</span>，求职意向<span>贷款专员</span>，期望薪资待遇为<span>3K</span>，倾向地区为<span class="address">尚泽大都会</span></div>
        <div class="item"><span>朱乃顺</span>刚刚更新简历，联系方式<span  class="address">199****2580</span>，求职意向<span>催收专员</span>，期望薪资待遇为<span>3K</span>，倾向地区为<span class="address">莲花电子产业园</span></div>
        <div class="item"><span>张宏伟</span>刚刚更新简历，联系方式<span  class="address">174****1037</span>，求职意向<span>销售代表</span>，期望薪资待遇为<span>4K</span>，倾向地区为<span class="address">明珠广场附近</span></div>
        <div class="item"><span>石离</span>刚刚更新简历，联系方式<span  class="address">136****0529</span>，求职意向<span>电话网络销售</span>，期望薪资待遇为<span>3K</span>，倾向地区为<span class="address">尚泽国际附近</span></div>
        <div class="item"><span>何天风</span>刚刚更新简历，联系方式<span  class="address">188****2047</span>，求职意向<span>销售经理</span>，期望薪资待遇为<span>4K</span>，倾向地区为<span class="address">明珠广场附近</span></div>

    </div>
</div>

---

css代码如下：

@keyframes rowup {
    0% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    100% {
        -webkit-transform: translate3d(0, -550px, 0);
        transform: translate3d(0, -550px, 0);
    }
}
.list{
    width: 1200px;
    border: 1px solid #fff;
    margin: 60px auto;
    
    position: relative;
    height: 400px;
    overflow: hidden;
}
 
.list .rowup{
    margin: 0 auto;

    -webkit-animation: 14s rowup linear infinite normal;
    animation: 14s rowup linear infinite normal;
    position: relative;
    width: 90%;
}

.list .rowup .item{padding:5px;color:black;text-align: left;padding:10px 11%;border-bottom:#ccc 1px dashed}
.list .rowup .item span{color:#409EFF}
.list .rowup .item .address{color:orange}

---

以上就是关于“ 文字滚动插件（css3动画）- 代码篇 “ 的全部内容。