不错的CSS特效1-工具盒子

喜欢看网页上那些酷炫的效果吗？这就是CSS的功劳！我整理了一些很棒的CSS特效，让网页看起来更有趣、更生动。这些特效有的简单，有的复杂，但都用的是简单易懂的代码。比如，颜色会慢慢变化的背景，会动的小图标，还有跟着你的鼠标动来动去的效果。这篇文章里，我会和大家分享并展示这些让人看了还想看的CSS特效。快来一起看看吧！

相关文章推荐：不错的CSS特效2

索引

1.动态波纹字
2.静态格栅字
3.旋转的金币
4.霓虹灯文字
5.故障字体效果
6.乱码效果
7.输入框交互效果
8.圆点交互按钮
9.文字上下滑动按钮
10.音频特效
11.文字跳动的输入框
12.暗黑模式切换开关
13.呼吸灯按钮
14.新拟态按钮
15.网站底部徽章样式
16.网站LED灯公告
17.HTML滚动播报
18.七彩圆环
19.科幻404

1.动态波纹字

<!DOCTYPE html>
<html lang="zh">
  <head>
  <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
    <title>动态的波纹字_刘郎阁</title>
  </head>
  <body>
    <div class="app">
      <div class="font20">刘郎阁<br>欢迎您！</div>
    </div>
    </div>
