旋轉玉盤背景特效HTML+CSS
旋轉玉盤背景特效HTML+CSS
具體視訊效果點選這個連結下載：https://blog-static.cnblogs.com/files/blogs/695859/%E6%97%8B%E8%BD%AC%E7%8E%89%E7%9B%98%E7%BD%91%E9%A1%B5%E6%95%88%E6%9E%9C%E8%A7%86%E9%A2%91.rar
<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <metahttp-equiv="X-UA-Compatible"content="IE=edge"> <metaname="viewport"content="width=device-width,initial-scale=1.0"> <title>白玉盤</title> <style> </style> </head> <body> <divclass="con"> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> </div> </body> </html>
一、建立基本框架
<divclass="con"> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> </div>
首先定義一個類名叫con的盒子，再向其中建立9個span標籤。因為<span> 標籤沒有固定的格式表現。當對它應用樣式時，它才會產生視覺上的變化。在visual code中以上程式碼，可以用div.con>span*9的方式快速打出，“.con”代表建立con的類名，“>”則是包含的意思，“span*9”的意思是打出九個span標籤。
<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <metahttp-equiv="X-UA-Compatible"content="IE=edge"> <metaname="viewport"content="width=device-width,initial-scale=1.0"> <title>白玉盤</title> </head>
在visual code中可用 !+enter鍵 快速打出
<!DOCTYPEhtml>
是html5標準網頁宣告
<head></head>
用於定義網頁的的頭部，是網頁所有頭部元素的容器，裡面可以包含網頁的各種資訊，包括
<title></title>用於定義網頁標題
<meta>用於指定網頁的描述，關鍵詞，檔案的最後修改時間，作者及其他元資料。
比如：
<metacharset="UTF-8">
規定 HTML 文件的字元編碼。
<metahttp-equiv="X-UA-Compatible"content="IE=edge">
以上程式碼，是告訴 IE 以最高階模式渲染文件，也就是任何 IE 版本都以當前版本所支援的最高階標準模式渲染，避免版本升級造成的影響。簡單的說，就是什麼版本 IE 就用什麼版本的標準模式渲染。
其中X-UA-Compatible是IE8的一個專有<meta>屬性，它告訴IE8採用何種IE版本去渲染網頁。
接下來說的是css樣式，CSS主要用來設計網頁的樣式，美化網頁，可以有效地對頁面的佈局、字型、顏色、背景和其它效果實現更加精確的控制。
二、CSS樣式
body{ margin:0; height:100vh; display:flex; align-items:center; justify-content:center; background-image:linear-gradient(tobottom,#161823,#392f41,#758a99); }
body表示我們之前建立的body標籤，中括號內表示要新增的屬性。
margin:0;表示外邊距為0，表示內容將鋪滿整個網頁。
height：100vh;表示內容高度會被撐開與螢幕高度一致。
display:flex;則是定義佈局方式為彈性佈局。
justify-content: center是水平居中
align-items:center垂直居中。
background-image:屬性會在元素的背景中設定一個影象，但也可以加入linear-gradien（）設定線性漸變色。
.con{ display:flex; align-items:center; justify-content:center; width:30em; height:30em; font-size:10px; position:absolute; border-radius:50%; background-color:#d6ecf0; box-shadow:5px5px8px#d6ecf0; }
.con是我們之前定義的類名，在此我們將定義類名con的盒子的屬性。
font-size：10px;表示我們設定盒子內字型大小為10px。
Position:absolute;設定絕對定位
Border-radius：50%；將邊框樣式設定成圓形
Background-color,這屬性用於設定背景顏色屬性，但跟上面的background-image不一樣，不能設定背景為漸變色或圖片。
Box-shadow則是設定盒子的陰影。
box-shadow: h-shadowv-shadowblurspreadcolorinset;
box-shadow:5px5px8px#d6ecf0;
我的這段程式碼設定了盒子的陰影水平陰影位置5px，垂直陰影位置5px，陰影尺寸8px，並設定顏色為#d6ecf0。
我們也可以，新增inset把陰影設定為向盒子內。
.conspan:nth-child(1){ position:absolute; border-style:solid; border-color:#c3272btransparent; border-width:1em1em0em0em; border-radius:50%; --diameter:calc(); /*"--"定義變數，calc()為計算函式*/ width:var(--diameter); height:var(--diameter); --diameter:23em; animation-duration:1s; }
.con span:nth-child(1)表示我們將在類名.con盒子裡，選擇第一個span元素來設定它的屬性。
Border-style：solid；設定邊框線的樣式為實線
Border-width設定邊框的粗細
在css樣式中，可以用“--”表示你要設定變數。在上面程式碼中我設定了變數--diameter，並設定它的值為23em，賦值給了weight和height兩個屬性。
animation-duration:1s;
設定了動畫時間為1s，為後面動畫做鋪墊。
.conspan{ animation:winfinitelinear; box-shadow:6px5px10px#f2be45; } @keyframesw{ to{ transform:rotate(360deg); box-shadow:6px5px20px#f2be45; } }
在上面的程式碼我給，盒子con裡面的所有span添加了動畫屬性animation，其中“w”是要繫結到選擇器的關鍵幀的名稱,infinite表示動畫要一直迴圈，linear表示勻速。
@keyframes用於建立動畫，to表示將一直迴圈，transform:rotate(360deg);表示旋轉一圈。
以下是完整程式碼：
<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <metahttp-equiv="X-UA-Compatible"content="IE=edge"> <metaname="viewport"content="width=device-width,initial-scale=1.0"> <title>白玉盤</title> <style> body{ margin:0; height:100vh; display:flex; align-items:center; justify-content:center; background-image:linear-gradient(tobottom,#161823,#392f41,#758a99); } .con{ display:flex; align-items:center; justify-content:center; width:30em; height:30em; font-size:10px; position:absolute; border-radius:50%; background-color:#d6ecf0; box-shadow:5px5px8px#d6ecf0; } .conspan:nth-child(1){ position:absolute; border-style:solid; border-color:#c3272btransparent; border-width:1em1em0em0em; border-radius:50%; --diameter:calc(); /*"--"定義變數，calc()為計算函式*/ width:var(--diameter); height:var(--diameter); --diameter:23em; animation-duration:1s; } .conspan:nth-child(2){ position:absolute; border-style:solid; border-color:#ff3300transparent; border-width:1em1em0em0em; border-radius:50%; --diameter:calc(); width:var(--diameter); height:var(--diameter); --diameter:20em; animation-duration:2s; } .conspan:nth-child(3){ position:absolute; border-style:solid; border-color:#c3272btransparent; border-width:1em1em0em0em; border-radius:50%; --diameter:calc(); width:var(--diameter); height:var(--diameter); --diameter:17em; animation-duration:3s; } .conspan:nth-child(4){ position:absolute; border-style:solid; border-color:#ff3300transparent; border-width:1em1em0em0em; border-radius:50%; --diameter:calc(); width:var(--diameter); height:var(--diameter); --diameter:14em; animation-duration:4s; } .conspan:nth-child(5){ position:absolute; border-style:solid; border-color:#c3272btransparent; border-width:1em1em0em0em; border-radius:50%; --diameter:calc(); width:var(--diameter); height:var(--diameter); --diameter:11em; animation-duration:5s; } .conspan:nth-child(6){ position:absolute; border-style:solid; border-color:#ff3300transparent; border-width:1em1em0em0em; border-radius:50%; --diameter:calc(); width:var(--diameter); height:var(--diameter); --diameter:8em; animation-duration:6s; } .conspan:nth-child(7){ position:absolute; border-style:solid; border-color:#c3272btransparent; border-width:1em1em0em0em; border-radius:50%; --diameter:calc(); width:var(--diameter); height:var(--diameter); --diameter:5em; animation-duration:7s; } .conspan:nth-child(8){ position:absolute; border-style:solid; border-color:#ff3300transparent; border-width:1em1em0em0em; border-radius:50%; --diameter:calc(); width:var(--diameter); height:var(--diameter); --diameter:2em; animation-duration:8s; } .conspan:nth-child(9){ position:absolute; border-style:solid; border-color:#ff2d51transparent; border-width:1em1em0em0em; border-radius:50%; --diameter:calc(); width:var(--diameter); height:var(--diameter); --diameter:0em; animation-duration:9s; } .conspan{ animation:winfinitelinear; box-shadow:6px5px10px#f2be45; } @keyframesw{ to{ transform:rotate(360deg); box-shadow:6px5px20px#f2be45; } } </style> </head> <body> <divclass="con"> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> </div> </body> </html>