更多箭头按钮不停闪烁animation

最新推荐文章于 2023-10-10 15:06:33 发布

干了这碗小米汤儿

最新推荐文章于 2023-10-10 15:06:33 发布

阅读量923

点赞数

分类专栏： css3 h5 文章标签： animation

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

版权

h5 同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

css3

6 篇文章 1 订阅

订阅专栏

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

附上代码：
主要应用的是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>

干了这碗小米汤儿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
更多箭头按钮不停闪烁animation

我们常见的一个效果就是有向右或者向后的箭头在不停地显隐闪烁指引我们点进去查看更多。附上简单的几张效果图：附上代码：主要应用的是css3 animation动画效果及其中无限循环的属性/* animation-iteration-count: n|infinite;定义播放的次数n次|无限循环infinite*/<head> <meta ch...
复制链接

扫一扫