更多箭头按钮不停闪烁animation

程序员文章站 2024-01-15 08:11:22

...

我们常见的一个效果就是有向右或者向后的箭头在不停地显隐闪烁指引我们点进去查看更多。
附上简单的几张效果图：
更多箭头按钮不停闪烁animation

附上代码：
主要应用的是css3 animation动画效果及其中无限循环的属性
/* animation-iteration-count: n|infinite;
定义播放的次数n次|无限循环infinite*/

<head>
    <meta charset="UTF-8">
    <title>箭头显隐切换或不停闪烁动画效果</title>
    <style>
        div{
            font-size: 30px;
            color: red;
            margin: 100px;
            opacity:1;
            animation: jiantou 2s infinite; 
            -moz-animation: jiantou 2s infinite;
            -webkit-animation: jiantou 2s infinite; 
            -o-animation: jiantou 2s infinite;
        }
        @keyframes jiantou{
            0%{opacity: 1;}  
/*            修改要变换的属性opacity 必须在原dom中体现过该属性*/
            25%{opacity: 0;}
            50%{opacity: 1;}
            75%{opacity: 0;}
            100%{opacity: 1;}
        }
        @-moz-keyframes jiantou{
            0%{opacity: 1;}
            25%{opacity: 0;}
            50%{opacity: 1;}
            75%{opacity: 0;}
            100%{opacity: 1;}
        }
        @-webkit-keyframes jiantou{
            0%{opacity: 1;}
            25%{opacity: 0;}
            50%{opacity: 1;}
            75%{opacity: 0;}
            100%{opacity: 1;}
        }
        @-o-keyframes jiantou{
            0%{opacity: 1;}
            25%{opacity: 0;}
            50%{opacity: 1;}
            75%{opacity: 0;}
            100%{opacity: 1;}
        }
    </style>
</head>
<body>
    <div> 》》</div>
</body>

上一篇： keyWindow获取出错，导致视频不能正常播放