笔记：css控制背景图片呼吸样式、闪烁样式

最新推荐文章于 2025-05-19 10:39:24 发布

原创最新推荐文章于 2025-05-19 10:39:24 发布 · 555 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端

本文详细介绍了如何使用CSS的`@keyframes`和`animation`属性创建一个无限循环的动态效果，涉及缩放和透明度变化。

<div id="ovalDiv" class="ovalDiv"></div>

.ovalDiv {
  width: 990px;
  height: 990px;
  background-image: url("~@/assets/img/bigScreen/oval.png");
  background-size: 990px 990px;
  position: absolute;
  top: 0;
  left: 1110px;
  animation-name: ovalDiv;                  /*应用动画  值为div绑定的id*/
  animation-duration: 3s;                 /*设置动画持续时间*/
  animation-iteration-count: infinite;    /*使动画循环*/
  animation-timing-function: linear;      /*使动画的速度曲线为线性增长*/

}

@keyframes ovalDiv { /* 值为div绑定的id */
  0%{
    //transform: scale(0.9); // 呼吸
    opacity: 1; // 闪烁
  }
  50%{
    //transform: scale(1.1);
    opacity: 0;
  }
  100%{
    //transform: scale(0.9);
    opacity: 1;
  }
}