CSS3之3D變形,實現大海波濤
阿新 • • 發佈:2018-11-09
animation:動畫名稱 花費時間 運動曲線 何時開始 播放次數 是否反方向;
@keyframes 動畫名稱 {
from{ 開始位置 } 0%
to{ 結束 } 100%
}
實現程式碼:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>3D變形之大海波濤</title> <link rel="shortcut icon" href="favicon.ico" /> <style type="text/css"> *{ padding: 0; margin: 0; } html,body{ width: 100%; height: 100%; background-color: #0ea9b1; overflow: hidden; } img{ width: 100%; height: auto; position: absolute; bottom: 0; left: 0; } /*兩種方式,一種是移動速度不一樣,一種是開始時間不一樣*/ img:first-child{ animation: move 2s linear infinite; } img:last-child{ animation: move 2s linear infinite; } .sun{ height: 100px; width: 100px; margin: 100px; position: relative; } .sun:before,.sun:after{ content: ""; height: 50px; width: 50px; background-color: rgba(255,255,255,0.8); position: absolute; /*盒子居中對齊*/ left: 50%; top: 50%; border-radius: 50%; animation: sun 2s infinite; } .sun:after{ height: 80px; width: 80px; background-color: rgba(255,255,255,0.6); animation: sun 3s infinite; } /*宣告動畫 關鍵幀 @keyframes 動畫名稱{}*/ @keyframes move{ 0%{ bottom: 0; } 50%{ bottom: -50px; } 100%{ bottom: 0; } } @keyframes sun{ 0%{ transform: translate(-50%,-50%) scale(1); /*陰影效果 box-shadow: 水平 垂直 羽化範圍 顏色*/ box-shadow: 0px 0px 5px rgba(255,255,255,0.7); } 50%{ transform: translate(-50%,-50%) scale(1.1); box-shadow: 0px 0px 30px rgba(255,255,255,0.7); } 100%{ transform: translate(-50%,-50%) scale(1); box-shadow: 0px 0px 5px rgba(255,255,255,0.7); } } </style> </head> <body> <div class="sun"></div> <img src="img/1.png"/> <img src="img/2.png"/> </body> </html>