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

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

接上次分享的不错的CSS特效1，今天再给大家分享一些不错的css特效！

索引

1.列表文字图标
2.动态圆点水波纹
3.呼吸灯效果
4.简约动态按钮
5.输入框选中交互动效
6.Loading动画
7.聚光灯效果
8.文字上下浮动效果
9.汉堡菜单按钮
10.抖动的按钮
11.简约动态输入框
12.搜索框动态特效
13.新拟态输入框
14.多彩动态按钮
15.创意菜单鼠标悬停效果
16.边框流动特效
17.限制显示两行，超出显示...
18.星空
19.圆弧转动
20.流星雨

1.列表文字图标

<!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">
        <ul>
          <li><span>欢迎来到刘郎阁！</span>欢迎来到刘郎阁！</li>
          <li><span>刘郎阁认真分享好东西！</span>刘郎阁认真分享好东西！</li>
          <li><span>好东西一定要第一时间分享！</span>好东西一定要第一时间分享！</li>
        </ul>
    </div>
<style>
*{
    margin: 0;
    padding: 0;
    list-style: none;
    transition: .5s;
}
html,body{
    background-color: #f5f5f5;
    color: #fff;
    font-size: 14px;
}
.app{
    width: 100%;
    height: 100vh;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}
.app ul {
  max-width: 300px;
}
.app ul li{
  width: 100%;
  color: #152239;
  font-size: 16px;
  line-height: 42px;
  margin: 15px 0;
  float: left;
}
.app ul li span{
  width: 42px;
  height: 42px;
  line-height: 40px;
  color: #1E47ED;
  font-size: 18px;
  font-weight: 700;
  text-indent: 12px;
  border-radius: 50%;
  display: block;
  float: left;
  overflow: hidden;
  background-color: #eaeaea;
  letter-spacing: 20px;
  margin-right: 15px;
}
</style>
</body>
</html>

2.动态圆点水波纹

1..gif

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css?k3f22ww">
  <title>圆点水波纹效果_刘郎阁</title>
</head>
<body>
  <div class="app">
    <label class="dot"></label>
  </div>
