仿taro官网文字轮播效果

作者: 前端新阳 | 来源:发表于2020-02-09 21:14 被阅读0次

仿taro官网文字轮播效果
前端微信小程序多端打包框架-Taro环境搭建
自定义View实战-仿京东首页轮播文字(又名垂直跑马灯)
[day07] react使用轮播图组件
鼠标滑入 3D倾斜效果
套用组件库ElementUI等时高度自适应问题
微信小程序（二）轮播图
Taro的安装及使用
JS文字轮播效果
Axure入门案例系列 -- 基础轮播图

动画如下图所示：

效果.gif

为了快速的看到动画效果，所以时间调短了，动画变快了。源代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .banner_feature{
            position:relative;
            margin-bottom:50px;
            height:40px;
            line-height:40px;
            letter-spacing:6px;
            overflow:hidden
        }
        .banner_feature li{
            position:absolute;
            font-size:26px;
            word-break:break-all
        }
        .banner_feature li:nth-child(1){
            top:0;left:0;
            -webkit-animation:imgToggle 8s -6s linear infinite;
            -moz-animation:imgToggle 8s -6s linear infinite;
            animation:imgToggle 8s -6s linear infinite
        }
        .banner_feature li:nth-child(2){
            top:0;left:0;
            -webkit-animation:imgToggle 8s -4s linear infinite;
            -moz-animation:imgToggle 8s -4s linear infinite;
            animation:imgToggle 8s -4s linear infinite
        }
        .banner_feature li:nth-child(3){
            top:0;left:0;
            -webkit-animation:imgToggle 8s -2s linear infinite;
            -moz-animation:imgToggle 8s -2s linear infinite;
            animation:imgToggle 8s -2s linear infinite
        }
        .banner_feature li:nth-child(4){
            top:0;left:0;
            -webkit-animation:imgToggle 8s 0s linear infinite;
            -moz-animation:imgToggle 8s 0s linear infinite;
            animation:imgToggle 8s 0s linear infinite
        }
        @-webkit-keyframes imgToggle{0%,75%,100%{width:0;opacity:0}76%,99%{opacity:1}85%,95%{width:100%;opacity:1}}
        @-moz-keyframes imgToggle{0%,75%,100%{width:0;opacity:0}76%,99%{opacity:1}85%,95%{width:100%;opacity:1}}
        @keyframes imgToggle{0%,75%,100%{width:0;opacity:0}76%,99%{opacity:1}85%,95%{width:100%;opacity:1}}
    </style>
    
</head>
<body>
    <ul class="banner_feature">
        <li>一处代码，多处运行</li>
        <li>支持微信小程序双向转换</li>
        <li>10,000+ 人社区助力</li>
        <li>Taro-UI、物料市场打造 Taro 生态 </li>
    </ul>
</body>
</html>