<style>
.app{
  width: 100%;
  height: 100vh;
  background-color: #ffffff;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.font20{
  color: transparent;
  font-size: 70px;
  font-weight: 900;
  background-image: linear-gradient(-45deg, #fff 0%, #fff 25%, green 25%, green 50%, #fff 50%, #fff 75%, green 75%, green 100%);
  -webkit-background-clip: text;
  animation: font20 10s ease infinite;
}
@keyframes font20{
  0%{
    background-size: 1px 2px;
  }
  20%{
    background-size: 4px 5px;
  }
  40%{
    background-size: 3px 4px;
  }
  60%{
    background-size: 5px 6px;
  }
  80%{
    background-size: 2px 3px;
  }
  100%{
    background-size: 7px 6px;
  }
}
</style>
  </body>
</html>

2.静态格栅字

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>静态格栅字_刘郎阁</title>
  </head>
  <body>
    <div class="app">
      <div class="font21" data-text="刘郎阁 欢迎您">刘郎阁<br>欢迎您</div>
    </div>
    </div>
<style>
.app{
width: 100%;
height: 100vh;
background-color: #ffffff;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.font21{
color: transparent;
font-size: 70px;
font-weight: 900;
letter-spacing: 10px;
background-image: linear-gradient(-45deg, #ffffff 0%, #ffffff 25%, green 25%, green 50%, #ffffff 50%, #ffffff 75%, green 75%, green 100%);
background-size: 4px 4px;
-webkit-background-clip: text;
position: relative;
}
.font21:before{
content: attr(data-text);
letter-spacing: 10px;
color: green;
position: absolute;
top: -6px;
left: -6px;
text-shadow: 2px 2px #ffffff;
}
</style>
</body>
</html>

3.旋转的金币

<!DOCTYPE html>
<html lang="zh">
  <head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>旋转的金币_刘郎阁</title>
  </head>
  <body>
    <div class="app">
      <div class="icon22">¥</div>
    </div>
<style>
.app{
  width: 100%;
  height: 100vh;
  background-color: #ffffff;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.icon22{
  width: 72px;
  height: 72px;
  line-height: 72px;
  text-align: center;
  color: #daa500;
  font-size: 40px;
  font-weight: 900;
  background-color: #ffee00;
  border-radius: 50%;
  box-shadow: inset 0 0 0 4px #ffee00,inset 0 0 0 5px #daa500,0 5px 12px rgba(0,0,0,0.2);
  animation: ani-icon22 5s ease infinite;
}
@keyframes ani-icon22{
  0%{
    transform: rotateY(0deg);
    animation-timing-function: cubic-bezier(0.5, 0, 1, 0.5);
  }
  50%{
    transform: rotateY(900deg);
    animation-timing-function: cubic-bezier(0, 0.5, 0.5, 1);
  }
  100%{
    transform: rotateY(1800deg);
    animation-timing-function: cubic-bezier(0.5, 0, 1, 0.5);
  }
}
</style>
</body>
</html>

4.霓虹灯文字

<!DOCTYPE html>
<html lang="zh">
  <head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>闪烁的霓虹灯文字_刘郎阁</title>
  </head>
  <body>
    <div class="app">
      <div class="light23">
        <div class="title23">
          <span>刘</span>
          <span>郎</span>
          <span>阁</span>
        </div>
        <div class="info23">
          <span>Welcome to vjo.cc</span>
        </div>
      </div>
    </div>
<style>
.app{
width: 100%;
height: 100vh;
background-color: #ffffff;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.light23{
cursor: default;
}
.title23{
color: #eaeaea;
font-size: 32px;
font-weight: 900;
}
.info23{
color: #eaeaea;
font-size: 16px;
letter-spacing: 1px;
text-transform: capitalize;
}
.light23:hover .title23 span{
animation: light 0.4s ease forwards;
}
.light23:hover .title23 span:nth-of-type(2){
animation-delay: .14s;
}
.light23:hover .title23 span:nth-of-type(3){
animation-delay: .42s;
}
.light23:hover .title23 span:nth-of-type(4){
animation-delay: .78s;
}
@keyframes light{
10%,30%,50%{
color: #eaeaea;
text-shadow: none;
}
20%,40%,60%{
color: #318BF6;
text-shadow: 0px 0px 20px #1ABFED,0px 0px 40px #1ABFED,0px 0px 60px #1ABFED;
}
100%{
color: #318BF6;
text-shadow:0px 0px 20px #1ABFED,0px 0px 40px #1ABFED,0px 0px 60px #1ABFED;
}
}
.light23:hover .info23 span{
animation: light 0.4s ease forwards;
animation-delay: 1s;
}
</style>
</body>
</html>

5.故障字体效果

<!DOCTYPE html>
<html lang="zh">
  <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>故障字体效果_刘郎阁</title>
  </head>
  <body>
    <div class="app">
      <div class="font24" data-text="404">404</div>
    </div>
<style>.app{
  width: 100%;
  height: 100vh;
  background-color: #ffffff;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.font24 {
  width: 156px;
  height: 98px;
  position: relative;
  font-size: 70px;
  font-weight: 900;
  color: transparent;
  letter-spacing: 10px;
  z-index: 10;
  animation: text-skew 4s linear infinite;
}
.font24:before,.font24:after {
  display: block;
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
}
.font24:before {
  animation: text-light 1s alternate-reverse infinite;
  color: #ff0000;
  z-index: -5;
  text-shadow: 2px 2px 0 #00ff00;
  mix-blend-mode: darken;
}
.font24:after {
  animation: text-light2 0.5s alternate-reverse infinite;
  color: #00ff00;
  z-index: -10;
  text-shadow: 2px 2px 0 #ff0000;
}
@keyframes text-light{
  10% {
    transform: translate(-2px,4px);
  }
  50% {
    transform: translate(2px, 2px);
  }
  100% {
    transform: translate(-4px,4px);
  }
}
@keyframes text-light2{
  0% {
    transform: translate(0,0);
  }
  20% {
    transform: translate(-2px,2px);
  }
  40% {
    transform: translate(-2px,2px);
  }
  60% {
    transform: translate(2px, -2px);
  }
  80% {
    transform: translate(2px, 2px);
  }
  100% {
    transform: translate(0,0);
  }
}
@keyframes text-skew{
  29%{
    color: transparent;
    transform: skew(0deg,0deg);
  }
  30%{
    color: #000000;
    transform: skew(10deg,40deg);
  }
  31%{
    color: transparent;
    transform: skew(0deg,0deg);
  }
  69%{
    color: transparent;
    transform: skew(0deg,0deg);
  }
  70%{
    color: #000000;
    transform: skew(180deg,10deg);
  }
  71%{
    color: transparent;
    transform: skew(0deg,0deg);
  }
}
</style>
  </body>
</html>

6.乱码效果

<!DOCTYPE html>
<html lang="zh">
  <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>乱码效果_刘郎阁</title>
  </head>
  <body>
    <div class="app">
      <div class="font25">YJVC.CN</div>
    </div>
<style>
.app{
width: 100%;
height: 100vh;
background-color: #ffffff;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.font25{
position: relative;
font-size: 24px;
font-weight: 900;
color: #1630f1;
letter-spacing: 10px;
background-color: #ffffff;
}
.font25:after{
content: '';
position: absolute;
top: 0;
z-index: 10;
background-color: inherit;
animation: text-ani25 2.4s linear infinite;
animation-delay: 2s;
}
@keyframes text-ani25{
0%{
content: "$-";
left: 0;
}
5%{
content: ";y";
left: 0;
}
10%{
content: "&#H";
left: 0;
}
15%{
content: "-!);";
left: 0;
}
20%{
content: "#$_}-'";
left: 0;
}
25%{
content: ":0^!$.";
left: 0;
}
30%{
content: "#{+.-?#u";
left: 0;
}
35%{
content: "f7%}-;#";
left: 0;
}
40%{
content: "^='?'*$!";
left: 0;
}
45%{
content: "+0^&!^-&quot;; left: 0; } 50%{ content: &quot;&amp;-?&gt;-=|";
left: 0;
}
55%{
content: "u<|:#-";
left: auto;
right: 0;
}
60%{
content: ";~0![,";
left: auto;
right: 0;
}
65%{
content: ")+->";
left: auto;
right: 0;
}
70%{
content: "+.=d";
left: auto;
right: 0;
}
75%{
content: "&%";
left: auto;
right: 0;
}
80%{
content: "`@";
left: auto;
right: 0;
}
85%{
content: "-";
left: auto;
right: 0;
}
90%{
content: "#";
left: auto;
right: 0;
}
95%{
content: "";
left: 0;
}
100%{
content: "";
left: 0;
}
}
</style>
</body>
</html>

7.输入框交互效果

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>输入框交互_刘郎阁</title>
  </head>
  <body>
    <div class="app">
      <label class="label28">
        <span class="span28">用户名</span>
        <input class="inp28" type="text" required>
      </label>
    </div>
<style>
.app{
width: 100%;
height: 100vh;
background-color: #ffffff;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.label28{
width: 190px;
height: 68px;
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-end;
cursor: text;
}
.span28{
width: 100%;
color: #000;
font-size: 14px;
margin-bottom: 6px;
padding: 0 10px;
}
.inp28{
width: 100%;
padding: 0 10px;
height: 2px;
border: 0;
font-size: 14px;
box-sizing: border-box;
background-color: rgba(0,0,0,0.1);
transition: .3s;
}
.inp28:hover{
background-color: rgba(50,133,255,0.7);
}
.inp28:focus,.inp28:valid{
background-color: rgba(50,133,255,0.2);
border: 2px solid rgba(50,133,255,0.7);
border-radius: 4px;
height: 42px;
color: #000;
}
</style>
</body>
</html>

8.圆点交互按钮

<!DOCTYPE html>
<html lang="zh">
  <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>圆点交互按钮_刘郎阁</title>
  </head>
  <body>
    <div class="app">
      <div class="btn29">
        <span class="btn29-bg"></span>
        <span class="btn29-span-text">查看详情</span>
      </div>
    </div>
<style>
.app{
width: 100%;
height: 100vh;
background-color: #ffffff;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.btn29{
width: 100px;
height: 42px;
line-height: 42px;
position: relative;
cursor: pointer;
}
.btn29-bg{
width: 30px;
height: 30px;
display: block;
border-radius: 15px;
position: absolute;
left: 0;
bottom: 0;
background-color: #97E138;
transition: 0.24s;
}
.btn29-span-text{
width: 100%;
text-align: center;
display: block;
font-size: 16px;
font-weight: 700;
color: #056C00;
position: absolute;
}
.btn29:hover .btn29-bg{
width: 100%;
height: 42px;
border-radius: 21px;
}
</style>
</body>
</html>

9.文字上下滑动按钮

<!DOCTYPE html>
<html lang="zh">
  <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>文字上下滑动按钮_刘郎阁</title>
  </head>
  <body>
    <div class="app">
      <div class="btn30">
        <span class="btn-text30">探</span>
        <span class="btn-text30">索</span>
        <span class="btn-text30">未</span>
        <span class="btn-text30">知</span>
      </div>
    </div>
<style>
.app{
width: 100%;
height: 100vh;
background-color: #ffffff;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.btn30{
height: 42px;
position: relative;
cursor: pointer;
display: flex;
overflow: hidden;
}
.btn-text30{
width: 36px;
height: 42px;
line-height: 42px;
text-align: center;
display: block;
background-color: #457356;
color: #ffffff;
font-size: 16px;
font-weight: 700;
position: relative;
}
.btn-text30:after{
width: 36px;
height: 42px;
position: absolute;
background-color: #3185fa;
color: #ffffff;
z-index: 99;
transition: 0.3s ease-in-out;
}
.btn-text30:nth-of-type(1):after{
content: '学';
top: -42px;
left: 0;
}
.btn-text30:nth-of-type(2):after{
content: '无';
top: 42px;
left: 0px;
}
.btn-text30:nth-of-type(3):after{
content: '止';
top: -42px;
left: 0;
}
.btn-text30:nth-of-type(4):after{
content: '境';
top: 42px;
left: 0px;
}
.btn30:hover .btn-text30:after{
top: 0;
}
</style>
</body>
</html>

10.音频特效

<!DOCTYPE html>
<html lang="zh">
  <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>音频特效_刘郎阁</title>
  </head>
  <body>
    <div class="app">
      <div class="audio-box37">
        <div class="audio37-block"></div>
        <div class="audio37-block"></div>
        <div class="audio37-block"></div>
        <div class="audio37-block"></div>
        <div class="audio37-block"></div>
        <div class="audio37-block"></div>
        <div class="audio37-block"></div>
      </div>
    </div>
<style>
.app{
width: 100%;
height: 50vh;
background-color: #ffffff;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.audio-box37{
width: 84px;
height: 62px;
display: flex;
justify-content: space-between;
align-items: flex-end;
}
.audio37-block{
width: 6px;
box-sizing: border-box;
background-color: #97E138;
animation: audio73-eff 2s linear infinite;
box-shadow: 0 -1px 0 #ffffff, 0 -2px 0 #97E138;
}
.audio37-block:nth-of-type(2){
background-color: #FF3A85;
animation-delay: .3s;
animation-duration: 2.4s;
box-shadow: 0 -1px 0 #ffffff, 0 -2px 0 #FF3A85;
}
.audio37-block:nth-of-type(3){
background-color: #A2DAF6;
animation-delay: .38s;
box-shadow: 0 -1px 0 #ffffff, 0 -2px 0 #A2DAF6;
}
.audio37-block:nth-of-type(4){
background-color: #FFD6D0;
animation-delay: .5s;
box-shadow: 0 -1px 0 #ffffff, 0 -2px 0 #FFD6D0;
}
.audio37-block:nth-of-type(5){
background-color: #FF472C;
animation-duration: 2.7s;
box-shadow: 0 -1px 0 #ffffff, 0 -2px 0 #FF472C;
}
.audio37-block:nth-of-type(6){
background-color: #DE74CE;
animation-delay: .6s;
animation-duration: 1.4s;
box-shadow: 0 -1px 0 #ffffff, 0 -2px 0 #DE74CE;
}
.audio37-block:nth-of-type(7){
background-color: #36AFCA;
animation-delay: .8s;
box-shadow: 0 -1px 0 #ffffff, 0 -2px 0 #36AFCA;
}
@keyframes audio73-eff{
0%{
height: 0;
}
50%{
height: 32px;
}
100%{
height: 0;
}
</style>
</body>
</html>

11.文字跳动的输入框

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>提示文字跳起来的输入框_刘郎阁</title>
  </head>
  <body>
    <div class="app">
      <label class="label35">
        <input class="inp35" type="text" required>
        <span class="span35-box">
          <span class="span35-info">用</span>
          <span class="span35-info">户</span>
          <span class="span35-info">名</span>
        </span>
      </label>
    </div>
<style>
.app{
  width: 100%;
  height: 100vh;
  background-color: #ffffff;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.label35{
  width: 180px;
  position: relative;
  cursor: text;
}
.inp35{
  width: 100%;
  padding: 0 10px;
  height: 42px;
  border: 0;
  border-bottom: 2px solid #414141;
  font-size: 16px;
  outline: none;
  box-sizing: border-box;
  transition: .3s;
}
.span35-box{
  width: 100%;
  padding: 0 10px;
  color: #aaa;
  font-size: 16px;
  position: absolute;
  top: 9px;
  box-sizing: border-box;
  display: flex;
}
.span35-info{
  transition: .3s cubic-bezier(0.5, -0.5, 0.5, 1.5);
}
.span35-info:nth-of-type(2){
  transition-delay: 100ms;
}
.span35-info:nth-of-type(3){
  transition-delay: 200ms;
}
.inp35:focus + .span35-box .span35-info,.inp35:valid + .span35-box .span35-info{
  color: #3034d4;
  transform: translateY(-30px);
}
.inp35:focus,.inp35:valid{
  border-bottom: 2px solid #3034d4;
}
</style>
  </body>
</html>

12.暗黑模式切换开关

<!DOCTYPE html>
<html lang="zh">
  <head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>暗黑模式切换开关_刘郎阁</title>
  </head>
  <body>
    <div class="app">
      <label class="label34">
        <input class="inp34" type="checkbox">
        <span class="check-span34"></span>
      </label>
    </div>
<style>
.app{
width: 100%;
height: 100vh;
background-color: #ffffff;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.label34{
width: 60px;
height: 32px;
position: relative;
cursor: pointer;
}
.inp34{
display: none;
}
.check-span34{
width: 100%;
height: 100%;
display: block;
background-color: #383838;
border: 2px solid #383838;
box-sizing: border-box;
border-radius: 16px;
transition: 0.3s linear;
}
.check-span34:after{
content: '';
width: 22px;
height: 22px;
background-color: #383838;
box-shadow: inset -8px -4px 0 #ffffff;
border-radius: 11px;
position: absolute;
top: 5px;
left: 6px;
box-sizing: border-box;
transition: 0.3s ease-in-out;
}
.inp34:checked + .check-span34{
background-color: #ffffff;
}
.inp34:checked + .check-span34:after{
transform: translateX(26px);
background-color: orange;
box-shadow: none;
}
</style>
</body>
</html>

13.呼吸灯按钮

<!DOCTYPE html>
<html lang="zh">
  <head>
 <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>呼吸灯按钮_刘郎阁</title>
  </head>
  <body>
    <div class="app">
      <button class="btn31">按住说话</button>
    </div>
<style>
.app{
width: 100%;
height: 100vh;
background-color: #ffffff;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.btn31{
width: 190px;
height: 42px;
cursor: pointer;
border: none;
border-radius: 4px;
background-color: #333;
font-size: 16px;
font-weight: 700;
color: #fff;
transition: 0.3s;
}
.btn31:hover{
background-color: #3185fa;
}
.btn31:active{
animation: btn31-eff 3s linear infinite;
}
@keyframes btn31-eff{
0%{
box-shadow: 0 0 2px #3185fa;
}
50%{
box-shadow: 0 0 40px #3185fa;
}
100%{
box-shadow: 0 0 2px #3185fa;
}
}
</style>
</body>
</html>

14.新拟态按钮

<!DOCTYPE html>
<html lang="zh">
  <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>新拟态按钮_刘郎阁</title>
  </head>
  <body>
    <div class="app">
      <button class="btn32">FUN</button>
    </div>
<style>
.app{
  width: 100%;
  height: 100vh;
  background-color: #d1d1d1;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.btn32{
  height: 70px;
  padding: 0 20px;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,0.8);
  border-radius: 10px;
  background-color: #f2fff7;
  font-size: 32px;
  font-weight: 700;
  color: #44d431;
  box-shadow: 6px 6px 16px rgba(0,0,0,0.2),-6px -6px 16px rgba(255,255,255,0.8),inset 0px 0px 0px rgba(0,0,0,0.2),inset 0px 0px 0px rgba(255,255,255,0.8);
  transition: 0.2s;
}
.btn32:hover{
  color: #3034d4;
  background-color: #f2f3ff;
  border: 1px solid rgba(255,255,255,1);
  box-shadow: 0px 0px 0px rgba(0,0,0,0.2),0px 0px 0px rgba(255,255,255,0.8),inset 6px 6px 12px rgba(0,0,0,0.2),inset -6px -6px 12px rgba(255,255,255,0.8);
  transform: translateY(10px) scale(0.98);
}
</style>
  </body>
</html>

15.网站底部徽章样式

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>网站底部徽章样式_刘郎阁</title>
</head>
<body>
    <style>
/*底部页脚css*/
.github-badge {
  display: inline-block;
  border-radius: 4px;
  text-shadow: none;
  font-size: 12px;
  color: #fff;
  line-height: 15px;
  background-color: #abbac3;
  margin-bottom: 5px
}
.github-badge .badge-subject {
  display: inline-block;
  background-color: #ffa500;
  padding: 4px 4px 4px 6px;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px
}
.github-badge .badge-value {
  display: inline-block;
  padding: 4px 6px 4px 4px;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px
}
.github-badge .bg-fen {
  background-color: #e76dcb
}
.github-badge .bg-red {
  background-color: #f55066
}
.github-badge .bg-green {
  background-color: #3bca6e
}
.github-badge .bg-bei {
  background-color: #32CD32
}
.github-badge .bg-cai {
background-image: -webkit-linear-gradient(
0deg, #3ca5f6 0%, #a86af9 100%);
</style>
<div class="github-badge">
<span class="badge-subject">名称</span>
<a style="color:#fff" href="#" rel="external nofollow"  target="_blank">
<span class="badge-value bg-red">vjo.cc</span></a>
</div>
<div class="github-badge">
<span class="badge-subject">名称</span>
<a style="color:#fff" href="#" rel="external nofollow"  target="_blank">
<span class="badge-value bg-fen">vjo.cc</span></a>
</div>
<div class="github-badge">
<span class="badge-subject">黔ICP备</span>
<a style="color:#fff" href="#" rel="external nofollow"  target="_blank">
<span class="badge-value bg-bei">666666号-1</span></a>
</div>
<div class="github-badge">
<span class="badge-subject">网站运行</span>
<a style="color:#fff" href="#" rel="external nofollow"  target="_blank">
<span class="badge-value bg-cai"><SPAN id=span_dt_dt style="color: #b5c4c3;"></SPAN> <SCRIPT language=javascript>function show_date_time(){
window.setTimeout("show_date_time()", 1000);
BirthDay=new Date("5/5/2023 16:34:13");
today=new Date();
timeold=(today.getTime()-BirthDay.getTime());
sectimeold=timeold/1000
secondsold=Math.floor(sectimeold);
msPerDay=246060*1000
e_daysold=timeold/msPerDay
daysold=Math.floor(e_daysold);
e_hrsold=(e_daysold-daysold)*24;
hrsold=Math.floor(e_hrsold);
e_minsold=(e_hrsold-hrsold)*60;
minsold=Math.floor((e_hrsold-hrsold)*60);
seconds=Math.floor((e_minsold-minsold)*60);
span_dt_dt.innerHTML='<font style=color:#00ffff>'+daysold+' 天</font> <font style=color:#00ffff>'+hrsold+' 时</font> <font style=color:#00ffff>'+minsold+' 分</font> <font style=color:#00ffff>'+seconds+' 秒</font>';
}
show_date_time();</script></span></a>
</div>
</body>
</html>

16.网站LED灯公告

效果预览

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网站LED灯公告_刘郎阁</title>
</head>
<body>
        <div style="margin:0 auto; overflow: hidden;width: 100%;font-size:21px;font-weight:bold;border: dashed 2px #999;color: red;vertical-align: middle;line-height: 30px;background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAACJCAIAAACege6hAAAAl0lEQVRIie3PMQ7EIAwEwAXDopAmD4jy/4fxAwJSHFCuOOm6tFfZ1VbeHcQYAZAE8AsxRgcgpbTv+7quAFprpZTruoTkcRzbtjnnvPfLsqSUzvMMqppznnN+f973nXNWVY+X8yR77yIyxhhjiEjvnaTMOVtrJEMIz/PUWkspqoq3ua8d5jCHOcxhDnOYwxzmMIc5zPEvxwfkpZxZE+b6hQAAAABJRU5ErkJggg==');">
<marquee scrollamount="3" scrolldelay="1" direction="left">
公告：刘郎阁 YJVC.CN 欢迎大家光临寒舍！
</marquee></div>
</body>
</html>

17.HTML滚动播报

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML滚动播报 刘郎阁</title>
</head>
<body>
  <div class="textwidget custom-html-widget">
  <aside id="php_text-8" 
  class="widget php_text wow fadeInUp" data-wow-delay="0.3s">
  <div class="textwidget widget-text">
    <style type="text/css">#container-box-1{color:#526372;text-transform:uppercase;width:100%;font-size:16px;
    line-height:50px;text-align:center}#flip-box-1{overflow:hidden;height:50px}#flip-box-1 div{height:50px}#flip-box-1>div>div{color:#fff;display:inline-block;text-align:center;height:50px;width:100%}#flip-box-1 
    div:first-child{animation:show 8s linear infinite}.flip-box-1-1{background-color:#FF7E40}.flip-box-1-2{background-color:#C166FF}.flip-box-1-3{background-color:#737373}.flip-box-1-4{background-color:#4ec7f3}
    .flip-box-1-5{background-color:#42c58a}.flip-box-1-6{background-color:#F1617D}@keyframes
    show{0%{margin-top:-300px}5%{margin-top:-250px}16.666%{margin-top:-250px}21.666%{margin-top:-200px}33.332%{margin-top:-200px}38.332%{margin-top:-150px}49.998%{margin-top:-150px}54.998%{margin-top:-100px}66.664%{margin-top:-100px}71.664%{margin-top:-50px}83.33%{margin-top:-50px}88.33%{margin-top:0px}99.996%{margin-top:0px}100%{margin-top:300px}}</style><div id="container-box-1">
<div class="container-box-1-1"> 欢迎来到刘郎阁！ </div>
<div id="flip-box-1"><div><div class="flip-box-1-1">源代码中寻快乐，</div>
</div><div><div class="flip-box-1-2">实用好玩花样多。</div></div>
<div><div class="flip-box-1-3">新鲜资源眼前过，</div></div><div>
<div class="flip-box-1-4">技术分享共切磋。</div></div>
<div><div class="flip-box-1-5"> 奇思妙想灵感落，</div></div>
<div><div class="flip-box-1-6">知识宝库用心掘。</div></div>
</div><div class="container-box-1-2">刘郎阁里收获多！</div>
</div></div>
<div class="clear"></div>
</aside></div>
</section>
</body>
</html>

18.七彩圆环

刘郎阁

<!DOCTYPE html>
<html>
  <head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>七彩圆环 刘郎阁</title>
  </head>
  <link rel="stylesheet" href="../common.css" />
  <style>
    :root {
      --border: 5px;
      --gap: 15px;
      --w: 200px;
    }
    section {
      width: var(--w);
      height: var(--w);
      position: relative;
    }
    .loader-item {
      --width: calc(var(--w) - var(--gap) * 2 * var(--i));
      width: var(--width);
      height: calc(var(--width) / 2);
      border: var(--border) solid var(--c);
      border-radius: 50% 50% 0 0/100% 100% 0 0;
      border-bottom: none;
      position: absolute;
      left: calc(50% - var(--width) / 2);
      top: calc(var(--gap) * var(--i));
      transform-origin: 50% 100%;
      animation: rotate 2s cubic-bezier(0.11, 0.85, 0.22, 1.3) infinite;
      animation-delay: calc(-60ms * var(--i));
      transition: all 0.5s;
    }
    section:hover .loader-item {
      filter: brightness(1.5);
      animation-play-state: paused;
    }
    @keyframes rotate {
      0%,
      25% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }
  </style>
  <body>
    <section>
      <div class="loader-item" style="--c: #e94545; --i: 0"></div>
      <div class="loader-item" style="--c: #eb8f34; --i: 1"></div>
      <div class="loader-item" style="--c: #eecf69; --i: 2"></div>
      <div class="loader-item" style="--c: #215221; --i: 3"></div>
      <div class="loader-item" style="--c: #87bb80; --i: 4"></div>
      <div class="loader-item" style="--c: #87ceeb; --i: 5"></div>
      <div class="loader-item" style="--c: #c393eb; --i: 6"></div>
    </section>
  </body>
</html>

19.科幻404

刘郎阁

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>科幻404-刘郎阁</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r125/three.min.js"></script>
  <script src="https://unpkg.co/gsap@3/dist/gsap.min.js"></script>
  <script src="https://assets.codepen.io/16327/MorphSVGPlugin3.min.js"></script>
  <script src="https://assets.codepen.io/16327/DrawSVGPlugin3.min.js"></script>
  <style>
    body {
      width: 100vw;
      height: 100vh;
      margin: 0;
      background: #34496a;
      overflow: hidden;
      display: flex;
      justify-content: center;
      align-items: center;
    }
#webgl {
  width: 800px;
  height: 600px;
  position: absolute;
  z-index: -1;
}
#webgl2 {
position: absolute;
top: 0;
left: 0;
outline: none;
z-index: 2;
}
#bg-box {
width: 802px;
height: 602px;
position: absolute;
z-index: -1;
}
.svg-box {
width: 800px;
height: 600px;
position: absolute;
z-index: 1;
}
.svg-box #robot {
cursor: pointer;
}

</style>
</head>
<body>
<div id="webgl"></div>
<div id="bg-box">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600">
<path fill="#34496a" d="M0 0v600h800V0zm405.6 458.4C217 458.4 64.1 360.6 64.1 240S217 21.5 405.6 21.5 747.3 119.3 747.3 240s-153 218.4-341.6 218.4z" />
</svg>
</div>
<div class="svg-box">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600">
<defs />
<defs>
<clipPath id="clip-path">
<rect id="graph-line-mask" width="105.2" height="66.7" x="439.5" y="186.6" fill="none" />
</clipPath>
<clipPath id="clip-path-2">
<path id="body-mask" fill="none" d="M490.4 368.3c0 63.7-38 140-84.7 140s-84.8-76.3-84.8-140 38-90.6 84.8-90.6 84.7 26.9 84.7 90.6z" />
</clipPath>
</defs>
<g id="Ship">
  &lt;g id=&quot;mid-display&quot;&gt;
    &lt;rect width=&quot;320.3&quot; height=&quot;207&quot; x=&quot;248.8&quot; y=&quot;116.3&quot; fill=&quot;#282e39&quot; stroke=&quot;#0ff&quot; stroke-miterlimit=&quot;10&quot; stroke-width=&quot;5&quot; opacity=&quot;.8&quot; rx=&quot;18.4&quot; /&gt;
    &lt;g id=&quot;graph-btm&quot;&gt;
      &lt;path id=&quot;graph-left&quot; fill=&quot;#0ff&quot; d=&quot;M439.7 292.1s4.5-19.4 8.7-19c3.6.3 4.6 9.2 7.3 9 3.4-.2 4-14 7.3-14.3 3-.2 4.7 10 8.3 10 4 0 5.1-12.6 8.8-12.8 4.1-.2 7.2 27.1 7.2 27.1z&quot; /&gt;
      &lt;path id=&quot;graph-morph1&quot; fill=&quot;none&quot; d=&quot;M439.7 292.1s2.2-10.8 6.5-10.4c3.5.3 8.3-18.9 11-19 3.4-.3 5.6 9 9 8.7 3-.3 3.5-3.2 7-3.2 4 0 5.9 10.6 9.5 10.4 4.2-.2 4.7 13.5 4.7 13.5z&quot; /&gt;
      &lt;path id=&quot;graph-right&quot; fill=&quot;#34496a&quot; d=&quot;M502.6 292.1s4.5-19.4 8.8-19c3.5.3 4.6 9.2 7.3 9 3.4-.2 3.9-14 7.3-14.3 3-.2 4.7 10 8.3 10 4 0 5-12.6 8.7-12.8 4.2-.2 7.3 27.1 7.3 27.1z&quot; /&gt;
      &lt;path id=&quot;graph-morph2&quot; fill=&quot;none&quot; d=&quot;M502.6 292.1s4.5-9.8 8.8-9.4c3.5.3 4.6-6.8 7.3-7 3.4-.2 3.9 6.6 7.3 6.4 3-.3 4.7-17.9 8.3-17.9 4 0 5 16.5 8.7 16.3 4.2-.2 7.3 11.6 7.3 11.6z&quot; /&gt;
    &lt;/g&gt;
    &lt;g id=&quot;planet&quot;&gt;
      &lt;circle id=&quot;planet-base&quot; cx=&quot;332.2&quot; cy=&quot;207.8&quot; r=&quot;37.3&quot; fill=&quot;#34496a&quot; /&gt;
      &lt;ellipse id=&quot;planet-circle&quot; cx=&quot;331.5&quot; cy=&quot;207.8&quot; fill=&quot;none&quot; stroke=&quot;#0ff&quot; stroke-miterlimit=&quot;10&quot; stroke-width=&quot;5&quot; rx=&quot;61.8&quot; ry=&quot;12.7&quot; /&gt;
      &lt;path id=&quot;planet-top&quot; fill=&quot;#34496a&quot; d=&quot;M294.9 207.8a37.3 37.3 0 0174.6 0z&quot; /&gt;
    &lt;/g&gt;
    &lt;g class=&quot;graph-circle-lb&quot; id=&quot;graph-cir-left&quot;&gt;
      &lt;circle cx=&quot;290.4&quot; cy=&quot;287.5&quot; r=&quot;20.8&quot; fill=&quot;#34496a&quot; /&gt;
      &lt;path fill=&quot;#0ff&quot; d=&quot;M290.4 287.5l5.3-20.1a20.8 20.8 0 0115.5 20z&quot; /&gt;
    &lt;/g&gt;
    &lt;g class=&quot;graph-circle-lb&quot; id=&quot;graph-cir-mid&quot;&gt;
      &lt;circle cx=&quot;345.4&quot; cy=&quot;287.5&quot; r=&quot;20.8&quot; fill=&quot;#34496a&quot; /&gt;
      &lt;path fill=&quot;#0ff&quot; d=&quot;M345.4 287.5l5.2-20.1a20.8 20.8 0 0115.5 20z&quot; /&gt;
    &lt;/g&gt;
    &lt;g id=&quot;graph-cir&quot;&gt;
      &lt;circle cx=&quot;396.4&quot; cy=&quot;292.1&quot; r=&quot;16.4&quot; fill=&quot;none&quot; stroke=&quot;#34496a&quot; stroke-miterlimit=&quot;10&quot; stroke-width=&quot;2&quot; /&gt;
      &lt;circle cx=&quot;396.4&quot; cy=&quot;292.1&quot; r=&quot;20.8&quot; fill=&quot;none&quot; stroke=&quot;#34496a&quot; stroke-miterlimit=&quot;10&quot; stroke-width=&quot;2&quot; /&gt;
      &lt;circle cx=&quot;396.4&quot; cy=&quot;292.1&quot; r=&quot;11.6&quot; fill=&quot;none&quot; stroke=&quot;#34496a&quot; stroke-miterlimit=&quot;10&quot; stroke-width=&quot;2&quot; /&gt;
      &lt;circle id=&quot;graph-cir-1&quot; cx=&quot;408&quot; cy=&quot;292.1&quot; r=&quot;2.3&quot; fill=&quot;#0ff&quot; /&gt;
      &lt;circle id=&quot;graph-cir-2&quot; cx=&quot;396.4&quot; cy=&quot;275.7&quot; r=&quot;2.3&quot; fill=&quot;#0ff&quot; /&gt;
      &lt;circle id=&quot;graph-cir-3&quot; cx=&quot;417.2&quot; cy=&quot;292.1&quot; r=&quot;2.3&quot; fill=&quot;#0ff&quot; /&gt;
      &lt;circle id=&quot;graph-cir-mid-2&quot; cx=&quot;396.4&quot; cy=&quot;292.1&quot; r=&quot;2.3&quot; fill=&quot;#0ff&quot; data-name=&quot;graph-cir-mid&quot; /&gt;
    &lt;/g&gt;
    &lt;g id=&quot;graph-big&quot; clip-path=&quot;url(#clip-path)&quot;&gt;
      &lt;path id=&quot;graph-line&quot; fill=&quot;none&quot; stroke=&quot;#0ff&quot; stroke-miterlimit=&quot;10&quot; stroke-width=&quot;5&quot; d=&quot;M439.7 206.4c26.3 0 26.3 34.2 52.6 34.2s26.3-34.2 52.6-34.2 26.3 34.2 52.6 34.2 26.3-34.2 52.6-34.2&quot; /&gt;
    &lt;/g&gt;
    &lt;circle cx=&quot;275.7&quot; cy=&quot;139.7&quot; r=&quot;11.8&quot; fill=&quot;#34496a&quot; /&gt;
    &lt;circle id=&quot;left-top-circle&quot; cx=&quot;275.7&quot; cy=&quot;139.7&quot; r=&quot;11.8&quot; fill=&quot;#0ff&quot; /&gt;
    &lt;line x1=&quot;300.8&quot; x2=&quot;387.1&quot; y1=&quot;134.3&quot; y2=&quot;134.9&quot; fill=&quot;none&quot; stroke=&quot;#34496a&quot; stroke-linecap=&quot;round&quot; stroke-miterlimit=&quot;10&quot; stroke-width=&quot;5&quot; /&gt;
    &lt;line x1=&quot;300.8&quot; x2=&quot;338.5&quot; y1=&quot;143.7&quot; y2=&quot;143.9&quot; fill=&quot;none&quot; stroke=&quot;#34496a&quot; stroke-linecap=&quot;round&quot; stroke-miterlimit=&quot;10&quot; stroke-width=&quot;5&quot; /&gt;
    &lt;circle cx=&quot;448.1&quot; cy=&quot;161.4&quot; r=&quot;13.3&quot; fill=&quot;none&quot; stroke=&quot;#34496a&quot; stroke-miterlimit=&quot;10&quot; stroke-width=&quot;5&quot; /&gt;
    &lt;path class=&quot;circles-top&quot; id=&quot;circle-l&quot; fill=&quot;none&quot; stroke=&quot;#0ff&quot; stroke-miterlimit=&quot;10&quot; stroke-width=&quot;5&quot; d=&quot;M448 148.2a13.3 13.3 0 11-13.2 13.3 13.3 13.3 0 0113.3-13.3&quot; /&gt;
    &lt;circle cx=&quot;491.2&quot; cy=&quot;161.4&quot; r=&quot;13.3&quot; fill=&quot;none&quot; stroke=&quot;#34496a&quot; stroke-miterlimit=&quot;10&quot; stroke-width=&quot;5&quot; /&gt;
    &lt;path class=&quot;circles-top&quot; id=&quot;circle-m&quot; fill=&quot;none&quot; stroke=&quot;#0ff&quot; stroke-miterlimit=&quot;10&quot; stroke-width=&quot;5&quot; d=&quot;M491.2 148.2a13.3 13.3 0 11-13.3 13.3 13.3 13.3 0 0113.3-13.3&quot; /&gt;
    &lt;circle cx=&quot;534.4&quot; cy=&quot;161.4&quot; r=&quot;13.3&quot; fill=&quot;none&quot; stroke=&quot;#34496a&quot; stroke-miterlimit=&quot;10&quot; stroke-width=&quot;5&quot; /&gt;
    &lt;path class=&quot;circles-top&quot; id=&quot;circle-r&quot; fill=&quot;none&quot; stroke=&quot;#0ff&quot; stroke-miterlimit=&quot;10&quot; stroke-width=&quot;5&quot; d=&quot;M534.4 148.2a13.3 13.3 0 11-13.3 13.3 13.3 13.3 0 0113.3-13.3&quot; /&gt;
  &lt;/g&gt;
  &lt;g id=&quot;btm-display&quot;&gt;
    &lt;g id=&quot;right-display&quot;&gt;
      &lt;g id=&quot;right-display-display&quot;&gt;
        &lt;path fill=&quot;#282e39&quot; stroke=&quot;#0ff&quot; stroke-miterlimit=&quot;10&quot; stroke-width=&quot;5&quot; d=&quot;M654.7 461H508.6c-10.5 0-15.8-8.5-12-19l26.2-72a29.9 29.9 0 0125.8-18.9h146c10.5 0 15.8 8.5 12 19l-26.2 72a29.9 29.9 0 01-25.7 18.8z&quot; opacity=&quot;.8&quot; /&gt;
        &lt;g id=&quot;bars&quot;&gt;
          &lt;polygon id=&quot;bar-3-btm&quot; fill=&quot;#34496a&quot; points=&quot;656.9 441.2 642.4 441.2 667.6 371.7 682.2 371.7 656.9 441.2&quot; /&gt;
          &lt;polygon id=&quot;bar-3-top&quot; fill=&quot;#0ff&quot; points=&quot;656.9 441.2 642.4 441.2 653 412 667.5 412 656.9 441.2&quot; /&gt;
          &lt;polygon id=&quot;bar-2-btm&quot; fill=&quot;#34496a&quot; points=&quot;633.7 441.2 619.2 441.2 644.5 371.7 659 371.7 633.7 441.2&quot; /&gt;
          &lt;polygon id=&quot;bar-2-top&quot; fill=&quot;#0ff&quot; points=&quot;633.7 441.2 619.2 441.2 636 395.1 650.5 395.1 633.7 441.2&quot; /&gt;
          &lt;polygon id=&quot;bar-1-btm&quot; fill=&quot;#34496a&quot; points=&quot;610.6 441.2 596.1 441.2 621.4 371.7 635.9 371.7 610.6 441.2&quot; /&gt;
          &lt;polygon id=&quot;bar-1-top&quot; fill=&quot;#0ff&quot; points=&quot;610.6 441.2 596.1 441.2 604 419.5 618.5 419.5 610.6 441.2&quot; /&gt;
        &lt;/g&gt;
        &lt;g id=&quot;btns&quot; fill=&quot;#0ff&quot;&gt;
          &lt;ellipse cx=&quot;546.8&quot; cy=&quot;379.3&quot; rx=&quot;6.5&quot; ry=&quot;4.6&quot; transform=&quot;rotate(-39.8 546.8 379.3)&quot; /&gt;
          &lt;ellipse cx=&quot;562.7&quot; cy=&quot;379.3&quot; rx=&quot;6.5&quot; ry=&quot;4.6&quot; transform=&quot;rotate(-39.8 562.7 379.3)&quot; /&gt;
          &lt;ellipse cx=&quot;578.6&quot; cy=&quot;379.3&quot; rx=&quot;6.5&quot; ry=&quot;4.6&quot; transform=&quot;rotate(-39.8 578.6 379.3)&quot; /&gt;
          &lt;ellipse cx=&quot;594.5&quot; cy=&quot;379.3&quot; rx=&quot;6.5&quot; ry=&quot;4.6&quot; transform=&quot;rotate(-39.8 594.5 379.3)&quot; /&gt;
          &lt;ellipse cx=&quot;540.6&quot; cy=&quot;396.3&quot; rx=&quot;6.5&quot; ry=&quot;4.6&quot; transform=&quot;rotate(-39.8 540.6 396.3)&quot; /&gt;
          &lt;ellipse cx=&quot;556.5&quot; cy=&quot;396.3&quot; rx=&quot;6.5&quot; ry=&quot;4.6&quot; transform=&quot;rotate(-39.8 556.5 396.3)&quot; /&gt;
          &lt;ellipse cx=&quot;572.4&quot; cy=&quot;396.3&quot; rx=&quot;6.5&quot; ry=&quot;4.6&quot; transform=&quot;rotate(-39.8 572.4 396.3)&quot; /&gt;
          &lt;ellipse cx=&quot;588.3&quot; cy=&quot;396.3&quot; rx=&quot;6.5&quot; ry=&quot;4.6&quot; transform=&quot;rotate(-39.8 588.4 396.3)&quot; /&gt;
          &lt;ellipse cx=&quot;534.4&quot; cy=&quot;413.3&quot; rx=&quot;6.5&quot; ry=&quot;4.6&quot; transform=&quot;rotate(-39.8 534.4 413.3)&quot; /&gt;
          &lt;ellipse cx=&quot;550.3&quot; cy=&quot;413.3&quot; rx=&quot;6.5&quot; ry=&quot;4.6&quot; transform=&quot;rotate(-39.8 550.3 413.3)&quot; /&gt;
          &lt;ellipse cx=&quot;566.2&quot; cy=&quot;413.3&quot; rx=&quot;6.5&quot; ry=&quot;4.6&quot; transform=&quot;rotate(-39.8 566.2 413.3)&quot; /&gt;
          &lt;ellipse cx=&quot;582.1&quot; cy=&quot;413.3&quot; rx=&quot;6.5&quot; ry=&quot;4.6&quot; transform=&quot;rotate(-39.8 582.2 413.3)&quot; /&gt;
          &lt;ellipse cx=&quot;528.2&quot; cy=&quot;430.3&quot; rx=&quot;6.5&quot; ry=&quot;4.6&quot; transform=&quot;rotate(-39.8 528.2 430.3)&quot; /&gt;
          &lt;ellipse cx=&quot;544.1&quot; cy=&quot;430.3&quot; rx=&quot;6.5&quot; ry=&quot;4.6&quot; transform=&quot;rotate(-39.8 544.1 430.3)&quot; /&gt;
          &lt;ellipse cx=&quot;560&quot; cy=&quot;430.3&quot; rx=&quot;6.5&quot; ry=&quot;4.6&quot; transform=&quot;rotate(-39.6 562.3 429.7)&quot; /&gt;
          &lt;ellipse cx=&quot;575.9&quot; cy=&quot;430.3&quot; rx=&quot;6.5&quot; ry=&quot;4.6&quot; transform=&quot;rotate(-39.8 576 430.3)&quot; /&gt;
        &lt;/g&gt;
      &lt;/g&gt;
      &lt;ellipse id=&quot;right-display-shadow&quot; cx=&quot;593.3&quot; cy=&quot;508.4&quot; fill=&quot;#1e3855&quot; rx=&quot;74&quot; ry=&quot;10.9&quot; /&gt;
    &lt;/g&gt;
    &lt;g id=&quot;left-display&quot;&gt;
      &lt;g id=&quot;left-display-display&quot;&gt;
        &lt;path fill=&quot;#282e39&quot; stroke=&quot;#0ff&quot; stroke-miterlimit=&quot;10&quot; stroke-width=&quot;5&quot; d=&quot;M299 461H153c-10.4 0-22-8.5-25.8-19L101 370c-3.8-10.4 1.6-18.9 12-18.9h146c10.5 0 22 8.5 25.9 18.9l26.2 72c3.8 10.4-1.6 19-12 19z&quot; opacity=&quot;.8&quot; /&gt;
        &lt;polygon fill=&quot;#0ff&quot; points=&quot;153.1 433.3 155.7 440.3 158.2 447.3 153.6 443.8 148.9 440.3 151 436.8 153.1 433.3&quot; /&gt;
        &lt;polygon fill=&quot;#0ff&quot; points=&quot;143 433.3 146.4 433.3 151.9 448.4 148.5 448.4 143 433.3&quot; /&gt;
        &lt;polygon fill=&quot;#0ff&quot; points=&quot;193.8 448.4 191.3 441.4 188.7 434.4 193.4 437.9 198 441.4 195.9 444.9 193.8 448.4&quot; /&gt;
        &lt;polygon fill=&quot;#0ff&quot; points=&quot;203.9 448.4 200.6 448.4 195.1 433.3 198.4 433.3 203.9 448.4&quot; /&gt;
        &lt;polygon fill=&quot;#0ff&quot; points=&quot;164.4 433.3 167.8 433.3 173.3 448.4 169.9 448.4 164.4 433.3&quot; /&gt;
        &lt;polygon fill=&quot;#0ff&quot; points=&quot;174 433.3 177.4 433.3 182.9 448.4 179.5 448.4 174 433.3&quot; /&gt;
        &lt;ellipse cx=&quot;199&quot; cy=&quot;377.7&quot; fill=&quot;#34496a&quot; rx=&quot;5.4&quot; ry=&quot;7.7&quot; transform=&quot;rotate(-50.2 199 377.7)&quot; /&gt;
        &lt;polygon fill=&quot;#0ff&quot; points=&quot;198.2 380.9 197 377.7 195.9 374.6 199.2 376.1 202.6 377.7 200.4 379.3 198.2 380.9&quot; /&gt;
        &lt;line x1=&quot;217.3&quot; x2=&quot;267.5&quot; y1=&quot;377.7&quot; y2=&quot;377.7&quot; fill=&quot;#282e39&quot; stroke=&quot;#0ff&quot; stroke-linecap=&quot;round&quot; stroke-miterlimit=&quot;10&quot; stroke-width=&quot;5&quot; opacity=&quot;.8&quot; /&gt;
        &lt;ellipse cx=&quot;206.2&quot; cy=&quot;397.6&quot; fill=&quot;#34496a&quot; rx=&quot;5.4&quot; ry=&quot;7.7&quot; transform=&quot;rotate(-50.2 206.2 397.6)&quot; /&gt;
        &lt;polygon fill=&quot;#0ff&quot; points=&quot;205.4 400.7 204.2 397.6 203.1 394.4 206.4 396 209.8 397.6 207.6 399.2 205.4 400.7&quot; /&gt;
        &lt;line x1=&quot;224.5&quot; x2=&quot;274.8&quot; y1=&quot;397.6&quot; y2=&quot;397.6&quot; fill=&quot;#282e39&quot; stroke=&quot;#0ff&quot; stroke-linecap=&quot;round&quot; stroke-miterlimit=&quot;10&quot; stroke-width=&quot;5&quot; opacity=&quot;.8&quot; /&gt;
        &lt;ellipse cx=&quot;213.5&quot; cy=&quot;417.5&quot; fill=&quot;#34496a&quot; rx=&quot;5.4&quot; ry=&quot;7.7&quot; transform=&quot;rotate(-50.2 213.4 417.4)&quot; /&gt;
        &lt;polygon fill=&quot;#0ff&quot; points=&quot;212.6 420.6 211.5 417.5 210.3 414.3 213.7 415.9 217 417.5 214.8 419 212.6 420.6&quot; /&gt;
        &lt;line x1=&quot;231.8&quot; x2=&quot;282&quot; y1=&quot;417.5&quot; y2=&quot;417.5&quot; fill=&quot;#282e39&quot; stroke=&quot;#0ff&quot; stroke-linecap=&quot;round&quot; stroke-miterlimit=&quot;10&quot; stroke-width=&quot;5&quot; opacity=&quot;.8&quot; /&gt;
        &lt;ellipse cx=&quot;220.7&quot; cy=&quot;437.3&quot; fill=&quot;#34496a&quot; rx=&quot;5.4&quot; ry=&quot;7.7&quot; transform=&quot;rotate(-50.2 220.7 437.3)&quot; /&gt;
        &lt;polygon fill=&quot;#0ff&quot; points=&quot;219.8 440.5 218.7 437.3 217.6 434.2 220.9 435.8 224.3 437.3 222.1 438.9 219.8 440.5&quot; /&gt;
        &lt;line x1=&quot;239&quot; x2=&quot;289.2&quot; y1=&quot;437.3&quot; y2=&quot;437.3&quot; fill=&quot;#282e39&quot; stroke=&quot;#0ff&quot; stroke-linecap=&quot;round&quot; stroke-miterlimit=&quot;10&quot; stroke-width=&quot;5&quot; opacity=&quot;.8&quot; /&gt;
        &lt;path fill=&quot;#34496a&quot; d=&quot;M190.5 424.4h-46a7.4 7.4 0 01-6.5-4.7l-15.8-43.5c-1-2.6.4-4.7 3-4.7h46a7.4 7.4 0 016.5 4.7l15.8 43.5c1 2.6-.4 4.7-3 4.7z&quot; /&gt;
        &lt;ellipse cx=&quot;157.8&quot; cy=&quot;398&quot; fill=&quot;#282e39&quot; rx=&quot;17.5&quot; ry=&quot;25.1&quot; transform=&quot;rotate(-50.2 157.8 398)&quot; /&gt;
        &lt;ellipse cx=&quot;157.8&quot; cy=&quot;398&quot; fill=&quot;#282e39&quot; rx=&quot;5.1&quot; ry=&quot;7.3&quot; transform=&quot;rotate(-50.2 157.8 398)&quot; /&gt;
        &lt;path fill=&quot;#0ff&quot; d=&quot;M159.8 405a10 10 0 01-8.8-6.4 5.8 5.8 0 01.5-5.4 5.3 5.3 0 014.4-2.2 10 10 0 018.8 6.4 5.8 5.8 0 01-.5 5.4 5.3 5.3 0 01-4.4 2.1zm-3.9-10.6a2 2 0 00-1.6.7 2.5 2.5 0 000 2.3 6.6 6.6 0 005.4 4 2 2 0 001.7-.6 2.5 2.5 0 000-2.3 6.6 6.6 0 00-5.5-4zM173.6 405h14.5l-5.1-14h-14.4a1.8 1.8 0 00-1.7 2.6l3.2 8.7a4.1 4.1 0 003.5 2.6z&quot; /&gt;
      &lt;/g&gt;
      &lt;ellipse id=&quot;left-display-shadow&quot; cx=&quot;224.5&quot; cy=&quot;511.5&quot; fill=&quot;#1e3855&quot; rx=&quot;74&quot; ry=&quot;10.9&quot; /&gt;
    &lt;/g&gt;
  &lt;/g&gt;
  &lt;g id=&quot;robot&quot;&gt;
    &lt;path id=&quot;body-base&quot; fill=&quot;#fff&quot; d=&quot;M490.4 368.3c0 63.7-38 140-84.7 140s-84.8-76.3-84.8-140 38-90.6 84.8-90.6 84.7 26.9 84.7 90.6z&quot; /&gt;
    &lt;g id=&quot;robot-body&quot;&gt;
      &lt;ellipse id=&quot;robot-shadow&quot; cx=&quot;405.6&quot; cy=&quot;543.9&quot; fill=&quot;#1e3855&quot; rx=&quot;44.5&quot; ry=&quot;7.1&quot; /&gt;
      &lt;g clip-path=&quot;url(#clip-path-2)&quot;&gt;
        &lt;g id=&quot;faces&quot;&gt;
          &lt;g id=&quot;face&quot;&gt;
            &lt;ellipse id=&quot;face-back&quot; cx=&quot;560&quot; cy=&quot;340.9&quot; fill=&quot;#34496a&quot; rx=&quot;61.5&quot; ry=&quot;32.2&quot; /&gt;
            &lt;g class=&quot;eyes&quot; id=&quot;eyes&quot; fill=&quot;#0ff&quot;&gt;
              &lt;ellipse cx=&quot;539.8&quot; cy=&quot;340.9&quot; rx=&quot;7.3&quot; ry=&quot;13.7&quot; /&gt;
              &lt;ellipse cx=&quot;579.1&quot; cy=&quot;340.9&quot; rx=&quot;7.3&quot; ry=&quot;13.7&quot; /&gt;
            &lt;/g&gt;
          &lt;/g&gt;
          &lt;g id=&quot;face-2&quot; data-name=&quot;face&quot;&gt;
            &lt;ellipse id=&quot;face-back-2&quot; cx=&quot;256.9&quot; cy=&quot;340.9&quot; fill=&quot;#34496a&quot; data-name=&quot;face-back&quot; rx=&quot;61.5&quot; ry=&quot;32.2&quot; /&gt;
            &lt;g class=&quot;eyes&quot; id=&quot;eyes-2&quot; fill=&quot;#0ff&quot; data-name=&quot;eyes&quot;&gt;
              &lt;ellipse cx=&quot;236.7&quot; cy=&quot;340.9&quot; rx=&quot;7.3&quot; ry=&quot;13.7&quot; /&gt;
              &lt;ellipse cx=&quot;275.9&quot; cy=&quot;340.9&quot; rx=&quot;7.3&quot; ry=&quot;13.7&quot; /&gt;
            &lt;/g&gt;
          &lt;/g&gt;
          &lt;g id=&quot;charge&quot;&gt;
            &lt;circle cx=&quot;406.8&quot; cy=&quot;340.9&quot; r=&quot;16.2&quot; fill=&quot;#34496a&quot; /&gt;
            &lt;rect width=&quot;4.1&quot; height=&quot;13.9&quot; x=&quot;398.7&quot; y=&quot;334&quot; fill=&quot;#fff&quot; /&gt;
            &lt;rect width=&quot;4.1&quot; height=&quot;13.9&quot; x=&quot;410.8&quot; y=&quot;334&quot; fill=&quot;#fff&quot; /&gt;
          &lt;/g&gt;
        &lt;/g&gt;
      &lt;/g&gt;
    &lt;/g&gt;
    &lt;path id=&quot;right-hand&quot; fill=&quot;#fff&quot; d=&quot;M549.7 400.7c0 15.6-31.2 28.2-56.2 28.2s-34.2-12.6-34.2-28.2 9.2-28 34.2-28 56.2 12.5 56.2 28z&quot; /&gt;
    &lt;path id=&quot;left-hand&quot; fill=&quot;#fff&quot; d=&quot;M255.6 400.7c0-15.5 31.2-28 56.2-28s34.2 12.5 34.2 28-9.3 28.2-34.2 28.2-56.2-12.6-56.2-28.2z&quot; /&gt;
  &lt;/g&gt;
  &lt;path id=&quot;note-1&quot; fill=&quot;none&quot; d=&quot;M180 317l-3.5-3.8a1 1 0 00-1.7.7v8.1a6 6 0 00-2-.3c-2.5 0-4.6 1.6-4.6 3.5s2 3.5 4.7 3.5 4.6-1.5 4.6-3.5a3 3 0 00-.7-1.9v-6.8l1.7 1.8a1 1 0 101.5-1.4z&quot; /&gt;
  &lt;path id=&quot;note-2&quot; fill=&quot;none&quot; d=&quot;M203.4 323.4v-9.5a1 1 0 00-1-1h-9.3a1 1 0 00-1 1v8.1a6 6 0 00-2-.3c-2.5 0-4.6 1.6-4.6 3.5s2 3.5 4.7 3.5 4.6-1.5 4.6-3.5a2.9 2.9 0 00-.7-1.9V315h7.3v7.1a5.8 5.8 0 00-1.9-.3c-2.6 0-4.7 1.6-4.7 3.5s2.1 3.5 4.7 3.5 4.7-1.5 4.7-3.5a2.9 2.9 0 00-.8-1.8z&quot; /&gt;
&lt;/g&gt;

</svg>
</div>
<canvas class="webgl2"></canvas>
</body>
<script>
/* svg 动画 */
function animation() {
let isLeft = false;
/**
 * 机器人
 */
gsap.set(&quot;#left-hand&quot;, {
  x: 30,
  transformOrigin: &quot;right center&quot;
});
gsap.set(&quot;#right-hand&quot;, {
  x: -30,
  transformOrigin: &quot;left center&quot;
});
const eyesTl = gsap
.timeline({
repeat: -1,
repeatDelay: 1
})
.to(&quot;.eyes&quot;, {
opacity: 0,
duration: 0.1
})
.to(&quot;.eyes&quot;, {
opacity: 1,
duration: 0.1
});
const robotTl = gsap
.timeline({
repeat: -1
})
.to(
&quot;#robot&quot;,
{
x: 100,
onStart: () =&gt; {
isLeft = false;
}
},
&quot;right&quot;
)
.to(
&quot;#faces&quot;,
{
x: -60
},
&quot;right&quot;
)
.to(
&quot;#left-hand&quot;,
{
x: 80
},
&quot;right&quot;
)
.to(
&quot;#charge&quot;,
{
scaleX: 0.8
},
&quot;right&quot;
)
.to(&quot;#right-hand&quot;, {
rotation: 20,
repeat: 2,
yoyo: true,
ease: &quot;power2.inOut&quot;,
duration: 0.4
})
.to(
&quot;#robot&quot;,
{
x: -100,
onStart: () =&gt; {
isLeft = true;
}
},
&quot;left&quot;
)
.to(
&quot;#faces&quot;,
{
x: 60
},
&quot;left&quot;
)
.to(
&quot;#charge&quot;,
{
scaleX: 0.8
},
&quot;left&quot;
)
.to(
&quot;#left-hand&quot;,
{
x: 30
},
&quot;left&quot;
)
.to(
&quot;#right-hand&quot;,
{
x: -80
},
&quot;left&quot;
)
.to(&quot;#left-hand&quot;, {
rotation: -20,
repeat: 3,
yoyo: true,
ease: &quot;power1.inOut&quot;,
duration: 0.4
})
.to(
&quot;#robot&quot;,
{
x: 0
},
&quot;center&quot;
)
.to(
&quot;#faces&quot;,
{
x: 0
},
&quot;center&quot;
)
.to(
&quot;#charge&quot;,
{
scaleX: 1
},
&quot;center&quot;
)
.to(&quot;#left-hand&quot;, {
y: -50,
x: -10,
rotation: 30
})
.to(&quot;#left-hand&quot;, {
rotation: 50,
repeat: 1,
yoyo: true,
ease: &quot;sine.inOut&quot;
})
.to(&quot;#left-hand&quot;, {
y: 0,
x: 30,
rotation: 0
});
robotTl.timeScale(0.8);
/**

显示屏
*/

