gsap五颜六色粒子气球喷射形成数字动画效果代码
代码语言:html
所属分类:粒子
代码描述:gsap五颜六色粒子气球喷射形成数字动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
body {
margin: 0;
height: 100vh;
overflow: hidden;
display: -webkit-box;
display: flex;
-webkit-box-align: center;
align-items: center;
-webkit-box-pack: center;
justify-content: center;
background: #fff;
}
.followers {
position: fixed;
z-index: 3;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -25%) rotate(-10deg);
transform: translate(-50%, -25%) rotate(-10deg);
width: 64vw;
height: 28vw;
fill-rule: evenodd;
fill: none;
stroke: #ffbd36;
stroke-width: 5px;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dashoffset: 1006px;
stroke-dasharray: 1006px;
}
.followers.stroke {
stroke: #fff;
z-index: 2;
-webkit-transform: translate(-50%, -24%) rotate(-10deg);
transform: translate(-50%, -24%) rotate(-10deg);
stroke-width: 10px;
}
.followers.shadow {
stroke: black;
z-index: 0;
opacity: .1;
-webkit-filter: blur(10px);
filter: blur(10px);
-webkit-transform: translate(-50%, -22%) rotate(-10deg);
transform: translate(-50%, -22%) rotate(-10deg);
stroke-width: 8px;
}
</style>
</head>
<body>
<canv.........完整代码请登录后点击上方下载按钮下载查看
















网友评论0