更多箭头按钮不停闪烁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>

来源：CSDN

作者：干了这碗小米汤儿

链接：https://blog.csdn.net/MtangEr/article/details/103609687

标签

animation

infinite

易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!