第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

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

如何使用 vanilla javascript 觸發(fā) css 動畫

如何使用 vanilla javascript 觸發(fā) css 動畫

萬千封印 2023-08-24 18:23:55
我正在嘗試用 javascript 制作一個 css 動畫觸發(fā)器。我已經(jīng)用它制作了動畫@keyframes并且它可以工作。有人知道如何在沒有像 jQuery 這樣的東西的情況下做到這一點嗎？這是我的代碼：/* Animations */@keyframes party{    0% {background-color: red;}    10% {background-color: orange;}    20% {background-color: yellow;}    30% {background-color: green;}    40% {background-color: blue;}    50% {background-color: purple;} }@-webkit-keyframes party{    0% {background-color: red;}    10% {background-color: orange;}    20% {background-color: yellow;}    30% {background-color: green;}    40% {background-color: blue;}    50% {background-color: purple;} }
查看完整描述

4 回答

?
嚕嚕噠

TA貢獻(xiàn)1784條經(jīng)驗 獲得超7個贊

我認(rèn)為添加class是一種健康的方式。

檢查此處的示例：https ://codepen.io/yasgo/pen/zYBgjXN

document.getElementById('box').classList.add('active-animation');

.box {

  width: 50px;

  height: 50px;

  background-color: black;

}


.box.active-animation {

  animation: party 5s infinite;

}


@keyframes party{

    0% {background-color: red;}

    10% {background-color: orange;}

    20% {background-color: yellow;}

    30% {background-color: green;}

    40% {background-color: blue;}

    50% {background-color: purple;} 

}

<div id="box" class="box"></di>


查看完整回答
反對 回復(fù) 2023-08-24
?
慕桂英4014372

TA貢獻(xiàn)1871條經(jīng)驗 獲得超13個贊

這比你想象的要容易得多，你只需要調(diào)用動畫，就像這樣：


這是使用按鈕觸發(fā)的示例


function party(){

  document.body.style.animation = 'party 2.5s infinite linear';

}

body{

background-color: purple;

}


@keyframes party{

    0% {background-color: red;}

    10% {background-color: orange;}

    20% {background-color: yellow;}

    30% {background-color: green;}

    40% {background-color: blue;}

    50% {background-color: purple;} 

}


@-webkit-keyframes party{

    0% {background-color: red;}

    10% {background-color: orange;}

    20% {background-color: yellow;}

    30% {background-color: green;}

    40% {background-color: blue;}

    50% {background-color: purple;} 

}

<html>

  <body id="bd">

    <button onclick="party()">Press Me!</button>

  </body>



</html>

我等著這可以幫助你！



查看完整回答
反對 回復(fù) 2023-08-24
?
臨摹微笑

TA貢獻(xiàn)1982條經(jīng)驗 獲得超2個贊

var box = document.getElementById('box');

box.style.animation = "party 5s infinite";

#box {

  width: 200px;

  height:150px;

  background-color: black;

  margin: 20px auto;

  border-radius: 5px;

}


@keyframes party{

    0% {background-color: red;}

    10% {background-color: orange;}

    20% {background-color: yellow;}

    30% {background-color: green;}

    40% {background-color: blue;}

    50% {background-color: purple;} 

}


@-webkit-keyframes party{

    0% {background-color: red;}

    10% {background-color: orange;}

    20% {background-color: yellow;}

    30% {background-color: green;}

    40% {background-color: blue;}

    50% {background-color: purple;} 

}

<div id="box"></div>


查看完整回答
反對 回復(fù) 2023-08-24
?
慕雪6442864

TA貢獻(xiàn)1812條經(jīng)驗 獲得超5個贊

您可以設(shè)置animation要設(shè)置動畫的元素的屬性，如下所示。


// sets the css animation property

const spinner = document.getElementById("spinner");

spinner.style.animation = "spin 3s linear infinite";

/* gives the div element a border and size */

#spinner {

  border: 15px solid black;

  border-top: 15px solid white;

  border-bottom: 15px solid white;

  border-radius: 50%;

  width: 50px;

  height: 50px;

  /* no animation property is inserted here */

}


/* spin animation */

@keyframes spin {

  0% {

    transform: rotate(0deg);

  }

  100% {

    transform: rotate(360deg);

  }

}

<!-- div element to animate -->

<div id="spinner"></div>


查看完整回答
反對 回復(fù) 2023-08-24
  • 4 回答
  • 0 關(guān)注
  • 295 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

 公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號