標籤：ado images line shadow 技術 code 1.2 for idt
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title></title> 6 <style type="text/css"> 7 /*建立動畫名稱*/ 8 @keyframes rotate{ 9 0% {10 transform:scale(1);11 opacity:1;12 }13 15% {14 transform:scale(1.2);15 opacity:0.8;16 }17 30% {18 transform:scale(1.0);19 opacity:1;20 }21 45% {22 transform:scale(1.3);23 opacity:0.8;24 }25 60% {26 transform:scale(1.1);27 opacity:0.6;28 }29 75% {30 transform:scale(1.4);31 opacity:0.8;32 }33 90% {34 transform:scale(1.2);35 opacity:0.9;36 }37 100%{38 transform:scale(1.5);39 opacity:1.2;40 }41 }42 img:hover{43 /*44 @keyframes 規定動畫。 45 animation 所有動畫屬性的簡寫屬性，除了 animation-play-state 屬性。 46 animation-name 規定 @keyframes 動畫的名稱。 47 animation-duration 完成一個周期所花費的秒或毫秒。預設是 0。 48 animation-timing-function 規定動畫的速度,預設是 "ease" 勻速是linear。 49 animation-delay 規定動畫何時開始。預設是 0。 50 animation-iteration-count 規定動畫被播放的次數，預設是 1,不限infinite。 51 animation-direction 規定動畫是否在下一周期逆向地播放。預設是 "normal"，逆向alternate。 52 animation-play-state 規定動畫是否正在運行或暫停。預設是 "running"，停止paused。 53 animation-fill-mode 規定對象動畫時間之外的狀態。 54 * */55 56 /*animation-name: rotate;57 animation-duration: 2s;58 animation-timing-function: linear;59 animation-delay: 0s;60 animation-iteration-count: infinite;61 animation-direction: normal;62 animation-play-state: running;*/63 64 /*animation 屬性值 統一文法*/65 animation:rotate 1.6s linear 0s infinite normal running;66 /*對象選取器 box-shadow:[投影方式] X軸位移量 Y軸位移量模糊半徑 陰影半徑 顏色*/67 /*對元素進行陰影其他設定*/68 text-shadow:-10px 10px 20px red;69 }70 img{71 margin:50px 0px 0px 100px; 72 animation-play-state:paused;73 width: 200px;74 height: 200px;75 76 }77 </style>78 </head>79 <body>80 <img src="img/love2.png">81 </body>82 </html>
效果
不完善的css怦然心動，有待改進...
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
