CSS3左右擺動效果

<!DOCTYPE html>

<head>

<title></title>

<style>

.animate-1 {

width: 40px;

height: 40px;

background-color: red;

margin: 100px auto;

? ? animation: swing1 1s ease-in-out infinite;

? ? transform: rotate(-5deg);

? ? transform-origin: top center;

}

@keyframes swing1 {

? ? 0% { transform: rotate(-5deg); }

? ? 50% { transform: rotate(5deg);}

? ? 100% { transform: rotate(-5deg);}

}

</style>

</head>

<body>

</div>

</body>

</html>

cv工程師

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • css3動畫 過渡:transition 2D 轉(zhuǎn)換 transform 3D 轉(zhuǎn)換 transform 動畫:a...
    劉松陽閱讀 841評論 0 0
  • 選擇qi:是表達(dá)式 標(biāo)簽選擇器 類選擇器 屬性選擇器 繼承屬性: color,font,text-align,li...
    love2013閱讀 2,443評論 0 11
  • 背景 背景大小控制(注意:大小要寫在背景屬性后面) background-size:auto;/* 默認(rèn)值,不改變...
    色即是貓閱讀 415評論 0 0
  • 之前在 Medium 上看到的這篇文章,翻譯了一下,介紹給大家。作者信息見文章末尾。 黃金分割比在建筑、電器、lo...
    懵圈de果果閱讀 1,909評論 0 0
  • 我夢見你在黑暗中朝我走來 左手牽著一盞溫馴的燈 心有不甘 終會有所負(fù)擔(dān) 晚安
    雙眼皮的小仙女閱讀 412評論 0 0

友情鏈接更多精彩內(nèi)容