不错的CSS特效2

源码分享 · 05-10 16:10

喜欢看网页上那些酷炫的效果吗？这就是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.列表文字图标

IMG_5616.jpeg

<!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.聚光灯效果

13.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">
      <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.文字上下浮动效果

12.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">
      <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.汉堡菜单按钮

11.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 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.抖动的按钮

10.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 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.创意菜单鼠标悬停效果

IMG_5662.gif

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.边框流动特效

IMG_5667.gif

<!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: "";
            background: linear-gradient(#00ccff,#d500f9);
            animation: rotate 5s linear infinite;
            

        }
        .box::after{
            content: "";
            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 < 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>
        
        <div class="container">
            <div class="line" style="--color:#ec3e27;--x:3;--z:3;--d:1;"></div>
            <div class="line" style="--color:#fff;--x:3;--z:2;--d:2;"></div>
            <div class="line" style="--color:#fff;--x:4;--z:1;--d:3;"></div>
            <div class="line" style="--color:#fd79a8;--x:4;--z:0;--d:1;"></div>
            <div class="line" style="--color:#fff;--x:6;--z:-1;--d:2;"></div>
            <div class="line" style="--color:#0984e3;--x:6;--z:-2;--d:3;"></div>
            <div class="line" style="--color:#fff;--x:8;--z:-3;--d:1;"></div>
            <div class="line" style="--color:#fff;--x:10;--z:-4;--d:2;"></div>
            <div class="line" style="--color:#fff;--x:12;--z:-5;--d:3;"></div>
            <div class="line" style="--color:#fff;--x:14;--z:-6;--d:1;"></div>
            <div class="line" style="--color:#fff;--x:16;--z:-7;--d:2;"></div>
            <div class="line" style="--color:#fff;--x:18;--z:-8;--d:3;"></div>
            <div class="line" style="--color:#e056fd;--x:20;--z:-9;--d:1;"></div>

            
        </div>
<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>

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

完！

GIF图 特效 组件 优化 源码分享

上一篇 : JS图片预览

下一篇 : 关于折腾服务器这件事


| 黔ICP备2024020400号-1 | 萌ICP备20246777号 | | 当前有 5 人在线 |
本站已加入BLOGS·CN
yjvc.cn
yjvc.cn
博友圈 星球穿梭
开往-友链接力