<style>
{
margin: 0;
padding: 0;
list-style: none;
transition: .5s;
}
html,body{
background-color: #f5f5f5;
color: #fff;
font-size: 14px;
}
.app{
width: 100%;
height: 100vh;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.dot {
width: 48px;
height: 48px;
display: block;
position: relative;
border-radius: 50%;
background-color: blue;
z-index: 1;
}
.dot::after {
width: 100%;
height: 100%;
content: "";
border-radius: 50%;
position: absolute;
top: 0;
left: 0;
z-index: -2;
background-color: blue;
animation: dot-play 4s linear 400ms infinite;
}
.dot::before {
width: 100%;
height: 100%;
content: "";
border-radius: 50%;
position: absolute;
top: 0;
left: 0;
z-index: -1;
background-color: blue;
animation: dot-play 4s linear 200ms infinite;
animation-delay: 2s; / 延迟 2s */
}
@keyframes dot-play{
from{
transform: scale(1);
opacity: .2;
}
to{
transform: scale(4);
opacity: 0;
}
}
</style>
</body>
</html>

3.呼吸灯效果

2..gif

<!DOCTYPE html>
<html lang="en">
<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">
    <span class="red"></span>
    <span class="green"></span>
    <span class="blue"></span>
  </div>
<style>
*{
margin:0;
padding: 0;
}
body,html{
background-color: #000;
}
.app{
width:100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
span{
width: 60px;
height: 60px;
margin: 40px;
border-radius: 50%;
}
.red{
animation: just1 2s ease-in-out infinite alternate;
}
.green{
animation: just2 3s ease-in-out infinite alternate;
}
.blue{
animation: just3 4s ease-in-out infinite alternate;
}
@keyframes just1{
0%{
border: 5px solid rgba(255,0,0,0);
box-shadow: 0 0 0 rgba(255,0,0,0),0 0 0 rgba(255,0,0,0) inset;
}
100%{
border: 5px solid rgba(255,0,0,1);
box-shadow: 0 0 70px rgba(255,0,0,0.7),0 0 15px rgba(255,0,0,0.5) inset;
}
}
@keyframes just2{
0%{
border: 5px solid rgba(0,255,0,0);
box-shadow: 0 0 0 rgba(0,255,0,0),0 0 0 rgba(0,255,0,0) inset;
}
100%{
border: 5px solid rgba(0,255,0,1);
box-shadow: 0 0 70px rgba(0,255,0,0.7),0 0 15px rgba(0,255,0,0.5) inset;
}
}
@keyframes just3{
0%{
border: 5px solid rgba(0,0,255,0);
box-shadow: 0 0 0 rgba(0,0,255,0),0 0 0 rgba(0,0,255,0) inset;
}
100%{
border: 5px solid rgba(0,0,255,1);
box-shadow: 0 0 70px rgba(0,0,255,0.7),0 0 15px rgba(0,0,255,0.5) inset;
}
}
</style>
</body>
</html>

4.简约动态按钮

3..gif

<!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>刘郎阁</button>
    </div>
<style>
.app{
width: 100%;
height: 100vh;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
button{
width: 140px;
height: 46px;
font-size: 16px;
font-family: Arial, Helvetica, sans-serif;
font-weight: 700;
color: #333;
background-color: transparent;
border: none;
position: relative;
box-sizing: border-box;
transition: all 0.4s ease-in-out;
}
button:before{
content: '';
width: 4px;
height: inherit;
position: absolute;
top: 0;
left: 0;
z-index: -5;
background-color: #333;
transition: all 0.4s ease-in-out;
}
button:hover{
cursor: pointer;
color: #fff;
}
button:hover:before{
width: 100%;
border-radius: 6px;
}
</style>
</body>
</html>

5.输入框选中交互动效

4..gif

<!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>
        <input type="text" required>
        <span>用户名</span>
      </label>
    </div>
<style>
.app{
width: 100%;
height: 100vh;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
input{
list-style: none;
outline-style: none;
}
label{
width: 240px;
position: relative;
display: flex;
align-items: center;
}
input{
width: 240px;
height: 32px;
line-height: 32px;
padding: 0 10px;
border: 2px solid transparent;
border-bottom-color: #333;
background-color: transparent;
box-sizing: border-box;
transition: all 0.3s;
font-size: 14px;
color: #333;
}
span{
position: absolute;
font-size: 14px;
color: #999;
left: 10px;
cursor: text;
z-index: 1;
transition: all 0.3s;
}
label:hover input,input:focus{
border-color: blue;
border-radius: 8px;
}
input:focus+span,input:valid+span{
transform: translateY(-32px);
}
</style>
</body>
</html>

6.Loading动画

5..gif

<!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>Loading效果_刘郎阁</title>
  </head>
  <body>
    <div class="app">
      <div class="loading"></div>
    </div>
<style>
.app{
    width: 100%;
    height: 100vh;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}
.loading {
width: 50px;
height: 50px;
border: 4px solid rgba(0, 0, 0, 0.2);
border-top-color: #000000;
border-radius: 50%;
animation: loading 1s linear infinite;
}
@keyframes loading {
to {
transform: rotate(360deg);
}
}
</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">
      <div class="spotlight18" data-cont="刘郎阁 YJVC.CN">刘郎阁 YJVC.CN</div>
    </div>
<style>
.app{
width: 100%;
height: 100vh;
background-color: #ffffff;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.spotlight18{
color: #eaeaea;
font-size: 40px;
font-weight: 900;
text-transform: uppercase;
position: relative;
}
.spotlight18:before{
width: inherit;
height: inherit;
content: attr(data-cont);
color: transparent;
background-image: linear-gradient(90deg, #4158D0 0%, #C850C0 30%, #FFCC70 66%, #56e28d 100%);
-webkit-background-clip: text;
position: absolute;
top: 0;
left: 0;
animation: spotlight18 8s linear infinite;
}
@keyframes spotlight18{
0%{
clip-path: ellipse(32px 32px at 0 50%);
}
50%{
clip-path: ellipse(32px 32px at 100% 50%);
}
100%{
clip-path: ellipse(32px 32px at 0 50%);
}
}
</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="loading17">
        <span class="load-span17">刘</span>
        <span class="load-span17">郎</span>
        <span class="load-span17">阁</span>
        <span class="load-span17">欢</span>
        <span class="load-span17">迎</span>
        <span class="load-span17">您</span>
      </div>
    </div>
<style>
.app{
width: 100%;
height: 100vh;
background-color: #ffffff;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.loading17{
height: 48px;
font-size: 32px;
font-weight: 700;
letter-spacing: 24px;
color: black;
display: flex;
justify-content: center;
align-items: center;
}
.loading17 .load-span17{
animation: text-load17 2.8s linear infinite;
}
.loading17 .load-span17:nth-of-type(1){
color: #3185fa;
animation-delay: 0.4s;
}
.loading17 .load-span17:nth-of-type(2){
color: #fc3621;
animation-delay: 0.8s;
}
.loading17 .load-span17:nth-of-type(3){
color: #fcbb02;
animation-delay: 0.12s;
}
.loading17 .load-span17:nth-of-type(4){
color: #3285ff;
animation-delay: 1.6s;
}
.loading17 .load-span17:nth-of-type(5){
color: #2ab148;
animation-delay: 2.0s;
}
.loading17 .load-span17:nth-of-type(6){
color: #fb3320;
animation-delay: 2.4s;
}
@keyframes text-load17{
0%{
transform: translateY(0);
}
50% {
transform: translateY(-20px);
}
100%{
transform: translateY(0);
}
}
</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">
      <label class="label16">
        <input class="inp16" type="checkbox">
        <span class="line16"></span>
        <span class="line16"></span>
        <span class="line16"></span>
      </label>
    </div>
<style>
.app{
width: 100%;
height: 100vh;
background-color: #ffffff;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.label16{
width: 48px;
height: 36px;
display: block;
position: relative;
cursor: pointer;
}
.inp16{
display: none;
}
.line16{
width: inherit;
height: 4px;
border-radius: 2px;
display: block;
background-color: #3d3d3d;
position: absolute;
top: 0;
transition: all 0.24s ease-in-out;
}
.line16:nth-of-type(2){
top: 16px;
}
.line16:nth-of-type(3){
top: 32px;
}
.inp16:checked ~ .line16:nth-of-type(1){
transform: rotate(45deg);
top: 16px;
}
.inp16:checked ~ .line16:nth-of-type(2){
width: 0;
}
.inp16:checked ~ .line16:nth-of-type(3){
transform: rotate(-45deg);
top: 16px;
}
</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">
      <button class="btn15">动起来</button>
    </div>
<style>
.app{
width: 100%;
height: 100vh;
background-color: #ffffff;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.btn15{
width: 140px;
height: 48px;
line-height: 48px;
background-color: #eee;
border: none;
border-radius: 24px;
font-size: 16px;
color: #333333;
text-align: center;
transition: all 0.24s linear;
}
.btn15:hover{
cursor: pointer;
color: #fff;
background-color: #253ed2;
animation: yizhidong 0.24s linear infinite;
}
@keyframes yizhidong{
0%{
transform: translate(0);
}
20%{
transform: translate(-3px, 3px);
}
40%{
transform: translate(-2px, -3px);
}
60%{
transform: translate(3px, 2px);
}
80%{
transform: translate(2px, -3px);
}
100%{
transform: translate(0);
}
}
</style>
</body>
</html>

11.简约动态输入框

9..gif

<!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>
        <input type="text" placeholder="在此输入文字" required>
        <span class="line"></span>
      </label>
    </div>
<style>
.app{
  width: 100%;
  height: 100vh;
  background-color: #ffffff;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
label{
  position: relative;
}
input{
  width: 140px;
  height: 36px;
  line-height: 36px;
  outline-style: none;
  font-size: 16px;
  color: #333;
  border: none;
  padding: 0 8px;
  box-sizing: border-box;
}
.line{
  width: 0;
  height: 2px;
  display: block;
  background-color: #4158D0;
  background-image: linear-gradient(90deg, #4158D0 0%, #C850C0 48%, #FFCC70 100%);
  transition: all 0.24s ease-in-out;
}
input:focus+.line,input:valid+.line{
  width: 100%;
}
</style>
  </body>
</html>

12.搜索框动态特效

8..gif

<!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>
        <input type="text" required>
        <span class="line"></span>
      </label>
    </div>
<style>
.app{
width: 100%;
height: 100vh;
background-color: #ffffff;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
label{
position: relative;
}
input{
width: 38px;
height: 38px;
line-height: 38px;
outline-style: none;
font-size: 16px;
color: #333;
border: 3px solid #a8a8a8;
border-radius: 19px;
padding: 0 16px;
box-sizing: border-box;
transition: all 1s ease-in-out;
}
.line{
width: 3px;
height: 14px;
display: block;
background-color: #a8a8a8;
transform: rotate(320deg);
position: absolute;
left: 30px;
top: 32px;
z-index: 10;
opacity: 1;
transition: all 1s ease-in-out;
}
input:focus,input:valid{
width: 180px;
}
input:focus+.line,input:valid+.line{
width: 1px;
height: 16px;
left: 19px;
top: 10px;
opacity: 0;
transform: rotate(360deg);
}
</style>
</body>
</html>

13.新拟态输入框

7..gif

<!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">
      <input type="text" placeholder="用户名/邮箱">
    </div>
<style>
.app{
width: 100%;
height: 100vh;
background-color: #e0e0e0;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
input {
width: 180px;
height: 56px;
border: none;
outline-style: none;
font-size: 16px;
color: #333333;
padding: 0 28px;
border-radius: 28px;
background: #e0e0e0;
box-shadow: 6px 6px 12px #b8b8b8, -6px -6px 12px #ffffff, inset 0 0 0 #b8b8b8, inset 0 0 0 #ffffff;
transition: all .24s ease-in-out;
}
input:focus{
box-shadow: 0 0 0 #b8b8b8, 0 0 0 #ffffff, inset 6px 6px 12px #b8b8b8, inset -6px -6px 12px #ffffff;
}
input::placeholder {
color: rgba(0, 0, 0, 0.4);
font-size: 16px;
font-weight: 700;
transition: all .24s ease-in-out;
}
input:focus::placeholder {
color: rgba(0, 0, 0, 0.8);
}
</style>
</body>
</html>

14.多彩动态按钮

6..gif

<!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>戳一下</button>
    </div>
<style>
.app{
width: 100%;
height: 100vh;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
button{
width: 140px;
height: 46px;
font-size: 16px;
font-weight: 700;
color: black;
border: 2px solid #ffffff;
border-radius: 10px;
background-color: #4158D0;
background-image: linear-gradient(90deg, #4158D0 0%, #C850C0 17%, #e6a731 39%, #8329e2 60%, #3fb75f 80%, #4158D0 100%);
box-shadow: 0 0 0 2px #000000;
cursor: pointer;
transition: all 0.5s ease;
}
button:hover{
color: #ffffff;
animation: quick 0.5s linear infinite;
}
@keyframes quick{
to {
background-position: 140px;
}
}
button:active{
transform: translateY(1px);
}
</style>
</body>
</html>

15.创意菜单鼠标悬停效果

HTML代码：

<body>
    <ul>
        <li style="--clr:#00ade1"><a href="" data-text="&nbsp;Home">&nbsp;Home&nbsp;</a></li>
        <li style="--clr:#ff6493"><a href="" data-text="&nbsp;About">&nbsp;About&nbsp;</a></li>
        <li style="--clr:#ffdd1c"><a href="" data-text="&nbsp;Services">&nbsp;Services&nbsp;</a></li>
        <li style="--clr:#00dc82"><a href="" data-text="&nbsp;Teams">&nbsp;Teams&nbsp;</a></li>
        <li style="--clr:#dc00d4"><a href="" data-text="&nbsp;Contact">&nbsp;Contact&nbsp;</a></li>
    </ul>
</body>

CSS代码：

*,a{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Helvetica, sans-serif;
    text-decoration: none;
}
body{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #252839;
}
ul,li{
    margin: 0;
    list-style: none;
}
ul{
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 30px;
}
ul li a{
font-size: 4em;
position: relative;
letter-spacing: 2px;
text-transform: uppercase;
color: transparent;
-webkit-text-stroke: 1px rgba(255,255,255,0.5);
}
ul li a::before{
content: attr(data-text);
position: absolute;
color: var(--clr);
overflow: hidden;
width: 0%;
transition: all ease-in-out .3s;
border-right: 8px solid var(--clr);
-webkit-text-stroke: 1px var(--clr);
}
ul li a:hover::before{
width: 100%;
filter: drop-shadow(0px 0px 15px var(--clr));
}

16.边框流动特效

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
</head>
<body>
    <body>
    <div class="box">
        <h2>刘郎</h2>
    </div>
<style>
    html{
        height: 100%;
    }
    body{
        height: 100%;
        margin: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #444;
    }
    .box{
        box-shadow: 0 0 180px #666;
        position: relative;
        width: 180px;
        height: 180px;
        background-color: rgba(0,0,0,0.8);
        border-radius: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }
    .box h2{
        margin: 0;
        color: #fff;
        font-size: 4em;
        font-family: Helvetica, sans-serif;
        text-shadow: 2px 2px paleturquoise;
        z-index: 1;
    }
    .box::before{
        position: absolute;
        width: 100px;
        height: 200%;
        content: &quot;&quot;;
        background: linear-gradient(#00ccff,#d500f9);
        animation: rotate 5s linear infinite;
        

    }
    .box::after{
        content: &quot;&quot;;
        position: absolute;
        background: #0e1538;
        inset: 2px;
        border-radius: 20px;
    }
    @keyframes rotate {
        from{
            transform: rotate(0deg);
        }
        to{
            transform: rotate(360deg);
        }
    }

</style>
</body>
</body>
</html>

17.限制显示两行，超出显示...

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2; 
overflow: hidden;

18.星空

刘郎阁

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>星空 刘郎阁</title>
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <style>
        body{
            margin: 0;
        }
    </style>
</head>
<body>
</body>
<script>
let camera
let scene
let renderer
let material
let mouseX = 0
let mouseY = 0
let windowHalfX = window.innerWidth / 2
let windowHalfY = window.innerHeight / 2

init()
animate()

function init () {
    camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 5, 2000)
    camera.position.z = 500

    scene = new THREE.Scene()
    scene.fog = new THREE.FogExp2(0x0000ff, 0.001)

    const geometry = new THREE.BufferGeometry()
    const vertices = []
    const size = 2000

    for ( let i = 0; i &lt; 20000; i ++ ) {
        const x = (Math.random() * size + Math.random() * size) / 2 - size / 2
        const y = (Math.random() * size + Math.random() * size) / 2 - size / 2
        const z = (Math.random() * size + Math.random() * size) / 2 - size / 2

        vertices.push(x, y, z)
    }

    geometry.setAttribute('position', new THREE.Float32BufferAttribute(vertices, 3))

    material = new THREE.PointsMaterial({
        size: 2,
        color: 0xffffff,
    })

    const particles = new THREE.Points(geometry, material)
    scene.add(particles)

    renderer = new THREE.WebGLRenderer()
    renderer.setPixelRatio(window.devicePixelRatio)
    renderer.setSize(window.innerWidth, window.innerHeight)
    document.body.appendChild(renderer.domElement)

    document.body.style.touchAction = 'none'
    document.body.addEventListener('pointermove', onPointerMove)
    window.addEventListener('resize', onWindowResize)
}

function onWindowResize () {
    windowHalfX = window.innerWidth / 2
    windowHalfY = window.innerHeight / 2

    camera.aspect = window.innerWidth / window.innerHeight
    camera.updateProjectionMatrix()
    renderer.setSize(window.innerWidth, window.innerHeight)
}

function onPointerMove (event) {
    mouseX = event.clientX - windowHalfX
    mouseY = event.clientY - windowHalfY
}

function animate () {
    requestAnimationFrame(animate)
    render()
}

function render () {
    camera.position.x += (mouseX * 2 - camera.position.x) * 0.02
    camera.position.y += (-mouseY * 2 - camera.position.y) * 0.02
    camera.lookAt(scene.position)
    renderer.render(scene, camera)
    scene.rotation.x += 0.001
    scene.rotation.y += 0.002
}

</script>
</html>

19.圆弧转动

刘郎阁

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>圆弧转动 刘郎阁</title>
</head>
<link rel="stylesheet" href="../common.css">
<style>
    :root {
        --color: orange;
        --lineColor: rgba(102, 163, 224, .2);
    }
    body {
        background: #222;
        overflow: hidden;
    }
    section {
        position: relative;
        width: 200px;
        height: 200px;
    }
    section::before {
        content: '';
        position: absolute;
        height: 10px;
        width: 10px;
        border-radius: 100%;
        border-top: 1px solid orange;
        top: 50%;
        left: 50%;
        margin-top: -5px;
        margin-left: -5px;
        animation: turn 1s infinite linear;
        filter:
            drop-shadow(0 0 2px var(--color)) drop-shadow(0 0 5px var(--color)) drop-shadow(0 0 10px var(--color)) drop-shadow(0 0 20px var(--color));
    }
    .box,
    .box::after,
    .box::before {
        border: 2px solid var(--lineColor);
        border-left: 2px solid var(--color);
        border-right: 2px solid var(--color);
        border-radius: 50%;
    }
    .box::after,
    .box::before {
        position: absolute;
        content: '';
        left: 50%;
        top: 50%;
    }
    .box {
        width: 200px;
        height: 200px;
        position: relative;
        animation: turn 1s linear infinite;
        transform-origin: 50% 50%;
    }
    .box::before {
        width: 180px;
        height: 180px;
        margin-top: -90px;
        margin-left: -90px;
        animation: turn2 1.25s linear infinite;
    }
    .box::after {
        width: 160px;
        height: 160px;
        margin-top: -80px;
        margin-left: -80px;
        animation: turn 1.5s linear infinite;
    }
    .box-circle,
    .box-circle1,
    .box-circle2 {
        border: 2px solid var(--color);
        opacity: .9;
        border-radius: 50%;
        position: absolute;
        left: 50%;
        top: 50%;
        transform-origin: 50% 50%;
        transform: translate(-50%, -50%);
        width: 100px;
        height: 100px;
        animation: rotate 3s linear infinite;
    }
    .box-circle {
        animation-delay: 0.2s;
    }
    .box-circle1 {
        animation-delay: 1.2s;
    }
    .box-circle2 {
        animation-delay: 2.2s;
    }
    @keyframes turn {
        100% {
            transform: rotateZ(-1turn);
        }
    }
    @keyframes turn2 {
        100% {
            transform: rotateZ(1turn);
        }
    }
    @keyframes rotate {
        100% {
            border: none;
            border-top: 2px solid var(--color);
            border-bottom: 2px solid var(--color);
            transform: translate(-50%, -50%) rotate3d(.5, 0.5, 0.5, -720deg);
        }
    }
</style>
<body>
    <section>
        <div class="box"></div>
        <div class="box-circle"></div>
        <div class="box-circle1"></div>
        <div class="box-circle2"></div>
    </section>
</body>
</html>

20.流星雨

刘郎阁

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>漫天流星雨 刘郎阁</title>
        <link rel="stylesheet" type="text/css" href="index.css"/>
    </head>
    <body>
    &lt;div class=&quot;container&quot;&gt;
        &lt;div class=&quot;line&quot; style=&quot;--color:#ec3e27;--x:3;--z:3;--d:1;&quot;&gt;&lt;/div&gt;
        &lt;div class=&quot;line&quot; style=&quot;--color:#fff;--x:3;--z:2;--d:2;&quot;&gt;&lt;/div&gt;
        &lt;div class=&quot;line&quot; style=&quot;--color:#fff;--x:4;--z:1;--d:3;&quot;&gt;&lt;/div&gt;
        &lt;div class=&quot;line&quot; style=&quot;--color:#fd79a8;--x:4;--z:0;--d:1;&quot;&gt;&lt;/div&gt;
        &lt;div class=&quot;line&quot; style=&quot;--color:#fff;--x:6;--z:-1;--d:2;&quot;&gt;&lt;/div&gt;
        &lt;div class=&quot;line&quot; style=&quot;--color:#0984e3;--x:6;--z:-2;--d:3;&quot;&gt;&lt;/div&gt;
        &lt;div class=&quot;line&quot; style=&quot;--color:#fff;--x:8;--z:-3;--d:1;&quot;&gt;&lt;/div&gt;
        &lt;div class=&quot;line&quot; style=&quot;--color:#fff;--x:10;--z:-4;--d:2;&quot;&gt;&lt;/div&gt;
        &lt;div class=&quot;line&quot; style=&quot;--color:#fff;--x:12;--z:-5;--d:3;&quot;&gt;&lt;/div&gt;
        &lt;div class=&quot;line&quot; style=&quot;--color:#fff;--x:14;--z:-6;--d:1;&quot;&gt;&lt;/div&gt;
        &lt;div class=&quot;line&quot; style=&quot;--color:#fff;--x:16;--z:-7;--d:2;&quot;&gt;&lt;/div&gt;
        &lt;div class=&quot;line&quot; style=&quot;--color:#fff;--x:18;--z:-8;--d:3;&quot;&gt;&lt;/div&gt;
        &lt;div class=&quot;line&quot; style=&quot;--color:#e056fd;--x:20;--z:-9;--d:1;&quot;&gt;&lt;/div&gt;

        
    &lt;/div&gt;

<style>
:root {
--background-color: #2c3e50;
--border-color: #7591AD;
--text-color: #34495e;
--color1: #ec3e27;
--color2: #fd79a8;
--color3: #0984e3;
--color4: #00b894;
--color5: #fdcb6e;
--color6: #e056fd;
--color7: #F97F51;
--color8: #BDC581;
}

{
margin: 0;
padding: 0;
}

html {
font-size: 14px;
}
body {
width: 100vw;
height: 100vh;
background-color: var(--background-color);
display: flex;
justify-content: center;
align-items: center;
/* font-family: 'Times New Roman', Times, serif; */
}
.channel {
position: absolute;
width: 80%;
text-align: center;
top: 50%;
left: 50%;
transform: translate(-50%, -200px);
font-size: 30px;
font-weight: bold;
color: #fff;
z-index: 999;
}
.container {
position: relative;
width: 100vw;
height: 100vh;
background-color: #000;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
perspective: 800px;
/* perspective-origin: left bottom; */
transform-style: preserve-3d;
}
.line {
position: absolute;
width: 200px;
height: 3px;
border-radius: 3px;
/* background-color: #fff; */
background-image: linear-gradient(to right, var(--color), #ffffff50, transparent);
animation: down 1s linear infinite both;
animation-delay: calc(var(--d) * 0.3s);
}
.line::before,
.line::after {
position: absolute;
content: "";
width: inherit;
height: inherit;
background-image: inherit;
}
.line::before {
filter: blur(5px);
}
.line::after {
filter: blur(10px);
}
@keyframes down {
0% {
transform: translateY(calc(var(--z) * 60px))
translateZ(calc(var(--z) * 100px))
rotate(-45deg)
translateX(calc(var(--x) * 100px));
}
100% {
transform: translateY(calc(var(--z) * 60px))
translateZ(calc(var(--z) * 100px))
rotate(-45deg)
translateX(calc(var(--x) * -100px));
}

}
</style>
</body>
</html>

以上方法（部分）来自满心记，总而言之，当我发现有什么好的资源，肯定会第一时间与大家一起分享。如果喜欢或者是对你有用的，那就拿去食用吧！

完！

51工具盒子

不错的CSS特效2

索引