//左上的圈圈
gsap.set(&quot;#left-top-circle&quot;, {
transformOrigin: &quot;center&quot;,
scale: 0
});
gsap.to(&quot;#left-top-circle&quot;, {
transformOrigin: &quot;center&quot;,
scale: 1,
fill: &quot;#34496a&quot;,
repeat: -1,
duration: 2
});
gsap.to(&quot;.graph-circle-lb&quot;, {
rotation: 360,
transformOrigin: &quot;center&quot;,
duration: 2,
stagger: {
amount: 1,
ease: &quot;sine.inOut&quot;,
repeat: -1
}
});
//行星
const planetTl = gsap
.timeline({
repeat: -1,
yoyo: true
})
.set(&quot;#planet-circle&quot;, {
rotation: 10,
transformOrigin: &quot;center&quot;
})
.to(&quot;#planet-circle&quot;, {
rotation: -10,
transformOrigin: &quot;center&quot;,
ease: &quot;power1.inOut&quot;
});
gsap.to(&quot;#graph-cir-1&quot;, {
rotation: 360,
ease: &quot;none&quot;,
transformOrigin: &quot;-9px center&quot;,
duration: 3,
repeat: -1
});
gsap.to(&quot;#graph-cir-2&quot;, {
rotation: 360,
ease: &quot;none&quot;,
transformOrigin: &quot;center 18px&quot;,
duration: 4,
repeat: -1
});
gsap.to(&quot;#graph-cir-3&quot;, {
rotation: 360,
ease: &quot;none&quot;,
transformOrigin: &quot;-19px center&quot;,
duration: 5,
repeat: -1
});
gsap.to(&quot;#graph-cir-mid-2&quot;, {
scale: 1.5,
ease: &quot;sine.inOut&quot;,
transformOrigin: &quot;center&quot;,
repeat: -1,
yoyo: true
});
//右下图
gsap.to(&quot;#graph-left&quot;, {
morphSVG: &quot;#graph-morph1&quot;,
repeat: -1,
yoyo: true,
ease: Elastic.easeOut.config(1, 0.8),
duration: 2
});
gsap.to(&quot;#graph-right&quot;, {
morphSVG: &quot;#graph-morph2&quot;,
repeat: -1,
yoyo: true,
ease: &quot;power3.inOut&quot;,
duration: 1
});
//由上图
gsap.to(&quot;.circles-top&quot;, {
rotation: 360,
duration: 10,
transformOrigin: &quot;center&quot;,
stagger: {
each: 0.5,
ease: &quot;none&quot;,
repeat: -1
}
});
gsap.to(&quot;#circle-l&quot;, {
drawSVG: &quot;20&quot;,
repeat: -1,
yoyo: true,
ease: Bounce.easeOut,
duration: 1
});
gsap.to(&quot;#circle-m&quot;, {
drawSVG: &quot;80 30&quot;,
repeat: -1,
yoyo: true,
ease: Bounce.easeOut,
duration: 1.5
});
gsap.to(&quot;#circle-r&quot;, {
drawSVG: &quot;0&quot;,
repeat: -1,
yoyo: true,
ease: SteppedEase.config(12),
duration: 3
});
/**

左边显示屏
*/
gsap.to(&quot;#left-display-display&quot;, {
y: 10,
ease: &quot;sine.inOut&quot;,
repeat: -1,
yoyo: true,
duration: 2
});
gsap.to(&quot;#left-display-shadow&quot;, {
scale: 1.1,
transformOrigin: &quot;center&quot;,
ease: &quot;sine.inOut&quot;,
repeat: -1,
yoyo: true,
duration: 2
});

