css3动画不停闪动效果-详细内容

文章内容

2016/11/13 14:16:51,作者: 黄兵

css3动画不停闪动效果

最近CSS3的动画效果很流行，利用CSS3制作一个闪动的图标，可广泛用于购物车提示，图标闪动（类似QQ消息的闪动效果）。
实现代码如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css" rel="stylesheet">
        .bg-img{
            background-image:url("http://wap.8677333.com/anli/images/121.png");
            width: 64px;
            height: 64px;
        }
        .i-demo {
            position: absolute;
            top: 15px;
            left: 63px;
            display: inline-block;
            padding: 6px 2px;
            font-size: 20px;
            line-height: 20px;
            color: #fff;
            background-color: #c81623;
            border-radius: 14px 14px 14px 0;
            min-width: 30px;
            text-align: center;
        }
        #animation{
            -webkit-animation:flash 1s .2s ease both infinite;
            -moz-animation:flash 1s .2s ease both;
        }
        @-webkit-keyframes flash{
            0%,50%,100%{opacity: 1;}
            25%,75%{opacity: 0;}
        }
        @-moz-keyframes flash{
            0%,50%,100%{opacity: 1;}
            25%,75%{opacity: 0;}
        }
    </style>
</head>
<body>
    <div class="bg-img"></div>
    <div class="i-demo" id="animation">2</div>
</body>
</html>