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).........完整代码请登录后点击上方下载按钮下载查看
网友评论0