const songTl = gsap
.timeline({
repeat: -1
})
.to(&quot;#left-display-display line&quot;, {
stroke: &quot;#34496a&quot;,
stagger: {
each: 0.5
}
})
.to(&quot;#left-display-display line&quot;, {
stroke: &quot;#0ff&quot;,
stagger: {
each: 0.5
}
});
for (let i = 0; i &lt; 3; i++) {
let clone1 = document.querySelector(&quot;#note-1&quot;).cloneNode(true);
let clone2 = document.querySelector(&quot;#note-2&quot;).cloneNode(true);
clone1.classList.add(&quot;notes&quot;);
clone2.classList.add(&quot;notes&quot;);
gsap.set(clone1, {
attr: {
d:
&quot;M180 317l-3.5-3.8a1 1 0 00-1.7.7v8.1a6 6 0 00-2-.3c-2.5 0-4.6 1.6-4.6 3.5s2 3.5 4.7 3.5 4.6-1.5 4.6-3.5a3 3 0 00-.7-1.9v-6.8l1.7 1.8a1 1 0 101.5-1.4z&quot;,
fill: &quot;#0ff&quot;
},
y: 40,
opacity: 0
});
gsap.set(clone2, {
attr: {
d:
&quot;M203.4 323.4v-9.5a1 1 0 00-1-1h-9.3a1 1 0 00-1 1v8.1a6 6 0 00-2-.3c-2.5 0-4.6 1.6-4.6 3.5s2 3.5 4.7 3.5 4.6-1.5 4.6-3.5a2.9 2.9 0 00-.7-1.9V315h7.3v7.1a5.8 5.8 0 00-1.9-.3c-2.6 0-4.7 1.6-4.7 3.5s2.1 3.5 4.7 3.5 4.7-1.5 4.7-3.5a2.9 2.9 0 00-.8-1.8z&quot;,
fill: &quot;#0ff&quot;
},
x: -10,
y: 40,
opacity: 0
});
document.querySelector(&quot;svg&quot;).appendChild(clone1);
document.querySelector(&quot;svg&quot;).appendChild(clone2);
}
gsap.to(&quot;.notes&quot;, {
y: gsap.utils.random(-50, -100, 10, true),
x: gsap.utils.random(-50, 50, 25, true),
opacity: 1,
duration: gsap.utils.random(1.5, 3, 1.5, true),
stagger: {
each: 0.5,
ease: &quot;sine.in&quot;,
repeat: -1
}
});
/**

右边显示屏
*/
gsap.to(&quot;#right-display-display&quot;, {
y: 10,
ease: &quot;sine.inOut&quot;,
repeat: -1,
yoyo: true,
duration: 2,
delay: 1.5
});
gsap.to(&quot;#right-display-shadow&quot;, {
scale: 1.1,
transformOrigin: &quot;center&quot;,
ease: &quot;sine.inOut&quot;,
repeat: -1,
yoyo: true,
duration: 2,
delay: 1.5
});

