一、效果

二、代碼

index.html




<!DOCTYPE html><html><head> <meta charset=&#34;utf-8&#34;> <meta http-equiv=&#34;X-UA-C" />

国产成人精品无码青草_亚洲国产美女精品久久久久∴_欧美人与鲁交大毛片免费_国产果冻豆传媒麻婆精东

15158846557 或 在線咨詢(xún) 在線咨詢(xún)
15158846557 或 在線咨詢(xún)
所在位置： 首頁(yè) > 營(yíng)銷(xiāo)資訊 > 網(wǎng)站運(yùn)營(yíng) > 【前端-CSS動(dòng)畫(huà)】制作圣誕節(jié)彩燈

【前端-CSS動(dòng)畫(huà)】制作圣誕節(jié)彩燈

時(shí)間：2023-09-12 21:06:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-09-12 21:06:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)

【前端-CSS動(dòng)畫(huà)】制作圣誕節(jié)彩燈：


一、效果

二、代碼

index.html




<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine"></head><body> <ul id="wire"> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <ul> <h2>Merry Christmas!</h2>v</body></html>style.css




body { background: #111; margin: 0;}h2{ color: #fff; position: relative; margin-top:200px; text-align: center; letter-spacing: 0.2em; font-size: 4em; font-family: 'Mountains of Christmas'; text-shadow: 0px 0px 8px rgba(255,65,185,1);}#wire{ text-align:center; white-space:nowrap; position: absolute; padding: 0; width: 100%; top:-80px; border-bottom: 3px solid #222; height: 100px;}#wire li { position: relative; list-style: none; margin: 0 15px; padding: 0; display: inline-block; width: 15px; height: 30px; border-radius: 50%; top: 102px; background: #fff; /* animations*/ animation-name: even-flash; animation-duration: 1s; animation-iteration-count: infinite; animation-fill-mode: both;}#wire li:nth-child(odd){ animation-name: odd-flash;}#wire li:before{ content: ""; position: absolute; width: 14px; height: 10px; border-radius: 4px; top:-5px; left: 0; background:#444;}@keyframes even-flash { 0% ,100%{ background:rgba(255,230,65,1); box-shadow: 0px 2px 20px 4px rgba(255,230,65,1); } 50%{ background:rgba(255,230,65,.5); box-shadow: 0px 2px 20px 4px rgba(255,230,65,.5); }}@keyframes odd-flash { 50%{ background:rgba(255,65,185,1); box-shadow: 0px 2px 20px 4px rgba(255,65,185,1); } 0% ,100%{ background:rgba(255,230,65,.5); box-shadow: 0px 2px 20px 4px rgba(255,65,185,.5); }}三、詳解





CSS3，我們可以創(chuàng)建動(dòng)畫(huà)，它可以取代許多網(wǎng)頁(yè)動(dòng)畫(huà)圖像，F(xiàn)lash 動(dòng)畫(huà)，和 Javascripts。


CSS3 @keyframes 規(guī)則

要?jiǎng)?chuàng)建CSS3動(dòng)畫(huà)，你將不得不了解@keyframes規(guī)則。
@keyframes規(guī)則是用來(lái)創(chuàng)建動(dòng)畫(huà)。 @keyframes規(guī)則內(nèi)指定一個(gè) CSS樣式和動(dòng)畫(huà)將逐步從目前的樣式更改為新的樣式。
注意：Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 規(guī)則和 animation 屬性。Chrome 和 Safari 需要前綴 -webkit-。


CSS3 動(dòng)畫(huà)

當(dāng)在@keyframe創(chuàng)建動(dòng)畫(huà)，把它綁定到一個(gè)選擇器，否則動(dòng)畫(huà)不會(huì)有任何效果。
指定至少這兩個(gè) CSS3 的動(dòng)畫(huà)屬性綁定向一個(gè)選擇器：

例子：




CSS3動(dòng)畫(huà)是什么？

例子：




常用屬性

源碼




示例01：

https://gitee.com/turingitclub/css-learning/blob/dev/base/animation.html


