亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全，請及時綁定郵箱和手機立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

如何在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條經驗 獲得超13個贊

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 關注
  • 196 瀏覽

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

 幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

 公眾號

掃描二維碼
關注慕課網微信公眾號