心跳动效css

最新推荐文章于 2024-07-19 14:26:20 发布

bingduYu

最新推荐文章于 2024-07-19 14:26:20 发布

阅读量468

点赞数

分类专栏： css3动画 css 文章标签： css css3 前端

本文链接：https://blog.csdn.net/Yugoup/article/details/121919899

版权

css 同时被 2 个专栏收录

22 篇文章 0 订阅

订阅专栏

css3动画

7 篇文章 0 订阅

订阅专栏

animation: heartbeat 800ms infinite;
-webkit-animation: heartbeat 800ms infinite;

// 心跳动效
@keyframes heartbeat {
  0% {
    transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -moz-transform: scale(1, 1);
    -webkit-transform: scale(1, 1);
    -o-transform: scale(1, 1);
    opacity: 0.8;
  }
  30% {
    transform: scale(1.1, 1.1);
    -ms-transform: scale(1.1, 1.1);
    -moz-transform: scale(1.1, 1.1);
    -webkit-transform: scale(1.1, 1.1);
    -o-transform: scale(1.1, 1.1);
    opacity: 1;
  }
  100% {
    transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -moz-transform: scale(1, 1);
    -webkit-transform: scale(1, 1);
    -o-transform: scale(1, 1);
    opacity: 0.8;
  }
}
@-webkit-keyframes heartbeat {
  0% {
    transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -moz-transform: scale(1, 1);
    -webkit-transform: scale(1, 1);
    -o-transform: scale(1, 1);
    opacity: 0.8;
  }
  30% {
    transform: scale(1.1, 1.1);
    -ms-transform: scale(1.1, 1.1);
    -moz-transform: scale(1.1, 1.1);
    -webkit-transform: scale(1.1, 1.1);
    -o-transform: scale(1.1, 1.1);
    opacity: 1;
  }
  100% {
    transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -moz-transform: scale(1, 1);
    -webkit-transform: scale(1, 1);
    -o-transform: scale(1, 1);
    opacity: 0.8;
  }
}