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