svg+js实现鼠标跟随风扇散热交互动画效果代码
代码语言:html
所属分类:动画
代码描述:svg+js实现鼠标跟随风扇散热交互动画效果代码,移动鼠标靠近小人,小人就会凉爽,背景颜色就会改变,使用了warpjs对svg进行变形。
代码标签: svg js 鼠标 跟随 风扇 散热 交互 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @keyframes spin { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } } @keyframes sweat { 0% { transform: translate(-50%, -50%) translateY(0); opacity: 1; } 20% { transform: translate(-50%, -50%) translateY(25px); opacity: 1; } 30% { transform: translate(-50%, -50%) translateY(0); opacity: 0; } 100% { transform: translate(-50%, -50%) translateY(0); opacity: 0; } } :root { --person-scale: 1; --mouth-scale: 1; --background: #fdc830; --fan: 80px; --fan-animation-duration: 1.8s; } html, body { height: 100%; cursor: none; background: var(--background); transition: background 0.25s ease-out; } html:after, body:after { content: ""; background: radial-gradient(circle, rgba(0, 0, 0, 0) 52%, rgba(18, 18, 18, 0.35) 100%); width: 100%; height: 100%; position: absolute; } .person { overflow: visible; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(var(--person-scale)); } .fan { position: absolute; width: var(--fan); height: var(--fan); transform: translate(-50%, -50%); animation: spin var(--fan-animation-duration) linear infinite; } .eyes { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .eye { position: relative; display: inline-block; border-radius: 50%; height: 30px; width: 30px; background: #CCC; transition: 0.25s width ease-in; } .eye:before { position: absolute; bottom: 17px; right: 10px; width: 10px; height: 10px; background: #000; border-radius: 50%; content: " "; } .mouth { height: 20px; width: 28px; border-radius: 100%; background: #CCC; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(var(--mouth-scale)); transform-origin: center; transition: 0.25s transform ease-in; margin-top: 40px; } .sweat { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) translateY(25px); margin: -50px 0 0 -50px; opacity: 0; transition: 0.25s all ease-out; animation: sweat 4s ease-out infinite; } .sweat:after { display: block; content: ""; background: #2e8ece; width: 20px; height: 20px; border-radius: 50%; transform: scale(0.7, 1) rotate(45deg); } .close { --background: #0cebeb; --fan: 65px; --fan-animation-duration: 0.8s; } .veryClose { --background: #29ffc6; --fan: 50px; --fan-animati.........完整代码请登录后点击上方下载按钮下载查看
网友评论0