當(dāng)前位置：首頁(yè) > 前端技术 > CSS >内容正文

CSS

CSS学习17之动画

發(fā)布時(shí)間：2025/3/21 CSS 31 豆豆

生活随笔收集整理的這篇文章主要介紹了 CSS学习17之动画小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

回顧

z-index 屬性

z-index 屬性設(shè)置元素的堆疊順序。擁有更高堆疊順序的元素總是會(huì)處于堆疊順序較低的元素的前面。
Z-index 可用于將在一個(gè)元素放置于另一元素之后。

動(dòng)畫

動(dòng)畫使元素逐漸從一種樣式變?yōu)榱硪环N樣式。
可以隨意更改任意數(shù)量的 CSS 屬性。
如需使用 CSS 動(dòng)畫，必須首先為動(dòng)畫指定一些關(guān)鍵幀。
關(guān)鍵幀包含元素在特定時(shí)間所擁有的樣式。

@keyframes 規(guī)則
如果在 @keyframes 規(guī)則中指定了 CSS 樣式，動(dòng)畫將在特定時(shí)間逐漸從當(dāng)前樣式更改為新樣式。
要使動(dòng)畫生效，必須將動(dòng)畫綁定到某個(gè)元素。
下面的例子將動(dòng)畫綁定到元素。動(dòng)畫將持續(xù)0.2秒鐘，同時(shí)進(jìn)行循環(huán)。

示例

代碼 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>小試牛刀</title><style>.c1,.c2,.c3{width:100px;height: 100px;background:rgb(255,0,0); /*顏色單詞，16進(jìn)制編碼 rgb值*/border-radius:50%; /*邊框半徑：設(shè)置圓角 css3*/box-shadow:0 0 50px rgb(255,0,0); /*盒子陰影 css3*/}.c3{margin-top:-100px;border-radius: 0; /*去掉選中元素的圓角邊框*/}.c2{margin-top:-50px;margin-left:-50px}#love{position:absolute;left:20%;top:10%;transform: rotate(45deg); /*順時(shí)針旋轉(zhuǎn)45度 css3*/animation:jump .3s linear infinite;}/* 自定義動(dòng)畫創(chuàng)建 css3*/@keyframes jump{30%{transform: scale(1.1) rotate(45deg);}40%{transform: scale(1.2) rotate(45deg);}50%{transform: scale(1.1) rotate(45deg);}}</style> </head></head> <body> <div id="love"><div class="c1"></div><div class="c2"></div><div class="c3"></div> </div></body> </html> 效果

跳動(dòng)的心

總結(jié)

以上是生活随笔為你收集整理的CSS学习17之动画的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

css
动画