svg+css实现电风扇旋转动画效果代码
代码语言:html
所属分类:动画
代码描述:svg+css实现电风扇旋转动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" /> <style> body{ padding: 150px; } .fan-container { position: relative; width: 200px; height: 200px; margin: 0 auto; } .fan-svg { width: 100%; height: 100%; } .fan-blades { animation: rotate-blades 0.8s linear infinite; transform-origin: 100px 80px; } .fan-trails { animation: rotate-blades 1.2s linear infinite; transform-origin: 100px 80px; filter: blur(1px); } @keyframes rotate-blades { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @media (prefers-color-scheme: dark) { #bladeGradient stop { stop-color: #888; } #bladeGradient stop:nth-child(2) { stop-color: #666; } #bladeGradient stop:nth-child(3) { stop-color: #444; } #trailGradient stop { stop-color: #666; } #motorGradient stop { stop-color: #666; } #motorGradient stop:nth-child(2) { stop-.........完整代码请登录后点击上方下载按钮下载查看
网友评论0