创意CSS合辑一:轻松实现多种有趣效果
作为一个频繁对博客进行改进的人,我深知花里胡哨的CSS效果对于吸引读者尤为重要。在这里,我汇总了一些炫酷的CSS效果,并提供了简要的预览和实现思路,以方便那些不太熟悉的朋友也能轻松上手。同时,我会持续寻找优秀的效果,逐步添加到博客中,其中部分资源来自网络。
相信有了以下示例,很多不会css动画效果的朋友,也就会了
列表文字图标
实现思路:
- 主要看css部分,先固定 span 标签宽高为,圆角 50%,然后设定行高,让字符垂直居中;
- 设定 overflow: hidden,限制字符溢出;
- 然后设定 letter-spacing: 200px,让字符间距变大,不让第二个字符显示到span中;
- 然后设定 text-indent: 12px,来让第一个字符居中。
- Html部分
<!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部分
*{
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部分
<!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部分
*{
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 属性来实现的。
实现思路:
- 写出三个圆,class 分别为 .red、.green、.blue
- css 部分主要使用 animation 来实现边框及其阴影的大小变化,和其透明度的变化
这个效果可以用作在网站的整体 Loading,也可以放在网站首屏当一个 banner 的背景也是非常棒的!
- Html部分
<!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部分
*{
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 参数来模拟毛玻璃效果,数值越大,模糊效果越重,可适当调试参数,直到你喜欢为止
此效果可适用于登录窗口,网站背景或者一些卡片列表中,使网页更具科技感和空间感。
- Html部分
<!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部分
.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 参数来实现按钮过渡动画效果
此效果可适用于关注按钮、详情按钮等,增强用户交互体验。
- Html部分
<!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部分
.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 值
此效果可适用于登录页入口、小表单提交等页面,增强用户实时交互体验。
- Html部分
<!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部分
.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 来实现整体旋转
- Html部分
<!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部分
.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 宽度变化。
此效果可以在文字链接、文字按钮等地方实现一个简单的鼠标交互效果。
- Html部分
<!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部分
*{
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;}
此效果可以在主入口按钮、详情或者更多等按钮处使用,增加一些鼠标的交互效果。
- Html部分
<!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部分
*{
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 ,这样动画循环播放时就不会造成视觉断层
- Html部分
<!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部分
.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 伪元素分别绘制黑白阴阳鱼的小鱼眼,然后设置旋转动画,顺时针旋转。
- Html部分
<!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部分
.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 属性模拟新拟态风格,并设置过渡效果
- Html部分
<!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部分
.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导航栏等位置场景,增强动画交互体验。
- Html部分
<!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部分
.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 线条变化过渡动画
一款简约大方的动态输入框,适用于表单提交、账号登录入口。
- Html部分
<!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部分
.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 属性参数,让按钮位置不停循环变化
- Html部分
<!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部分
.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页面中,隐藏菜单和打开菜单时使用。
- Html部分
<!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部分
.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 设置动画延迟,形成视觉加载效果
适用于加载页或底部刷新交互动画。
- Html部分
<!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部分
.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 。
可适用于页面加载或展示页面大标题内容。
- Html部分
<!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部分
.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%);
}
}
空空如也!