当艺术与代码交汇，神奇的CSS特效诞生！在这篇文章中，我为你准备了一个精彩的CSS特效合集，涵盖了各种令人惊叹的效果。从简单到复杂，每个特效都以最精简的代码实现，展示出一系列充满创意和魅力的演示。无论是动态背景渐变，还是浮动的图标按钮，抑或是引人入胜的鼠标跟随效果，本文精心呈现了让你欲罢不能的CSS神奇。
此内容根据文章生成，并经过人工审核，仅用于文章内容的解释与总结
投诉作为一个频繁对博客进行改进的人，我深知花里胡哨的CSS效果对于吸引读者尤为重要。在这里，我汇总了一些炫酷的CSS效果，并提供了简要的预览和实现思路，以方便那些不太熟悉的朋友也能轻松上手。同时，我会持续寻找优秀的效果，逐步添加到博客中，其中部分资源来自网络。
相信有了以下示例，很多不会css动画效果的朋友，也就会了
列表文字图标
实现思路：
- 主要看css部分，先固定 span 标签宽高为，圆角 50%，然后设定行高，让字符垂直居中；
- 设定 overflow: hidden，限制字符溢出；
- 然后设定 letter-spacing: 200px,让字符间距变大，不让第二个字符显示到span中；
- 然后设定 text-indent: 12px，来让第一个字符居中。
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>
|
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 动画。
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>
|
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;
}
@keyframes dot-play{
from{
transform: scale(1);
opacity: .2;
}
to{
transform: scale(4);
opacity: 0;
}
}
|
呼吸灯效果
这个效果主要用 css3 的 animation 属性来实现的。
实现思路：
- 写出三个圆，class 分别为 .red、.green、.blue
- css 部分主要使用 animation 来实现边框及其阴影的大小变化，和其透明度的变化
这个效果可以用作在网站的整体 Loading，也可以放在网站首屏当一个 banner 的背景也是非常棒的！
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>
|
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 属性来实现毛玻璃模糊和一些动效。
实现思路：
- 两个圆形 div（.circle），以及模糊块（.bg-filter）
- 使用animation 属性以及不同的参数来实现动效，产生动画视觉效果
- 用 backdrop-filter 属性中的 blur 参数来模拟毛玻璃效果，数值越大，模糊效果越重，可适当调试参数，直到你喜欢为止
此效果可适用于登录窗口，网站背景或者一些卡片列表中，使网页更具科技感和空间感。
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>
|
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(过渡)属性来实现一个简约的动态按钮效果。
实现思路：
- 按钮主体代码就是一个 button 按钮标签，比较简单
- 使用伪选择器 :before 配合 css content 属性，然后设置 transition 参数来实现按钮过渡动画效果
此效果可适用于关注按钮、详情按钮等，增强用户交互体验。
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>
|
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 属性来实现一个简单的输入框的交互效果。
实现思路：
- 页面主要使用 label 与 input 标签，注意 input 中使用 required 属性，来判断 input 是否为空
- 使用选择器 :hover 、:foucus 来获取鼠标状态，根据不同鼠标的不同状态来设置样式以及过渡效果，使用 :valid 来验证 input 值
此效果可适用于登录页入口、小表单提交等页面，增强用户实时交互体验。
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>
|
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 属性来实现的。
实现思路：
- 写出 loading 主体代码
- css 部分主要设置边框颜色来实现整体边框配合顶部边框模拟加载状态，然后使用 animation 来实现整体旋转
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>
|
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 伪选择器来实现的。
实现思路：
- a 标签主体，包裹子元素 span 以及文字元素 Design 。
- css 部分主要通过 :hover 伪选择器来设置 span 子元素样式，然后使用 animation 来实现 span 宽度变化。
此效果可以在文字链接、文字按钮等地方实现一个简单的鼠标交互效果。
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>
|
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 过渡属性来实现两个子元素上下过渡的效果。
实现思路：
- button 标签主体，包裹两个子元素 span ，分别为 .defalut 和 .hover 。
- css 部分主要通过 :hover 伪选择器来分别设置两个 span 子元素的样式，然后配合 transform 以及定位来实现两个 span 的上下移动。
- 注意：全局定义了 *{transition: .5s;}
此效果可以在主入口按钮、详情或者更多等按钮处使用，增加一些鼠标的交互效果。
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>
|
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 属性来让背景色循环快速移动形成视觉效果。
实现思路：
- 写上主体 button 标签
- css 部分主要通过 :hover 伪选择器判断鼠标悬浮时，设置 animation 参数让背景色沿 X 轴循环移动，注意这里变化的 background-positon 部分的 X 轴值等于按钮宽度，即 140px ，这样动画循环播放时就不会造成视觉断层
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>
|
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 属性画一个顺时针旋转的太极图。
实现思路：
- 两个 div 标签，分别用作绘制整体大圆以及阴阳鱼。
- .taiji:before 和.taiji:after 伪元素分别绘制黑白阴阳鱼的主体，.yu:before 和 .yu:after 伪元素分别绘制黑白阴阳鱼的小鱼眼，然后设置旋转动画，顺时针旋转。
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>
|
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 来模拟新拟态风格输入框被点击时的一个交互效果。
实现思路：
- 页面 input 标签， 并设置 placeholder 值
- 使用 :foucus 来获取鼠标状态，设置 box-shadow 属性模拟新拟态风格，并设置过渡效果
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>
|
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 过渡属性实现搜索图标过渡到输入框的交互效果。
实现思路：
- input 标签设置 required 判断是否为空
- input 自定义样式成圆形，随着 :focus 、:valid 判断输入框状态，来实现过渡动画
此效果可适用于移动端H5页面、app导航栏等位置场景，增强动画交互体验。
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>
|
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 过渡属性实现输入框底部线条动态显示。
实现思路：
- input 标签设置 required 判断是否为空，span 标签画输入框底部线条
- input 自定义样式去掉边框，随着 :focus 、:valid 判断输入框状态，来实现 span 线条变化过渡动画
一款简约大方的动态输入框，适用于表单提交、账号登录入口。
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>
|
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 按钮不停的循环移动，产生视觉震动的效果。
实现思路：
- 一个 button 标签
- 设置 animation 属性参数，让按钮位置不停循环变化
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>
|
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 变形属性，让汉堡图标和关闭图标之间进行过渡、变形，形成视觉效果。
实现思路：
- label 标签包裹 input 标签，input 设置为多选按钮，三个 span 标签形成汉堡图标
- 隐藏 input 多选按钮，设置 transition 过渡效果，当 input 多选按钮选中时，三个 span 标签设置变形效果，汉堡图标变形过渡到关闭图标
适用于h5页面或者app页面中，隐藏菜单和打开菜单时使用。
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>
|
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 动画属性让每个字符上下动起来，形成视觉加载效果
实现思路：
- 每个字符用 span 标签单独包裹
- 所有 span 标签设置 animation 动画参数，注意设置 infinite 参数，使动画循环播放；给每个 span 设置动画延迟，形成视觉加载效果
适用于加载页或底部刷新交互动画。
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>
|
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 属性，实现一个好看聚光灯效果。
实现思路：
- 主体部分一个 div 标签
- 用 background-image 的 linear-gradient 拉出渐变背景，让文字颜色透明 color: transparent ，然后配合 -webkit-background-clip: text 给文字实现渐变效果，最后加上动画属性 animation 并设置 clip-path 参数就可以啦
- 注意：这里使用的是 -webkit-background-clip ，而不是 background-clip 。
可适用于页面加载或展示页面大标题内容。
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>
|
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%);
}
}
|
