为了账号安全,请及时绑定邮箱和手机立即绑定

如何在CSS中添加一个又一个的脉冲动画,例如交通灯连续闪烁

如何在CSS中添加一个又一个的脉冲动画,例如交通灯连续闪烁

慕田峪4524236 2024-01-22 15:54:45
我有两个带有无限次脉冲动画的圆圈。现在我需要一个接一个地连续无限次地制作圆的动画。我尝试了无数次脉动圆圈。我添加了延迟动画,但它不起作用,我不知道为什么。请参考代码并帮助实现该功能:HTML:<div class="inner">one</div><div class="inner1">two</div>CSS:.inner {     width: 74px;     height: 74px;     background: #fff;     border:1px solid #000;     position: relative;     text-align:center;     border-radius: 50%;     margin-bottom:20px;     text-align: center;     -webkit-animation: pulse 1s infinite;} .inner1 {     width: 74px;     height: 74px;     background: #fff;     border:1px solid #000;     position: relative;     border-radius: 50%;     text-align: center;     -webkit-animation: pulse 2s infinite;} @-webkit-keyframes pulse {     0% {         -webkit-transform: scaleX(1);         transform: scaleX(1)     }     50% {         -webkit-transform: scale3d(1.05, 1.05, 1.05);         transform: scale3d(1.05, 1.05, 1.05)     }     to {         -webkit-transform: scaleX(1);         transform: scaleX(1)     }} @keyframes pulse {     0% {         -webkit-transform: scaleX(1);         transform: scaleX(1)     }     50% {         -webkit-transform: scale3d(1.05, 1.05, 1.05);         transform: scale3d(1.05, 1.05, 1.05)     }     to {         -webkit-transform: scaleX(1);         transform: scaleX(1)     }} .pulse {     -webkit-animation-name: pulse;     animation-name: pulse }提前致谢
查看完整描述

3 回答

?
蝴蝶刀刀

TA贡献1801条经验 获得超8个赞

您可以将相同的内容添加class到所有圈子以获取共同属性。每个属性唯一需要不同的是animation-delay.


您可以使用一个小的 jQuery 代码来为任意数量的 div 设置它。我已经创建了 3 个 div 的示例,但请随意扩展它。


let els = $(".inner"),

  length = $(".inner").length


els.each(function(index) {

  $(this).css('animation-delay', (index / length) + 's')

})

.inner {

  display: inline-block;

  vertical-align: top;

  width: 74px;

  height: 74px;

  background: #fff;

  border: 1px solid #000;

  position: relative;

  text-align: center;

  border-radius: 50%;

  margin-bottom: 20px;

  text-align: center;

  margin: 10px;

  animation: pulse 1s infinite linear;

}


@keyframes pulse {

  0% {

    transform: scaleX(1)

  }

  50% {

    transform: scale3d(1.05, 1.05, 1.05)

  }

  to {

    transform: scaleX(1)

  }

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="inner">one</div>

<div class="inner">two</div>

<div class="inner">three</div>


查看完整回答
反对 回复 2024-01-22
?
有只小跳蛙

TA贡献1824条经验 获得超8个赞

仅添加动画Delay= .5s;并将第二个动画时间减少 1 秒


HTML:


<div class="inner">one</div>

<div class="inner1">two</div>

CSS:


.inner {

     width: 74px;

     height: 74px;

     background: #fff;

     border:1px solid #000;

     position: relative;

     text-align:center;

     border-radius: 50%;

     margin-bottom:20px;

     text-align: center;

     -webkit-animation: pulse 1s infinite;

}

 .inner1 {

     width: 74px;

     height: 74px;

     background: #fff;

     border:1px solid #000;

     position: relative;

     border-radius: 50%;

     text-align: center;

     -webkit-animation: pulse 1s infinite;

     animation-delay: .5s;

}

 @-webkit-keyframes pulse {

     0% {

         -webkit-transform: scaleX(1);

         transform: scaleX(1) 

    }

     50% {

         -webkit-transform: scale3d(1.05, 1.05, 1.05);

         transform: scale3d(1.05, 1.05, 1.05) 

    }

     to {

         -webkit-transform: scaleX(1);

         transform: scaleX(1) 

    }

}

 @keyframes pulse {

     0% {

         -webkit-transform: scaleX(1);

         transform: scaleX(1) 

    }

     50% {

         -webkit-transform: scale3d(1.05, 1.05, 1.05);

         transform: scale3d(1.05, 1.05, 1.05) 

    }

     to {

         -webkit-transform: scaleX(1);

         transform: scaleX(1) 

    }

}

 .pulse {

     -webkit-animation-name: pulse;

     animation-name: pulse 

}


查看完整回答
反对 回复 2024-01-22
?
红颜莎娜

TA贡献1842条经验 获得超12个赞

animation-delay工作中:


.inner {

  width: 74px;

  height: 74px;

  background: #fff;

  border: 1px solid #000;

  position: relative;

  text-align: center;

  border-radius: 50%;

  margin-bottom: 20px;

  text-align: center;

  -webkit-animation: pulse 1s infinite;

}


.inner1 {

  width: 74px;

  height: 74px;

  background: #fff;

  border: 1px solid #000;

  position: relative;

  border-radius: 50%;

  text-align: center;

  -webkit-animation: pulse 2s infinite;

  animation-delay: 5s

}


@-webkit-keyframes pulse {

  0% {

    -webkit-transform: scaleX(1);

    transform: scaleX(1)

  }

  50% {

    -webkit-transform: scale3d(1.05, 1.05, 1.05);

    transform: scale3d(1.05, 1.05, 1.05)

  }

  to {

    -webkit-transform: scaleX(1);

    transform: scaleX(1)

  }

}


@keyframes pulse {

  0% {

    -webkit-transform: scaleX(1);

    transform: scaleX(1)

  }

  50% {

    -webkit-transform: scale3d(1.05, 1.05, 1.05);

    transform: scale3d(1.05, 1.05, 1.05)

  }

  to {

    -webkit-transform: scaleX(1);

    transform: scaleX(1)

  }

}


.pulse {

  -webkit-animation-name: pulse;

  animation-name: pulse

}

<div class="inner">one


</div>


<div class="inner1">two


</div>


查看完整回答
反对 回复 2024-01-22
  • 3 回答
  • 0 关注
  • 117 浏览

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信