美文网首页
css 呼吸效果

css 呼吸效果

作者: jing_bao | 来源:发表于2020-08-11 14:14 被阅读0次
 <div class="btn"></div>
//样式
.btn{
        width: 100px;
        height: 100px;
       background: url(../../../static/image/fatherDay/confession.png)no-repeat center;
        background-size: 100% 100%;
        -webkit-animation-timing-function:ease-in-out;
        -webkit-animation-name:breathe;
        -webkit-animation-duration:500ms;
        -webkit-animation-iteration-count:infinite;
        -webkit-animation-direction:alternate;
}
@-webkit-keyframes breathe {
        0% {
        opacity:1;
        transform: scale(.90) ;
        }
        100% {
          opacity:1;
          transform: scale(1);
        }
      }

      @keyframes breathe {
        0% {
          opacity:1;
          transform: scale(.90) ;
        }
        100% {
          opacity:1;
          transform: scale(1);
        }
      }

      @-moz-keyframes breathe {
        0% {
          opacity:1;
          transform: scale(.90) ;
        }
        100% {
          opacity:1;
          transform: scale(1);
        }
      }

      @-o-keyframes breathe {
        0% {
          opacity:1;
          transform: scale(.90) ;
        }
        100% {
          opacity:1;
          transform: scale(1);
        }
      }

相关文章

网友评论

      本文标题:css 呼吸效果

      本文链接:https://www.haomeiwen.com/subject/ebtydktx.html