css布局实现可调节速度的电风扇旋转动画效果代码
代码语言:html
所属分类:动画
代码描述:css布局实现可调节速度的电风扇旋转动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url('https://fonts.googleapis.com/css2?family=Architects+Daughter&display=swap'); html, body { height: 100%; width: 100%; background: #FFF8E6; display: grid; place-items: center; } main { position: relative; } .fan-footer { background: #FFF; border: 1px solid #E6DFCF; height: 30px; width: 180px; border-radius: 50px 50px 100% 100%; position: relative; bottom: -100px; box-shadow: -3px 6px 4px 0px rgba(189,189,189,0.72); } .fan-body { position: absolute; bottom: 10px; left: 65px; background: #FFF; border: 1px solid #E6DFCF; height: 180px; width: 50px; display: flex; justify-content: center; border-radius: 50px 50px 100% 100%; } .motor { height: 50px; width: 50px; border-radius: 50%; display: grid; place-items: center; } .fan { height: 30px; width: 30px; border-radius: 50%; position: relative; } .fan, .blade, .motor { background: #FFF; border: 1px solid #E6DFCF; } .curve { position: relative; height: 50px; width: 50px; border: 2px solid #E6DFCF; top: 10px; left: 10px; border-radius: 60% 30% 60% 10px; } .blade { position: absolute; height: 100px; width: 100px; border-radius: 60% 30% 60% 10px; background: rgb(255,255,255); background: linear-gradient(135deg, rgba(255,255,255,1) 13%, rgba(242,236,219,1) 38%, rgba(255,255,255,1) 70%); } .blade1 { top: -90px; left: 19px; } .blade2 { transform: rotate(-120deg); top: -55px; right: 38px; } .blade3 { transform: rotate(-240deg); top: 38px; left: -17px; } @keyframes fan-rotation { 0% { transform: rotate(0deg); } 1% { transform: rotate(3.56deg); } 2% { transform: rotate(7.12deg); } 3% { transform: rotate(10.68deg); } 4% { transform: rotate(14.24deg); } 5% { transform: rotate(17.8deg); } 6% { transform: rotate(21.36deg); } 7% { transform: rotate(24.92deg); } 8% { transform: rotate(28.48deg); } 9% { transform: rotate(32.04deg); } 10% { transform: rotate(35.6deg); } 11% { transform: rotate(39.16deg); } 12% { transform: rotate(42.72deg); } 13% { transform: rotate(46.28deg); } 14% { transform: rotate(49.84deg); } 15% { transform: rotate(53.4deg); } 16% { transform: rotate(56.96deg); } 17% { transform: rotate(60.52deg); } 18% { transform: rotate(64.08deg); } 19% { transform: rotate(67.64deg); } 20% { transform: rotate(71.2deg); } 21% { transform: rotate(74.76deg); } 22% { transform: rotate(78.32deg); } 23% { transform: rotate(81.88deg); } 24% { transform: rotate(85.44deg); } 25% { transform: rotate(89deg); } 26% { transform: rotate(92.56deg); } 27% { transform: rotate(96.12deg); } 28% { transform: rotate(99.68deg); } 29% { transform: rotate(103.24deg); } 30% { transform: rotate(106.8deg); } 31% { transform: rotate(110.36deg); } 32% { transform: rotate(113.92deg); } 33% { transform: rotate(117.48deg); } 34% { transform: rotate(121.04deg); } 35% { transform: rotate(124.6deg); } 36% { transform: rotate(128.16deg); } 37% { transform: rotate(131.72deg); } 38% { transform: rotate(135.28deg); } 39% { transform: rotate(138.84deg); } 40% { transform: rotate(142.4deg); } 41% { transform: rotate(145.96deg); } 42% { transform: rotate(149.52deg); } 43% { transform: rotate(153.08deg); } 44% { transform: rotate(156.64deg); } 45% { transform: rotate(160.2deg); } 46% { transform: rotate(163.76deg); } 47% { transform: rotate(167.32deg); } 48% { transform: rotate(170.88deg); } 49% { transform: rotate(174.44deg); } 50% { transform: rotate(178deg); } 51% { transform: rotate(181.56deg); } 52% { transform: rotate(185.12deg); } 53% { transform: rotate(188.68deg); } 54% { transform: rotate(192.24deg); } 55% { transform: rotate(195.8deg); } 56% { transform: rotate(199.36deg); } 57% { transform: rotate(202.92deg); } 58% { transform: rotate(206.48deg); } 59% { transform: ro.........完整代码请登录后点击上方下载按钮下载查看
网友评论0