簡單通過Css3 圖片動畫
阿新 • • 發佈：2018-06-12
set style spl nth white itl css3 idt ima 
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <link rel="stylesheet" href="Css/index.css"> 7 </head> 8 <body> 9 <figure class=".test1"> 10 <img src="Images/1.jpg"View Code/> 11 <figcaption> 12 <h2>圖片標題</h2> 13 <p>圖片註解1</p> 14 <p>圖片註解2</p> 15 <p>圖片註解3</p> 16 </figcaption> 17 </figure> 18 </body> 19 </html>
1 body,figure,figcaption,h2,p,img{ 2 margin: 0; 3 padding: 0; 4 } 5 figure{ 6 width: 33.33%; 7 /*position: absolute;*/ 8 height: 350px; 9 overflow: hidden; /*圖片溢出的部分隱藏*/ 10 /*float: left;*/ 11 } 12 img{ 13 opacity: 0.8; /*透明度80%*/ 14 transition: all 0.35s; /*所有動作 0.35秒*/ 15 } 16 h2,p{ 17 text-align: center; 18 margin: 10px; 19 } 20 p{ 21 background-color:white; 22 transform: translate(-120px,0px); /*所有的p元素平移-120px*/ 23 } 24 h2{ 25 color: white; 26 } 27 figcaption{ 28 position: absolute; 29 top:0; 30 left: 0; 31 } 32 .\.test1{ 33 background: #2f0000; 34 } 35 .\.test1:hover figcaption p{ 36 transform:translate(0px,0px); /*當懸浮的時候 恢復到默認狀態*/ 37 } 38 .\.test1 figcaption p:nth-of-type(1){ 39 transition-delay: 0.05s; /*動畫所執行的時間*/ 40 } 41 .\.test1 figcaption p:nth-of-type(2){ 42 transition-delay: 0.1s; 43 } 44 .\.test1 figcaption p:nth-of-type(3){ 45 transition-delay: 0.15s; 46 } 47 .\.test1:hover img{ 48 transform:translate(-50px,0px); /*當懸浮的時候平移-50px*/ 49 opacity: 0.5; /*透明度50%*/ 50 } 51 figure figcaption p,h2{ 52 transition: all 0.35s; /*所有動畫執行0.35s秒*/ 53 }
簡單通過Css3 圖片動畫