gsap.to(&quot;#graph-line&quot;, {
x: -105,
ease: &quot;none&quot;,
repeat: -1,
duration: 2
});
gsap.to(&quot;#bar-1-top&quot;, {
morphSVG: &quot;#bar-1-btm&quot;,
repeat: -1,
yoyo: true
});
gsap.to(&quot;#bar-2-top&quot;, {
morphSVG: &quot;#bar-2-btm&quot;,
repeat: -1,
yoyo: true,
duration: 1.5
});
gsap.to(&quot;#bar-3-top&quot;, {
morphSVG: &quot;#bar-3-btm&quot;,
repeat: -1,
yoyo: true,
duration: 2
});
gsap.to(&quot;#btns ellipse&quot;, {
fill: &quot;#34496a&quot;,
stagger: {
amount: 1,
grid: [4, 4],
repeat: -1,
yoyo: true,
from: &quot;random&quot;
}
});
const sizes = {
width: window.innerWidth,
height: window.innerHeight
};
let mouseX = 0;
let mouseY = 0;
window.addEventListener(&quot;mousemove&quot;, (e) =&gt; {
mouseX = (e.clientX / sizes.width) * 2 - 1;
mouseY = -(e.clientY / sizes.height) * 2 + 1;
gsap.to(&quot;#mid-display&quot;, {
x: -mouseX * 10,
y: mouseY * 10
});
gsap.to(&quot;#btm-display&quot;, {
x: -mouseX * 20,
y: mouseY * 10
});
});
document.getElementById(&quot;robot&quot;).addEventListener(&quot;click&quot;, () =&gt; {
robotTl.pause();
const helloTl = gsap
.timeline({
paused: true
})
.to(&quot;#faces&quot;, {
x: isLeft ? 150 : -150,
ease: &quot;sine.inOut&quot;,
repeatDelay: 1,
repeat: 1,
yoyo: true,
        onComplete: () =&amp;gt; {
          robotTl.resume();
        }
      });

helloTl.restart();
});

}
animation();
let scene, camera, renderer, stars, startGeometry;
const count = 5000;
function init() {
scene = new THREE.Scene();
startGeometry = new THREE.BufferGeometry();
const positions = new Float32Array(count * 3);
for (let i = 0; i &lt; count; i++) {
positions[i] = Math.random() * 600 - 300;
}
startGeometry.setAttribute(
&quot;position&quot;,
new THREE.BufferAttribute(positions, 3)
);
let sprite = new THREE.TextureLoader().load(
&quot;https://i.postimg.cc/T25jx3S9/circle-05.png&quot;
);
let starMaterial = new THREE.PointsMaterial({
size: 2,
sizeAttenuation: true,
transparent: true,
alphaMap: sprite
});
stars = new THREE.Points(startGeometry, starMaterial);
scene.add(stars);
camera = new THREE.PerspectiveCamera(
60,
window.innerWidth / window.innerHeight,
1,
1000
);
camera.position.z = 1;
camera.rotation.x = Math.PI / 2;
window.addEventListener(&quot;resize&quot;, () =&gt; {
camera.aspect = 800 / 600;
camera.updateProjectionMatrix();
renderer.setSize(800, 600);
});
renderer = new THREE.WebGLRenderer();
renderer.setSize(800, 600);
renderer.setClearColor(&quot;#282e39&quot;, 0.5);
document.getElementById(&quot;webgl&quot;).appendChild(renderer.domElement);
function animate() {
for (let i = 0; i &lt; count; i++) {
const i3 = i * 3;
startGeometry.attributes.position.array[i3 + 1] -= 3;

if (startGeometry.attributes.position.array[i3 + 1] &amp;lt; -100) {
  startGeometry.attributes.position.array[i3 + 1] = 300;
}

}
startGeometry.attributes.position.needsUpdate = true;
stars.rotation.y += 0.002;
renderer.render(scene, camera);
requestAnimationFrame(animate);
}
animate();

}
init();
function objects() {
const canvas = document.querySelector("canvas.webgl2");
const scene2 = new THREE.Scene();
const objects = [];
const objectGeometry = new THREE.IcosahedronGeometry(1, 0);
const objectMaterial = new THREE.MeshStandardMaterial({
color: 0x6699ff,
metalness: 0,
roughness: 0
});
for (let i = 0; i < 3; i++) {
const object = new THREE.Mesh(objectGeometry, objectMaterial);
object.scale.set(0.4, 0.4, 0.4);
scene2.add(object);
objects.push(object);
}
objects[0].position.set(3, 0.5, 0);
objects[1].position.set(-3.5, 2, 0);
objects[2].position.set(1, 3, 0);
objects.forEach((object) =&gt; {
  gsap
          .to(object.rotation, {
            x: Math.PI * 2,
            z: Math.PI * 2,
            repeat: -1,
            ease: &quot;none&quot;,
            duration: 8 + Math.random() * 5,
            delay: Math.random() * 50
          })
          .seek(100);
gsap
.to(object.position, {
y: 1.5,
z: -1,
repeat: -1,
yoyo: true,
ease: &quot;sine.inOut&quot;,
duration: 4 + Math.random() * 5
})
.seek(100);
});
const light = new THREE.AmbientLight(0xffffff, 1.0);
scene2.add(light);
const directionalLight = new THREE.DirectionalLight(0xff0000, 0.8);
directionalLight.position.set(5, 10, 0);
scene2.add(directionalLight);
const directionalLight2 = new THREE.DirectionalLight(0xff000, 0.7);
directionalLight2.position.set(-5, -5, 2);
scene2.add(directionalLight2);
const sizes = {
width: window.innerWidth,
height: window.innerHeight
};
window.addEventListener(&quot;resize&quot;, () =&gt; {
sizes.width = window.innerWidth;
sizes.height = window.innerHeight;
camera2.aspect = sizes.width / sizes.height;
camera2.updateProjectionMatrix();
renderer2.setSize(sizes.width, sizes.height);
renderer2.setPixelRatio(Math.min(window.devicePixelRatio, 2));
});
const camera2 = new THREE.PerspectiveCamera(
75,
sizes.width / sizes.height,
0.1,
100
);
camera2.position.z = 5;
scene2.add(camera2);
const renderer2 = new THREE.WebGLRenderer({
canvas: canvas,
alpha: true
});
renderer2.setSize(sizes.width, sizes.height);
renderer2.setPixelRatio(Math.min(window.devicePixelRatio, 2));
renderer2.setClearColor(0xffffff, 0);
const clock = new THREE.Clock();
let currentIntersect = null;
const tick = () =&gt; {
const elapsedTime = clock.getElapsedTime();
renderer2.render(scene2, camera2);
window.requestAnimationFrame(tick);
};
tick();

}
objects();
</script>
</html>

以上方法(部分)来自满心记、六月是只猫。

完！

51工具盒子

不错的CSS特效1

索引