美文网首页
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