CSS創(chuàng)建3D，摳像旋轉(zhuǎn)圖片等動(dòng)畫的標(biāo)簽，動(dòng)畫特效，輪播圖，旋轉(zhuǎn)木馬等【詩(shī)書畫唱】
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
? ? ? ? ? ? body{
? ? ? ? ? ? ? ? background-color:black;
? ? ? ? ? ? }
? ? ? ? ? ? *{
? ? ? ? ? ? ? ? margin: 0;
? ? ? ? ? ? ? ? padding: 0;
? ? ? ? ? ? }
? ? ? ? ? ? #main img{
? ? ? ? ? ? ? ? width:300px;
? ? ? ? ? ? ? ? height: 400px;
? ? ? ? ? ? ? ? position: absolute;
? ? ? ? ? ? ?/*? ?absolute:絕對(duì)*/
? ? ? ? ? ? ? ? border:5px blue double;
? ? ? ? ? ? }
? ? ? ? ? ? #main img:nth-child(1){
? ? ? ? ? ? ? ? transform: translateZ(500px);
? ? ? ? ? ? ? ??
? ? ? ? ? ? }?
? ? ? ? ? ?/* nth-child(1)代表第一個(gè)最正面的圖片*/
? ? ? ? ? ? /*:nth-child(n) 選擇器匹配屬于其父元素的第 N 個(gè)子元素，不論元素的類型。
n 可以是數(shù)字、關(guān)鍵詞或公式。*/
? ? ? ? ?/*? ?這里z軸都為500px,就可以讓10張圖片都在同以個(gè)水平面上,*/
? ? ? ? ? ? /*transform 英[tr?ns?f??m]
美[tr?ns?f??rm]
v. 使改變形態(tài); 使改變外觀(或性質(zhì)); 使改觀;*/
? ? ? ? ? ? #main img:nth-child(2){
? ? ? ? ? ? ? ? transform: rotateY(40deg) translateZ(500px);
? ? ? ? ? ? }
? ? ? ? ? ??
? ? ? ? ? ??
? ? ? ? ?/*? ?translateZ(z) 定義 3D 轉(zhuǎn)換，只是用 Z 軸的值。*/
? ? ? ? ? ? #main img:nth-child(3){
? ? ? ? ? ? ? ? transform: rotateY(80deg) translatez(500px);
? ? ? ? ? ? }
? ? ? ? ? ??
? ? ? ? ? ?/* rotateY(angle) 定義沿著 Y 軸的 3D 旋轉(zhuǎn)。*/
? ? ? ? ? ? #main img:nth-child(4){
? ? ? ? ? ? ? ? transform: rotateY(120deg) translatez(500px);
? ? ? ? ? ? }
? ? ? ? ? ? #main img:nth-child(5){
? ? ? ? ? ? ? ? transform: rotateY(160deg) translatez(500px);
? ? ? ? ? ? }
? ? ? ? ? ? #main img:nth-child(6){
? ? ? ? ? ? ? ? transform: rotateY(200deg) translatez(500px);
? ? ? ? ? ? }
? ? ? ? ? ? #main img:nth-child(7){
? ? ? ? ? ? ? ? transform: rotateY(240deg) translatez(500px);
? ? ? ? ? ? }
? ? ? ? ? ? #main img:nth-child(8){
? ? ? ? ? ? ? ? transform: rotateY(280deg) translatez(500px);
? ? ? ? ? ? }
? ? ? ? ? ? #main img:nth-child(9){
? ? ? ? ? ? ? ? transform: rotateY(320deg) translatez(500px);
? ? ? ? ? ? }
? ? ? ? ? ??
? ? ? ? ? ? /*# id選擇器? ?id不能重復(fù)命名*/
? ? ? ? ? ? #main{
? ? ? ? ? ? ? ? margin: 100px auto;/*讓父元素居中*/
? ? ? ? ? ? ? ? width: 300px;
? ? ? ? ? ? ? ? height: 400px;
? ? ? ? ? ? ? ? /*聲明一個(gè)3D空間*/
? ? ? ? ? ? ? ? transform-style: preserve-3d;
? ? ? ? ? ? ? ? /*preserve 英[pr??z??v]
美[pr??z??rv]
v.（ 保護(hù); 維護(hù); 保留; ）維持…的原狀（; 保存; 保養(yǎng); 貯存; 保鮮;
n. (某人或群體活動(dòng)、工作等的) 專門領(lǐng)域; 果醬; 腌菜; 泡菜;）*/
? ? ? ? ? ? ? ? transform: rotateX(-10deg);
? ? ? ? ? ? ? ? animation-name: animate;
? ? ? ? ? ? ? ? animation-duration: 10s; /*動(dòng)畫執(zhí)行次數(shù)*/
? ? ? ? ? ? ? ?/*duration 英[dju?re??n]
美[du?re??n]
n. 持續(xù)時(shí)間; 期間;*/
? ? ? ? ? ? ? ? animation-iteration-count: infinite; /*動(dòng)畫持續(xù)時(shí)間：無(wú)限 */
? ? ? ? ? ? ? ? animation-timing-function: linear;
? ? ? ? ? ? ? ? position: relative;
? ? ? ? ? ? ? ? /*relative 英[?rel?t?v]
美[?rel?t?v]
adj. 相比較而言的; 比較的; 相對(duì)的; 相關(guān)聯(lián)的; 相比之下存在(或有)的;*/
? ? ? ? ? ? }
? ? ? ? ? ??
? ? ? ? ? ? /*定義一個(gè)動(dòng)畫*/
? ? ? ? ? ? @keyframes animate {
? ? ? ? ? ? ? ? 0%{
? ? ? ? ? ? ? ? ? ? transform: rotateX(-10deg) rotateY(0deg) ;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? 100%{
? ? ? ? ? ? ? ? ? ? transform: rotateX(-10deg) rotateY(360deg) ;
? ? ? ? ? ? ? ? ? ??
? ? ? ? ? ? ? ? ? ??
? ? ? ? ? ? ? ? ? ??
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? ? ??
? ? ? ? ? ??
? ? ? ? ? ? /*使用@keyframes規(guī)則，你可以創(chuàng)建動(dòng)畫。
創(chuàng)建動(dòng)畫是通過(guò)逐步改變從一個(gè)CSS樣式設(shè)定到另一個(gè)。
在動(dòng)畫過(guò)程中，您可以更改CSS樣式的設(shè)定多次。
指定的變化時(shí)發(fā)生時(shí)使用％，或關(guān)鍵字"from"和"to"，這是和0％到100％相同。
0％是開(kāi)頭動(dòng)畫，100％是當(dāng)動(dòng)畫完成。
為了獲得最佳的瀏覽器支持，您應(yīng)該始終定義為0％和100％的選擇器。
注意: 使用animation屬性來(lái)控制動(dòng)畫的外觀，還使用選擇器綁定動(dòng)畫。.*/
? ? ? ? </style>
? ? ? ? <!--<script>
window.onload=function(){
var imgs=document.getElementsByTagName("img");
for(var i of imgs){
i.onmouseover=function(){
if(this.title=="a"){
this.src="2.png";
}
}
i.onmouseout=function(){
this.src="1.png";
}
}
}
</script>-->
? ? </head>
? ? <body>
? ? ? ? <div id="main">
? ? ? ? ? ? <img src="1.png" title="a"/>
? ? ? ? ? ? <img src="2.png" title="a"/>
? ? ? ? ? ? <img src="3.png" title="a"/>
? ? ? ? ? ? <img src="4.png" title="a"/>
? ? ? ? ? ? <img src="5.png" title="a"/>
? ? ? ? ? ? <img src="6.png" title="a"/>
? ? ? ? ? ? <img src="7.png" title="a"/>
? ? ? ? ? ? <img src="8.png" title="a"/>
? ? ? ? ? ? <img src="9.png" title="a"/>
? ? ? ? ? ?<img src="10.png" title="a"/>
? ? ? ? </div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
? ? ? ? ? ? body{
? ? ? ? ? ? ? ? background-color:green;
? ? ? ? ? ? }
? ? ? ? ? ? *{
? ? ? ? ? ? ? ? margin: 0;
? ? ? ? ? ? ? ? padding: 0;
? ? ? ? ? ? }
? ? ? ? ? ? #main img{
? ? ? ? ? ? ? ? width:300px;
? ? ? ? ? ? ? ? height: 400px;
? ? ? ? ? ? ? ? position: absolute;
? ? ? ? ? ? ?/*? ?absolute:絕對(duì)*/
? ? ? ? ? ? ? ? border:5px blue double;
? ? ? ? ? ? ? ??
? ? ? ? ? ? ? ??
? ? ? ? ? ? ? ? border-radius: 90%;
? ? ? ? ? ? }
? ? ? ? ? ? #main img:nth-child(1){
? ? ? ? ? ? ? ? transform: translateZ(500px);
? ? ? ? ? ? ? ??
? ? ? ? ? ? }?
? ? ? ? ? ?/* nth-child(1)代表第一個(gè)最正面的圖片*/
? ? ? ? ? ? /*:nth-child(n) 選擇器匹配屬于其父元素的第 N 個(gè)子元素，不論元素的類型。
n 可以是數(shù)字、關(guān)鍵詞或公式。*/
? ? ? ? ?/*? ?這里z軸都為500px,就可以讓10張圖片都在同以個(gè)水平面上,*/
? ? ? ? ? ? /*transform 英[tr?ns?f??m]
美[tr?ns?f??rm]
v. 使改變形態(tài); 使改變外觀(或性質(zhì)); 使改觀;*/
? ? ? ? ? ? #main img:nth-child(2){
? ? ? ? ? ? ? ? transform: rotateY(40deg) translateZ(540px);
? ? ? ? ? ? }
? ? ? ? ? ??
? ? ? ? ? ??
? ? ? ? ?/*? ?translateZ(z) 定義 3D 轉(zhuǎn)換，只是用 Z 軸的值。*/
? ? ? ? ? ? #main img:nth-child(3){
? ? ? ? ? ? ? ? transform: rotateY(80deg) translatez(580px);
? ? ? ? ? ? }
? ? ? ? ? ??
? ? ? ? ? ?/* rotateY(angle) 定義沿著 Y 軸的 3D 旋轉(zhuǎn)。*/
? ? ? ? ? ? #main img:nth-child(4){
? ? ? ? ? ? ? ? transform: rotateY(120deg) translatez(620px);
? ? ? ? ? ? }
? ? ? ? ? ? #main img:nth-child(5){
? ? ? ? ? ? ? ? transform: rotateY(160deg) translatez(660px);
? ? ? ? ? ? }
? ? ? ? ? ? #main img:nth-child(6){
? ? ? ? ? ? ? ? transform: rotateY(200deg) translatez(700px);
? ? ? ? ? ? }
? ? ? ? ? ? #main img:nth-child(7){
? ? ? ? ? ? ? ? transform: rotateY(240deg) translatez(740px);
? ? ? ? ? ? }
? ? ? ? ? ? #main img:nth-child(8){
? ? ? ? ? ? ? ? transform: rotateY(280deg) translatez(780px);
? ? ? ? ? ? }
? ? ? ? ? ? #main img:nth-child(9){
? ? ? ? ? ? ? ? transform: rotateY(320deg) translatez(820px);
? ? ? ? ? ? }
? ? ? ? ? ??
? ? ? ? ? ?
? ? ? ? ? ?/* nth-child(1)代表第一個(gè)最正面的圖片*/
? ? ? ? ? ? /*:nth-child(n) 選擇器匹配屬于其父元素的第 N 個(gè)子元素，不論元素的類型。
n 可以是數(shù)字、關(guān)鍵詞或公式。*/
? ? ? ? ?/*? ?這里z軸都為500px,就可以讓10張圖片都在同以個(gè)水平面上,*/
? ? ? ? ? ? /*transform 英[tr?ns?f??m]
美[tr?ns?f??rm]
v. 使改變形態(tài); 使改變外觀(或性質(zhì)); 使改觀;*/
?#main img:nth-child(10){
? ? ? ? ? ? ? ? transform: translateZ(500px);
? ? ? ? ? ? ? ??
? ? ? ? ? ? }?
? ? ? ? ? ? #main img:nth-child(11){
? ? ? ? ? ? ? ? transform: rotateX(40deg) translateZ(540px);
? ? ? ? ? ? }
? ? ? ? ? ??
? ? ? ? ? ??
? ? ? ? ?/*? ?translateZ(z) 定義 3D 轉(zhuǎn)換，只是用 Z 軸的值。*/
? ? ? ? ? ? #main img:nth-child(12){
? ? ? ? ? ? ? ? transform: rotateX(80deg) translatez(580px);
? ? ? ? ? ? }
? ? ? ? ? ??
? ? ? ? ? ?/* rotateY(angle) 定義沿著 Y 軸的 3D 旋轉(zhuǎn)。*/
? ? ? ? ? ? #main img:nth-child(13){
? ? ? ? ? ? ? ? transform: rotateX(120deg) translatez(620px);
? ? ? ? ? ? }
? ? ? ? ? ? #main img:nth-child(14){
? ? ? ? ? ? ? ? transform: rotateX(160deg) translatez(660px);
? ? ? ? ? ? }
? ? ? ? ? ? #main img:nth-child(15){
? ? ? ? ? ? ? ? transform: rotateX(200deg) translatez(700px);
? ? ? ? ? ? }
? ? ? ? ? ? #main img:nth-child(16){
? ? ? ? ? ? ? ? transform: rotateX(240deg) translatez(740px);
? ? ? ? ? ? }
? ? ? ? ? ? #main img:nth-child(17){
? ? ? ? ? ? ? ? transform: rotateX(280deg) translatez(780px);
? ? ? ? ? ? }
? ? ? ? ? ? #main img:nth-child(18){
? ? ? ? ? ? ? ? transform: rotateX(320deg) translatez(820px);
? ? ? ? ? ? }
? ? ? ? ? ??
? ? ? ? ? ? /*# id選擇器? ?id不能重復(fù)命名*/
? ? ? ? ? ? #main{
? ? ? ? ? ? ? ? margin: 100px auto;/*讓父元素居中*/
? ? ? ? ? ? ? ? width: 300px;
? ? ? ? ? ? ? ? height: 400px;
? ? ? ? ? ? ? ? /*聲明一個(gè)3D空間*/
? ? ? ? ? ? ? ? transform-style: preserve-3d;
? ? ? ? ? ? ? ? /*preserve 英[pr??z??v]
美[pr??z??rv]
v.（ 保護(hù); 維護(hù); 保留; ）維持…的原狀（; 保存; 保養(yǎng); 貯存; 保鮮;
n. (某人或群體活動(dòng)、工作等的) 專門領(lǐng)域; 果醬; 腌菜; 泡菜;）*/
? ? ? ? ? ? ? ? transform: rotateX(-10deg);
? ? ? ? ? ? ? ? animation-name: animate;
? ? ? ? ? ? ? ? animation-duration: 1s; /*動(dòng)畫執(zhí)行的過(guò)渡時(shí)間*/
? ? ? ? ? ? ? ?/*duration 英[dju?re??n]
美[du?re??n]
n. 持續(xù)時(shí)間; 期間;*/
? ? ? ? ? ? ? ? animation-iteration-count: infinite; /*動(dòng)畫持續(xù)時(shí)間：無(wú)限 */
? ? ? ? ? ? ? ? animation-timing-function: linear;
? ? ? ? ? ? ? ? position: relative;
? ? ? ? ? ? ? ? /*relative 英[?rel?t?v]
美[?rel?t?v]
adj. 相比較而言的; 比較的; 相對(duì)的; 相關(guān)聯(lián)的; 相比之下存在(或有)的;*/
? ? ? ? ? ? }
? ? ? ? ? ??
? ? ? ? ? ? /*定義一個(gè)動(dòng)畫*/
? ? ? ? ? ? @keyframes animate {
? ? ? ? ? ? ? ? 0%{
? ? ? ? ? ? ? ? ? ? transform:?
? ? ? ? ? ? ? ? ? ? rotateX(0deg)?
? ? ? ? ? ? ? ? ?/*? ?rotateY(0deg) ;*/
? ? ? ? ? ? ? ? ? ? rotateZ(0deg) ;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? 100%{
? ? ? ? ? ? ? ? ? ? transform:?
? ? ? ? ? ? ? ? ? ? rotateX(360deg)?
? ? ? ? ? ? ? ? ? ?/* rotateY(360deg) ;*/
? ? ? ? ? ? ? ? ? ? rotateZ(360deg) ;
? ? ? ? ? ? ? ? ? ??
? ? ? ? ? ? ? ? ? ??
? ? ? ? ? ? ? ? ? ??
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? ? ??
? ? ? ? ? ??
? ? ? ? ? ? /*使用@keyframes規(guī)則，你可以創(chuàng)建動(dòng)畫。
創(chuàng)建動(dòng)畫是通過(guò)逐步改變從一個(gè)CSS樣式設(shè)定到另一個(gè)。
在動(dòng)畫過(guò)程中，您可以更改CSS樣式的設(shè)定多次。
指定的變化時(shí)發(fā)生時(shí)使用％，或關(guān)鍵字"from"和"to"，這是和0％到100％相同。
0％是開(kāi)頭動(dòng)畫，100％是當(dāng)動(dòng)畫完成。
為了獲得最佳的瀏覽器支持，您應(yīng)該始終定義為0％和100％的選擇器。
注意: 使用animation屬性來(lái)控制動(dòng)畫的外觀，還使用選擇器綁定動(dòng)畫。.*/
? ? ? ? </style>
? ? ? ? <!--<script>
window.onload=function(){
var imgs=document.getElementsByTagName("img");
for(var i of imgs){
i.onmouseover=function(){
if(this.title=="a"){
this.src="2.png";
}
}
i.onmouseout=function(){
this.src="1.png";
}
}
}
</script>-->
? ? </head>
? ? <body>
? ? ? ? <div id="main">
? ? ? ? ? ? <img src="1.png" title="a"/>
? ? ? ? ? ? <img src="2.png" title="a"/>
? ? ? ? ? ? <img src="3.png" title="a"/>
? ? ? ? ? ? <img src="4.png" title="a"/>
? ? ? ? ? ? <img src="5.png" title="a"/>
? ? ? ? ? ? <img src="6.png" title="a"/>
? ? ? ? ? ? <img src="7.png" title="a"/>
? ? ? ? ? ? <img src="8.png" title="a"/>
? ? ? ? ? ? <img src="9.png" title="a"/>
? ? ? ? ? ?<img src="10.png" title="a"/>
? ? ? ? ? ? <img src="1.png" title="a"/>
? ? ? ? ? ? <img src="2.png" title="a"/>
? ? ? ? ? ? <img src="3.png" title="a"/>
? ? ? ? ? ? <img src="4.png" title="a"/>
? ? ? ? ? ? <img src="5.png" title="a"/>
? ? ? ? ? ? <img src="6.png" title="a"/>
? ? ? ? ? ? <img src="7.png" title="a"/>
? ? ? ? ? ? <img src="8.png" title="a"/>
? ? ? ? ? ? <img src="9.png" title="a"/>
? ? ? ? ? ?<img src="10.png" title="a"/>
? ? ? ? </div>
</body>
</html>
Deg
[詞典]【醫(yī)】變性，退化，變質(zhì)，度，程度;