示例02：

https://gitee.com/turingitclub/css-learning/blob/dev/base/animation_2.html


示例03 running hourse：

https://gitee.com/turingitclub/css-learning/blob/dev/base/animation_3.html

steps(int, start|end) 算是 step-start 和 step-end 的進(jìn)化型,

因?yàn)橹蛔吡?一步 ，如果我們把int步數(shù)增加，就會(huì)看到每個(gè)關(guān)鍵影格之間多了一些演算出來(lái)的影格，當(dāng)然如果步數(shù)設(shè)定越多，看到的動(dòng)畫(huà)也會(huì)越流暢。 （但需要這樣，不用step就好了）
比如： 如果把上面的 step-start 改成 steps(3, start) , step-end 改成 steps(3,end) 會(huì)得到下面的結(jié)果
https://codepen.io/AlexZ33/pen/PowpKLb點(diǎn)擊預(yù)覽







如果熟練 steps 的用法，就能夠很簡(jiǎn)單的使用 sprite 圖片來(lái)做動(dòng)畫(huà)，什麼是 sprite 圖片 呢？就是將許多圖案集合成一張圖，接著透過(guò) CSS 的語(yǔ)法使這些圖案分別呈現(xiàn)在網(wǎng)頁(yè)裡，這樣就能大幅減少多張圖片載入的 request 數(shù)量。





上圖是一張經(jīng)典的 sprite 圖片 ( Leland Stanford 所拍攝 )，只要透過(guò) CSS 動(dòng)畫(huà)的 steps，我們也能很簡(jiǎn)單的讓圖片中的馬兒跑起來(lái)。

<!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>css動(dòng)畫(huà) 示例3 running hourse | https://alexz33.github.io/</title> <style> html, body { height: 100%; width: 100%; margin: 0; padding: 0; } div { display: block; } #hourse { width: 186px; height: 141px; position: absolute; background-image: url("image/hourse.jpg"); animation-name: run; animation-duration: 1s; animation-iteration-count: infinite; animation-timing-function: step-start; } @keyframes run { 0% { background-position: -15px -13px; } 6.25% { background-position: -210px -13px; } 12.5% { background-position: -403px -13px; } 18.75% { background-position: -592px -13px; } 25% { background-position: -15px -165px; } 31.25% { background-position: -210px -165px; } 37.5% { background-position: -403px -165px; } 43.75% { background-position: -592px -165px; } 50% { background-position: -15px -320px; } 56.25% { background-position: -210px -320px; } 62.5% { background-position: -403px -320px; } 68.75% { background-position: -592px -320px; } 75% { background-position: -15px -470px; } 81.25% { background-position: -210px -470px; } 87.5% { background-position: -403px -470px; } 93.75% { background-position: -592px -470px; } 100% { background-position: -592px -470px; } } </style></head><body> <div id="hourse"> </div></body></html>





僵尸行走







源碼： https://gitee.com/turingitclub/css-learning/tree/dev/task04/zoombieWalking




酷炫3D動(dòng)畫(huà) （旋轉(zhuǎn)的正方體）

源碼： https://codepen.io/AlexZ33/pen/yLyzWwo點(diǎn)擊預(yù)覽




酷炫頁(yè)面開(kāi)發(fā)（3D 視頻展示區(qū)）





代碼 ： https://codepen.io/AlexZ33/pen/zYxNVzw點(diǎn)擊預(yù)覽




css-only-dropdown-menu







源碼 ： https://gitee.com/turingitclub/css-learning/blob/dev/task04/css-only-dropdown/index.html




CSS-only-tooltip







源碼 ： https://gitee.com/turingitclub/css-learning/blob/dev/task04/CSS-only-Tooltip/index.html


關(guān)鍵詞：圣誕節(jié)

74
73
25
news

版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。

為了最佳展示效果，本站不支持IE9及以下版本的瀏覽器，建議您使用谷歌Chrome瀏覽器。 點(diǎn)擊下載Chrome瀏覽器
關(guān)閉