css 呼吸效果

2020-08-11  本文已影响0人  jing_bao
 <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);
        }
      }
上一篇 下一篇

猜你喜欢

热点阅读