three实现流场动画效果代码
代码语言:html
所属分类:动画
代码描述:three实现流场动画效果代码,结合SimplexNoise插件,实现磁场运动动画。
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
@font-face {
font-family: GOSTAi;
src: url("//repo.bfw.wiki/bfwrepo/font/GOSTtypeAitalic.ttf") format("truetype");
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background-color: teal;
}
canvas{
background-color: navy;
position: absolute;
left: calc(50% - 300px - 2vh);
top: calc(50% - 400px - 2vh);
border: 2vh solid aqua;
border-radius: 100px;
}
#line1{
top: calc(50% - 440px);
text-align: left;
}
#line2{
bottom: calc(50% - 430px);
text-align: right;
padding-right: 5vh;
}
.writing{
position: absolute;
width: 600px;
left:calc(50% - 300px);
font-family: GOSTAi;
-webkit-text-fill-color: white;
font-size: 250px;
pointer-events: none;
mix-blend-mode: d.........完整代码请登录后点击上方下载按钮下载查看
















网友评论0