qinyi素材网
当前位置: 首页 > WEB教程 > 使用CSS的animation属性制作图片呼吸特效

使用CSS的animation属性制作图片呼吸特效

  时间: 2021-11-30   阅读:796
简要教程

最近在网上看到一个酷炫的放大缩小类似呼吸的特效,图片会从原来大小放大1.1倍,之后再还原,再放大,一直循环。只需要使用CSS的animation属性就能制作,现在分享给大家。

使用方法

在style里面加入以下的CSS样式

        @keyframes scaleDraw {
            /*定义关键帧、scaleDrew是需要绑定到选择器的关键帧名称*/
            0% {
                transform:scale(1);
                /*开始为原始大小*/
            }
            25% {
                transform:scale(1.1);
                /*放大1.1倍*/
            }
            50% {
                transform:scale(1);
            }
            75% {
                transform:scale(1.1);
            }
        }
        .demo {
             width:200px;
             height:200px;
             background-color: red;
             -webkit-animation-name:scaleDraw;
             /*关键帧名称*/
             -webkit-animation-timing-function:ease-in-out;
             /*动画的速度曲线*/
             -webkit-animation-iteration-count:infinite;
             /*动画播放的次数*/
             -webkit-animation-duration:5s;
             /*动画所花费的时间*/
         }

HTML结构

<div class="demo"></div>
上一篇: 下一篇: