作为一个频繁对博客进行改进的人，我深知花里胡哨的CSS效果对于吸引读者尤为重要。在这里，我汇总了一些炫酷的CSS效果，并提供了简要的预览和实现思路，以方便那些不太熟悉的朋友也能轻松上手。同时，我会持续寻找优秀的效果，逐步添加到博客中，其中部分资源来自网络。

相信有了以下示例，很多不会css动画效果的朋友，也就会了

列表文字图标

实现思路：

  1. 主要看css部分，先固定 span 标签宽高为，圆角 50%，然后设定行高，让字符垂直居中；
  2. 设定 overflow: hidden，限制字符溢出；
  3. 然后设定 letter-spacing: 200px,让字符间距变大，不让第二个字符显示到span中；
  4. 然后设定 text-indent: 12px，来让第一个字符居中。
  • Html部分
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!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>04 第一个字符串生成文字图标</title>
</head>
<body>
    <div class="app">
        <ul>
          <li><span>第一个字符串生成文字图标</span>第一个字符串生成文字图标</li>
          <li><span>用CSS可以做什么？</span>用CSS可以做什么？</li>
          <li><span>前端的致命诱惑</span>前端的致命诱惑</li>
        </ul>
    </div>
</body>
</html>
  • css部分
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
*{
    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;
}

动态圆点水波纹

这个效果使用 css 中 animation 属性，以及搭配伪元素 ::after、::before 来实现两个圆交替变化。

实现思路：伪元素基于主体圆写出两个蓝色圆形来做水波纹，并设置 animation 属性进行变化。注意：第二个伪元素的圆形，延迟 2s 启动 animation 动画。

  • Html部分
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!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>
</body>
</html>
  • CSS部分
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
*{
  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;
  }
}

呼吸灯效果

这个效果主要用 css3 的 animation 属性来实现的。

实现思路：

  1. 写出三个圆，class 分别为 .red、.green、.blue
  2. css 部分主要使用 animation 来实现边框及其阴影的大小变化，和其透明度的变化

这个效果可以用作在网站的整体 Loading，也可以放在网站首屏当一个 banner 的背景也是非常棒的！

  • Html部分
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!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>
</body>
</html>
  • CSS部分
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
*{
  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;
  }
}

动态毛玻璃

此效果主要使用 backdrop-filter 属性，以及配合 animation 属性来实现毛玻璃模糊和一些动效。

实现思路：

  1. 两个圆形 div（.circle），以及模糊块（.bg-filter）
  2. 使用animation 属性以及不同的参数来实现动效，产生动画视觉效果
  3. 用 backdrop-filter 属性中的 blur 参数来模拟毛玻璃效果，数值越大，模糊效果越重，可适当调试参数，直到你喜欢为止

此效果可适用于登录窗口，网站背景或者一些卡片列表中，使网页更具科技感和空间感。

  • Html部分
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!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="box">
        <div class="circle-box">
          <div class="circle"></div>
          <div class="circle"></div>
        </div>
        <div class="bg-filter"></div>
      </div>
    </div>
  </body>
</html>
  • CSS部分
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
.app{
  width: 100%;
  height: 100vh;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.box{
  width: 400px;
  height: 300px;
  position: relative;
}
.circle-box{
  width: 100%;
  height: 100%;
  border-radius: 10px;
  position: absolute;
  overflow: hidden;
}
.circle:first-child{
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 30px solid #7BF52A;
  box-sizing: border-box;
  position: absolute;
  top: -38px;
  left: -40px;
  animation: move-y 3.5s linear infinite;
}
.circle:last-child{
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: linear-gradient(136deg, #7BF52A 0%, #FFCD56 100%);
  box-sizing: border-box;
  position: absolute;
  bottom: -30px;
  right: -30px;
  animation: move-y 5s ease-in-out infinite;
}
.bg-filter{
  width: 100%;
  height: 100%;
  background: rgba(255,255,255,.05);
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  backdrop-filter: blur(6px);
  border-radius: 10px;
  box-sizing: border-box;
  position: absolute;
}
@keyframes move-y {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-16px);
  }
  100% {
    transform: translateY(0);
  }
}

简约动态关注按钮

此效果主要使用 css 伪选择器配合 css content 属性，以及 transition(过渡)属性来实现一个简约的动态按钮效果。

实现思路：

  1. 按钮主体代码就是一个 button 按钮标签，比较简单
  2. 使用伪选择器 :before 配合 css content 属性，然后设置 transition 参数来实现按钮过渡动画效果

此效果可适用于关注按钮、详情按钮等，增强用户交互体验。

  • Html部分
1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
    <title>简约的动态关注按钮</title>
  </head>
  <body>
    <div class="app">
      <button>关注我</button>
    </div>
  </body>
</html>
  • CSS部分
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
.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;
}

输入框交互

此效果主要使用 css 伪选择器配合 html5 required 属性来实现一个简单的输入框的交互效果。

实现思路：

  1. 页面主要使用 label 与 input 标签，注意 input 中使用 required 属性，来判断 input 是否为空
  2. 使用选择器 :hover 、:foucus 来获取鼠标状态，根据不同鼠标的不同状态来设置样式以及过渡效果，使用 :valid 来验证 input 值

此效果可适用于登录页入口、小表单提交等页面，增强用户实时交互体验。

  • Html部分
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
    <title>输入框选中交互动效</title>
  </head>
  <body>
    <div class="app">
      <label>
        <input type="text" required>
        <span>用户名</span>
      </label>
    </div>
  </body>
</html>
  • CSS部分
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
.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);
}

loading动画

这个 Loading 效果主要用 css3 的 animation 属性配合 border 属性来实现的。

实现思路：

  1. 写出 loading 主体代码
  2. css 部分主要设置边框颜色来实现整体边框配合顶部边框模拟加载状态，然后使用 animation 来实现整体旋转
  • Html部分
1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
    <title>loading</title>
  </head>
  <body>
    <div class="app">
      <div class="loading"></div>
    </div>
  </body>
</html>
  • CSS部分
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.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);
    }
}

鼠标悬浮线条动态变化

这个链接悬浮效果主要用 css3 的 animation 属性配合 :hover 伪选择器来实现的。

实现思路：

  1. a 标签主体，包裹子元素 span 以及文字元素 Design 。
  2. css 部分主要通过 :hover 伪选择器来设置 span 子元素样式，然后使用 animation 来实现 span 宽度变化。

此效果可以在文字链接、文字按钮等地方实现一个简单的鼠标交互效果。

  • Html部分
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!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">
      <a href="javascript:;">
        <span class="a-line"></span>
        Design
      </a>
    </div>
  </body>
</html>
  • CSS部分
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
*{
  margin: 0;
  padding: 0;
  list-style: none;
  transition: .5s;
}
html,body{
  background-color: #fff;
  font-size: 14px;
}
.app{
  width: 100%;
  height: 100vh;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
a{
  text-decoration: none;
  color: green;
  cursor: pointer;
  font-size: 34px;
  font-weight: bold;
}
.a-line{
  width: 0;
  height: 2px;
  display: block;
  margin-bottom: 6px;
  background-color: green;
}
a:hover .a-line{
  width: 100%;
  animation: move .5s ease;
}
@keyframes move{
  from{
    width: 0;
  }
  to{
    width: 100%;
  }
}

按钮文字上下滑动

这个按钮效果主要使用 :hover 伪选择器以及 transition 过渡属性来实现两个子元素上下过渡的效果。

实现思路：

  1. button 标签主体，包裹两个子元素 span ，分别为 .defalut 和 .hover 。
  2. css 部分主要通过 :hover 伪选择器来分别设置两个 span 子元素的样式，然后配合 transform 以及定位来实现两个 span 的上下移动。
  3. 注意：全局定义了 *{transition: .5s;}

此效果可以在主入口按钮、详情或者更多等按钮处使用，增加一些鼠标的交互效果。

  • Html部分
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
    <title>按钮文字上下滑动</title>
  </head>
  <body>
    <div class="app">
      <button>
        <span class="defalut">鼠标放上来</span>
        <span class="hover">点我吧</span>
      </button>
    </div>
  </body>
</html>
  • CSS部分
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
*{
  margin: 0;
  padding: 0;
  list-style: none;
  transition: .5s;
}
html,body{
  background-color: #efefef;
  color: #fff;
  font-size: 14px;
}
.app{
  width: 100%;
  height: 100vh;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
button{
  width: 110px;
  height: 42px;
  color: #ffffff;
  background-color: #457356;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s linear;
  position: relative;
  overflow: hidden;
}
.defalut,.hover{
  width: 100%;
  height: 100%;
  line-height: 42px;
  letter-spacing: 2px;
  display: block;
  transition: all 0.3s ease-in-out;
  cursor: pointer;
}
.hover{
  position: absolute;
  left: 0;
  top: 100%;
}
button:hover .defalut{
  transform: translateY(-100%);
}
button:hover .hover{
  top: 0;
}

多彩变化的按钮

这个按钮效果主要使用 :hover 、:active 伪选择器以及 animation 、transition 属性来让背景色循环快速移动形成视觉效果。

实现思路：

  1. 写上主体 button 标签
  2. css 部分主要通过 :hover 伪选择器判断鼠标悬浮时，设置 animation 参数让背景色沿 X 轴循环移动，注意这里变化的 background-positon 部分的 X 轴值等于按钮宽度，即 140px ，这样动画循环播放时就不会造成视觉断层
  • Html部分
1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
    <title>多彩变化的按钮</title>
  </head>
  <body>
    <div class="app">
      <button>戳一下</button>
    </div>
  </body>
</html>
  • CSS部分
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
.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);
}

旋转的太极图案

使用 :before 、:after 伪元素以及 animation 属性画一个顺时针旋转的太极图。

实现思路：

  1. 两个 div 标签，分别用作绘制整体大圆以及阴阳鱼。
  2. .taiji:before 和.taiji:after 伪元素分别绘制黑白阴阳鱼的主体，.yu:before 和 .yu:after 伪元素分别绘制黑白阴阳鱼的小鱼眼，然后设置旋转动画，顺时针旋转。
  • Html部分
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!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="taiji">
        <div class="yu"></div>
      </div>
    </div>
  </body>
</html>
  • CSS部分
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
.app{
  width: 100%;
  height: 100vh;
  background-color: #e8e8e8;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.taiji{
  width: 200px;
  height: 200px;
  position: relative;
  border-radius: 50%;
  box-shadow: 0px -10px 20px 0px #2AF598, 0px 10px 20px 0px #08AEEA;
  animation: zhuan 5s linear infinite;
}
.taiji:before,.taiji:after{
  content: '';
  width: 200px;
  height: 100px;
  position: absolute;
  background-color: #fff;
  border-radius: 100px 100px 0 0;
}
.taiji:after{
  top: 100px;
  background-color: #000;
  border-radius: 0 0 100px 100px;
}
.yu:before,.yu:after{
  content: '';
  width: 24px;
  height: 24px;
  position: absolute;
  top: 50px;
  left: 100px;
  border-radius: 50%;
  background-color: #000;
  border: 38px solid #fff;
  z-index: 1;
}
.yu:after{
  left: 0;
  background-color: #fff;
  border: 38px solid #000;
}
@keyframes zhuan{
  to {
    transform: rotate(360deg);
  }
}

新拟态输入框

此效果使用 css 中 box-shadow 来模拟新拟态风格输入框被点击时的一个交互效果。

实现思路：

  1. 页面 input 标签， 并设置 placeholder 值
  2. 使用 :foucus 来获取鼠标状态，设置 box-shadow 属性模拟新拟态风格，并设置过渡效果
  • Html部分
1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
    <title>12 新拟态输入框</title>
  </head>
  <body>
    <div class="app">
      <input type="text" placeholder="用户名/邮箱">
    </div>
  </body>
</html>
  • CSS部分
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
.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);
}

搜索框的小动特效

使用 input 自定义样式模拟一个搜索图标，使用 transition 过渡属性实现搜索图标过渡到输入框的交互效果。

实现思路：

  1. input 标签设置 required 判断是否为空
  2. input 自定义样式成圆形，随着 :focus 、:valid 判断输入框状态，来实现过渡动画

此效果可适用于移动端H5页面、app导航栏等位置场景，增强动画交互体验。

  • Html部分
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
    <title>搜索框小动效</title>
  </head>
  <body>
    <div class="app">
      <label>
        <input type="text" required>
        <span class="line"></span>
      </label>
    </div>
  </body>
</html>
  • CSS部分
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
.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);
}

简约大方的输入框

使用 input 标签配合 transition 过渡属性实现输入框底部线条动态显示。

实现思路：

  1. input 标签设置 required 判断是否为空，span 标签画输入框底部线条
  2. input 自定义样式去掉边框，随着 :focus 、:valid 判断输入框状态，来实现 span 线条变化过渡动画

一款简约大方的动态输入框，适用于表单提交、账号登录入口。

  • Html部分
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="utf-8">
    <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>
  </body>
</html>
  • CSS部分
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
.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%;
}

跳动的按钮

使用 animation 属性，使 button 按钮不停的循环移动，产生视觉震动的效果。

实现思路：

  1. 一个 button 标签
  2. 设置 animation 属性参数，让按钮位置不停循环变化
  • Html部分
1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
    <title>一直动的按钮</title>
  </head>
  <body>
    <div class="app">
      <button class="btn15">动起来</button>
    </div>
  </body>
</html>
  • CSS部分
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
.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);
  }
}

汉堡菜单按钮

使用 transition 过渡属性和 transform 变形属性，让汉堡图标和关闭图标之间进行过渡、变形，形成视觉效果。

实现思路：

  1. label 标签包裹 input 标签，input 设置为多选按钮，三个 span 标签形成汉堡图标
  2. 隐藏 input 多选按钮，设置 transition 过渡效果，当 input 多选按钮选中时，三个 span 标签设置变形效果，汉堡图标变形过渡到关闭图标

适用于h5页面或者app页面中，隐藏菜单和打开菜单时使用。

  • Html部分
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="utf-8">
    <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>
  </body>
</html>
  • CSS部分
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
.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;
}

文字加载动画

使用 animation 动画属性让每个字符上下动起来，形成视觉加载效果

实现思路：

  1. 每个字符用 span 标签单独包裹
  2. 所有 span 标签设置 animation 动画参数，注意设置 infinite 参数，使动画循环播放；给每个 span 设置动画延迟，形成视觉加载效果

适用于加载页或底部刷新交互动画。

  • Html部分
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!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="loading17">
        <span class="load-span17">F</span>
        <span class="load-span17">U</span>
        <span class="load-span17">N</span>
        <span class="load-span17">C</span>
        <span class="load-span17">S</span>
        <span class="load-span17">S</span>
      </div>
    </div>
  </body>
</html>
  • CSS部分
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
.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);
  }
}

聚光灯效果

使用 -webkit-background-clip 和 clip-path ，并配合 animation 属性，实现一个好看聚光灯效果。

实现思路：

  1. 主体部分一个 div 标签
  2. 用 background-image 的 linear-gradient 拉出渐变背景，让文字颜色透明 color: transparent ，然后配合 -webkit-background-clip: text 给文字实现渐变效果，最后加上动画属性 animation 并设置 clip-path 参数就可以啦
  3. 注意：这里使用的是 -webkit-background-clip ，而不是 background-clip 。

可适用于页面加载或展示页面大标题内容。

  • Html部分
1
2
3
4
5
6
7
8
9
10
11
12
13
<!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="spotlight18" data-cont="spotlight">spotlight</div>
    </div>
  </body>
</html>
  • CSS部分
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
.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%);
  }
}