首页 > 代码库 > 不完善的css怦然心动,有待改进...
不完善的css怦然心动,有待改进...
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怦然心动,有待改进...
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。