css3是怎么控制旋轉(zhuǎn)時(shí)間的

發(fā)布時(shí)間：2021-12-14 13:07:19 來(lái)源：億速云閱讀：257 作者：柒染欄目：web開發(fā)

這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)?lái)有關(guān)css3是怎么控制旋轉(zhuǎn)時(shí)間的，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

方法：

1、利用animation屬性和“@keyframes”規(guī)則給元素定義一個(gè)旋轉(zhuǎn)動(dòng)畫；

2、利用“animation-duration”屬性設(shè)置控制元素的旋轉(zhuǎn)時(shí)間，語(yǔ)法為“元素{animation-duration:time;}”。

本教程操作環(huán)境：windows10系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

css3怎樣控制旋轉(zhuǎn)時(shí)間

在css中，可以利用animation屬性給元素綁定動(dòng)畫效果，利用“@keyframes”規(guī)則給元素規(guī)定動(dòng)畫動(dòng)作。

利用animation-duration 屬性定義動(dòng)畫完成一個(gè)周期所需要的時(shí)間，以秒或毫秒計(jì)。

示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .div1{
            width:100px;
            height:100px;
            background-color:pink;
            animation:fadenum;
            animation-duration:10s;
        }
        @keyframes fadenum{
   100%{transform:rotate(360deg);}
}
.div2{
            width:100px;
            height:100px;
            background-color:pink;
            animation:fadenum1;
            animation-duration:5s;
        }
        @keyframes fadenum1{
   100%{transform:rotate(360deg);}
}
    </style>
</head>
<body>
    <div class="div1"></div><br><br>
    <div class="div2"></div>
</body>
</html>

輸出結(jié)果：

css3是怎么控制旋轉(zhuǎn)時(shí)間的

上述就是小編為大家分享的css3是怎么控制旋轉(zhuǎn)時(shí)間的了，如果剛好有類似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問(wèn)一下細(xì)節(jié)

css3是怎么控制旋轉(zhuǎn)時(shí)間的

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