创意CSS合辑二:轻松实现多种有趣效果
作为一个频繁对博客进行改进的人,我深知花里胡哨的CSS效果对于吸引读者尤为重要。在这里,我汇总了一些炫酷的CSS效果,并提供了简要的预览和实现思路,以方便那些不太熟悉的朋友也能轻松上手。同时,我会持续寻找优秀的效果,逐步添加到博客中,其中部分资源来自网络。
相信有了以下示例,很多不会css动画效果的朋友,也就会了
弹跳的圆
使用伪选择器 :before 和 :after ,并配合 animation 属性并设置 transform 变形参数,实现一个圆不停的弹跳的效果。
实现思路:
- 主体一个 div 标签
- 用伪选择器 :before 和 :after 分别画两个圆,一个作为主体弹跳圆形,一个作为其阴影部分,分别设置 animation 动画参数,注意这里设置了反向播放参数 alternate
- 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="yuan19"></div>
</div>
</div>
</body>
</html>
- CSS部分
.app{
width: 100%;
height: 100vh;
background-color: #ffffff;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.yuan19{
width: 20px;
height: 66px;
position: relative;
}
.yuan19:before{
content: '';
width: 20px;
height: 20px;
position: absolute;
border-radius: 50%;
background-color: #333;
animation: yuan191 .5s ease infinite alternate;
}
@keyframes yuan191 {
0% {
top: 60px;
height: 5px;
border-radius: 50px 50px 25px 25px;
transform: scaleX(1.5);
}
50% {
height: 20px;
border-radius: 50%;
transform: scaleX(1);
}
100% {
top: 0;
}
}
.yuan19:after{
content: '';
width: 20px;
height: 4px;
border-radius: 50%;
position: absolute;
top: 62px;
animation: yuan1912 .5s ease infinite alternate;
}
@keyframes yuan1912 {
0% {
filter: blur(1px);
transform: scaleX(1.5);
background-color: rgba(0,0,0,0.9);
}
50% {
transform: scaleX(1);
background-color: rgba(0,0,0,0.6);
}
100% {
filter: blur(2px);
transform: scaleX(0.5);
background-color: rgba(0,0,0,0.3);
}
}
动态的波纹字
使用 linear-gradient 拉出网格渐变,然后通过 animation 参数来改变 background-size 数据,形成不停变化的纹理效果。
实现思路:
- 主体一个 div 标签
- 用 background-image: linear-gradient(...) 拉出网格渐变纹理,然后使用 -webkit-background-clip 配合 color: transparent 使文字加上纹理,再设置 animation 的参数,修改 background-size 参数实现纹理不停变化
- 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="font20">不就是<br>玩嘛!</div>
</div>
</div>
</body>
</html>
- CSS部分
.app{
width: 100%;
height: 100vh;
background-color: #ffffff;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.font20{
color: transparent;
font-size: 70px;
font-weight: 900;
background-image: linear-gradient(-45deg, #fff 0%, #fff 25%, green 25%, green 50%, #fff 50%, #fff 75%, green 75%, green 100%);
-webkit-background-clip: text;
animation: font20 10s ease infinite;
}
@keyframes font20{
0%{
background-size: 1px 2px;
}
20%{
background-size: 4px 5px;
}
40%{
background-size: 3px 4px;
}
60%{
background-size: 5px 6px;
}
80%{
background-size: 2px 3px;
}
100%{
background-size: 7px 6px;
}
}
好看的格栅字
先绘制出渐变网格的文字效果,再利用 :before 以及搭配 content + attr(...)实现一个好看的网格阴影的文字
实现思路:
- 一个 div 标签,添加 data-text
- 用 background-image: linear-gradient(...) 拉出网格渐变纹理,然后使用 -webkit-background-clip 配合 color: transparent 使文字加上纹理,再使用 content + attr(...) 并让其覆盖到网格文字上面,形成视觉阴影效果
此效果应该算是上一个的姊妹篇,可适用于内容的大标题等场景
- 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="font21" data-text="不就是玩嘛">不就是<br>玩嘛</div>
</div>
</div>
</body>
</html>
- CSS部分
.app{
width: 100%;
height: 100vh;
background-color: #ffffff;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.font21{
color: transparent;
font-size: 70px;
font-weight: 900;
letter-spacing: 10px;
background-image: linear-gradient(-45deg, #ffffff 0%, #ffffff 25%, green 25%, green 50%, #ffffff 50%, #ffffff 75%, green 75%, green 100%);
background-size: 4px 4px;
-webkit-background-clip: text;
position: relative;
}
.font21:before{
content: attr(data-text);
letter-spacing: 10px;
color: green;
position: absolute;
top: -6px;
left: -6px;
text-shadow: 2px 2px #ffffff;
}
旋转的金币
通过 animation 和 transform 来实现金币的 Y 轴旋转。
实现思路:
- 一个 div 标签
- 用 box-shadow 实现金币的双层边框,设置 animation 的参数,修改 animation-timing-function 运动参数来实现旋转速度变化,修改 transform 参数让金币绕 Y 轴旋转
- 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="icon22">¥</div>
</div>
</body>
</html>
- CSS部分
.app{
width: 100%;
height: 100vh;
background-color: #ffffff;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.icon22{
width: 72px;
height: 72px;
line-height: 72px;
text-align: center;
color: #daa500;
font-size: 40px;
font-weight: 900;
background-color: #ffee00;
border-radius: 50%;
box-shadow: inset 0 0 0 4px #ffee00,inset 0 0 0 5px #daa500,0 5px 12px rgba(0,0,0,0.2);
animation: ani-icon22 5s ease infinite;
}
@keyframes ani-icon22{
0%{
transform: rotateY(0deg);
animation-timing-function: cubic-bezier(0.5, 0, 1, 0.5);
}
50%{
transform: rotateY(900deg);
animation-timing-function: cubic-bezier(0, 0.5, 0.5, 1);
}
100%{
transform: rotateY(1800deg);
animation-timing-function: cubic-bezier(0.5, 0, 1, 0.5);
}
}
一个旋转的金币,适用于游戏网站,会员币等场景。
霓虹灯文字
利用 animation 动画设置关键帧参数,再设置不同的延迟时间,达到一个闪烁的效果。
实现思路:
- 页面搭建鸿星尔克品牌名称以及它耳熟能详的的slogan “To Be Number One”
- 利用 animation 动画在关键帧中设置不同的显示效果,然后不同的元素设置 animation-delay 加上不同的延迟时间,形成闪烁的视觉效果
- 注意:设置 animation 动画时,animation-fill-mode 要设置为 forwards,以使动画执行完后保持在最后的状态不变
此效果可适用于一些文字入口、游戏类网站文字显示效果等场景。
- 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="light23">
<div class="title23">
<span>鸿</span>
<span>星</span>
<span>尔</span>
<span>克</span>
</div>
<div class="info23">
<span>to be number one</span>
</div>
</div>
</div>
</body>
</html>
- CSS部分
.app{
width: 100%;
height: 100vh;
background-color: #ffffff;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.light23{
cursor: default;
}
.title23{
color: #eaeaea;
font-size: 32px;
font-weight: 900;
}
.info23{
color: #eaeaea;
font-size: 16px;
letter-spacing: 1px;
text-transform: capitalize;
}
.light23:hover .title23 span{
animation: light 0.4s ease forwards;
}
.light23:hover .title23 span:nth-of-type(2){
animation-delay: .14s;
}
.light23:hover .title23 span:nth-of-type(3){
animation-delay: .42s;
}
.light23:hover .title23 span:nth-of-type(4){
animation-delay: .78s;
}
@keyframes light{
10%,30%,50%{
color: #eaeaea;
text-shadow: none;
}
20%,40%,60%{
color: #318BF6;
text-shadow: 0px 0px 20px #1ABFED,0px 0px 40px #1ABFED,0px 0px 60px #1ABFED;
}
100%{
color: #318BF6;
text-shadow:0px 0px 20px #1ABFED,0px 0px 40px #1ABFED,0px 0px 60px #1ABFED;
}
}
.light23:hover .info23 span{
animation: light 0.4s ease forwards;
animation-delay: 1s;
}
故障字体效果
通过 animation 和 transform 来实现一个故障字体效果。
实现思路:
- 一个 div 标签,设置 data-text 值
- 用 :before 和 :after 生成两个伪元素,设置 mix-blend-mode 混合模式,再分别设置 animation 的参数,让两个伪元素动起来,最后给主体 div 设置一个 transform: skew(...) 变形的 animation 实现视觉上故障的效果
适用于网页404状态等场景应用。
- 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="font24" data-text="404">404</div>
</div>
</body>
</html>
- CSS部分
.app{
width: 100%;
height: 100vh;
background-color: #ffffff;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.font24 {
width: 156px;
height: 98px;
position: relative;
font-size: 70px;
font-weight: 900;
color: transparent;
letter-spacing: 10px;
z-index: 10;
animation: text-skew 4s linear infinite;
}
.font24:before,.font24:after {
display: block;
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
}
.font24:before {
animation: text-light 1s alternate-reverse infinite;
color: #ff0000;
z-index: -5;
text-shadow: 2px 2px 0 #00ff00;
mix-blend-mode: darken;
}
.font24:after {
animation: text-light2 0.5s alternate-reverse infinite;
color: #00ff00;
z-index: -10;
text-shadow: 2px 2px 0 #ff0000;
}
@keyframes text-light{
10% {
transform: translate(-2px,4px);
}
50% {
transform: translate(2px, 2px);
}
100% {
transform: translate(-4px,4px);
}
}
@keyframes text-light2{
0% {
transform: translate(0,0);
}
20% {
transform: translate(-2px,2px);
}
40% {
transform: translate(-2px,2px);
}
60% {
transform: translate(2px, -2px);
}
80% {
transform: translate(2px, 2px);
}
100% {
transform: translate(0,0);
}
}
@keyframes text-skew{
29%{
color: transparent;
transform: skew(0deg,0deg);
}
30%{
color: #000000;
transform: skew(10deg,40deg);
}
31%{
color: transparent;
transform: skew(0deg,0deg);
}
69%{
color: transparent;
transform: skew(0deg,0deg);
}
70%{
color: #000000;
transform: skew(180deg,10deg);
}
71%{
color: transparent;
transform: skew(0deg,0deg);
}
}
乱码效果
通过 animation 配合伪元素搭配 content 属性来实现字符变换,实现一段字符不停更换。
实现思路:
- 一个 div 标签,div 内文字元素为英文字符最好
- 用 :after 配合 content 属性,设置 animation 的参数让 content 内的字符进行变化,实现视觉上一种乱码的效果。这里要注意的是 content 内的字符长度不能超过主体 div 内字符的长度,也是前面为什么说主体 div 内的文字元素最好是英文字符的原因,为的是保持视觉上的统一
适用于网页异常状态等场景应用。
- 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="font25">The Bug!</div>
</div>
</body>
</html>
- CSS部分
.app{
width: 100%;
height: 100vh;
background-color: #ffffff;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.font25{
position: relative;
font-size: 24px;
font-weight: 900;
color: #1630f1;
letter-spacing: 10px;
background-color: #ffffff;
}
.font25:after{
content: '';
position: absolute;
top: 0;
z-index: 10;
background-color: inherit;
animation: text-ani25 2.4s linear infinite;
animation-delay: 2s;
}
@keyframes text-ani25{
0%{
content: "$-";
left: 0;
}
5%{
content: ";y";
left: 0;
}
10%{
content: "*&#H";
left: 0;
}
15%{
content: "-!);";
left: 0;
}
20%{
content: "#$_}-'";
left: 0;
}
25%{
content: ":0^!$.";
left: 0;
}
30%{
content: "#{+.-?#u";
left: 0;
}
35%{
content: "f7*%}-;#";
left: 0;
}
40%{
content: "^='?'*$!";
left: 0;
}
45%{
content: "+0^&!`^-";
left: 0;
}
50%{
content: "&-?>-=|`";
left: 0;
}
55%{
content: "u<|:#-";
left: auto;
right: 0;
}
60%{
content: ";~0![,";
left: auto;
right: 0;
}
65%{
content: ")+->";
left: auto;
right: 0;
}
70%{
content: "+.=d";
left: auto;
right: 0;
}
75%{
content: "&%";
left: auto;
right: 0;
}
80%{
content: "`@";
left: auto;
right: 0;
}
85%{
content: "-";
left: auto;
right: 0;
}
90%{
content: "#";
left: auto;
right: 0;
}
95%{
content: "";
left: 0;
}
100%{
content: "";
left: 0;
}
}
加载的花瓣
通过 animation 配合 transform 实现4个圆的变化运动,形成视觉动态。
实现思路:
- 4个 div 绘制4个圆形
- 每个圆形设置不同的 animation 参数,让每个圆形都渐渐变化成带一个角的;然后给4个圆的父元素 div 设置 animation 参数,在关键帧中设置 transform 属性,让整体旋转、放大、缩小
适用于各种加载、刷新等状态的场景。
- 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="loading26">
<span class="round26"></span>
<span class="round26"></span>
<span class="round26"></span>
<span class="round26"></span>
</div>
</div>
</body>
</html>
- CSS部分
.app{
width: 100%;
height: 100vh;
background-color: #ffffff;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.loading26{
width: 90px;
height: 90px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-content: space-between;
animation: loading26-eff 3s linear infinite;
}
@keyframes loading26-eff{
0%{
transform: scale(1) rotate(0);
}
20%{
transform: scale(1) rotate(72deg);
}
40%{
transform: scale(0.5) rotate(144deg);
}
60%{
transform: scale(0.5) rotate(216deg);
}
80%{
transform: scale(1) rotate(288deg);
}
100%{
transform: scale(1) rotate(360deg);
}
}
.round26{
width: 40px;
height: 40px;
display: block;
border-radius: 20px 20px 20px 20px;
box-sizing: border-box;
}
.round26:nth-of-type(1){
background-color: #50DE68;
animation: round-eff261 3s linear infinite;
}
.round26:nth-of-type(2){
background-color: #3DC453;
animation: round-eff262 3s linear infinite;
}
.round26:nth-of-type(3){
background-color: #14BE71;
animation: round-eff263 3s linear infinite;
}
.round26:nth-of-type(4){
background-color: #78DE35;
animation: round-eff264 3s linear infinite;
}
@keyframes round-eff261{
0%{
border-radius: 20px 20px 20px 20px 20px;
}
20%{
border-radius: 20px 20px 20px 20px;
}
40%{
border-radius: 20px 20px 0 20px;
}
60%{
border-radius: 20px 20px 0 20px;
}
80%{
border-radius: 20px 20px 20px 20px 20px;
}
100%{
border-radius: 20px 20px 20px 20px 20px;
}
}
@keyframes round-eff262{
0%{
border-radius: 20px 20px 20px 20px 20px;
}
20%{
border-radius: 20px 20px 20px 20px;
}
40%{
border-radius: 20px 20px 20px 0;
}
60%{
border-radius: 20px 20px 20px 0;
}
80%{
border-radius: 20px 20px 20px 20px 20px;
}
100%{
border-radius: 20px 20px 20px 20px 20px;
}
}
@keyframes round-eff263{
0%{
border-radius: 20px 20px 20px 20px 20px;
}
20%{
border-radius: 20px 20px 20px 20px;
}
40%{
border-radius: 20px 0 20px 20px;
}
60%{
border-radius: 20px 0 20px 20px;
}
80%{
border-radius: 20px 20px 20px 20px 20px;
}
100%{
border-radius: 20px 20px 20px 20px 20px;
}
}
@keyframes round-eff264{
0%{
border-radius: 20px 20px 20px 20px 20px;
}
20%{
border-radius: 20px 20px 20px 20px;
}
40%{
border-radius: 0 20px 20px 20px;
}
60%{
border-radius: 0 20px 20px 20px;
}
80%{
border-radius: 20px 20px 20px 20px 20px;
}
100%{
border-radius: 20px 20px 20px 20px 20px;
}
}
输入框交互效果
利用 flex 布局,然后利用 css 选择器来实现鼠标悬浮、点击等状态的交互效果。
实现思路:
- label 搭配 input ,然后 input 设置 required 来判断非空状态
- 利用 flex 布局,设置 justify-content: flex-end; 让输入框变高时,自动撑起提示文本。通过 :hover 、:foucus 、:valid 来判断鼠标状态,然后变化成不同的样式来实现交互的效果
此效果可适用于小表单、或者登录注册表单等场景。
- 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="label28">
<span class="span28">用户名</span>
<input class="inp28" type="text" required>
</label>
</div>
</body>
</html>
- CSS部分
.app{
width: 100%;
height: 100vh;
background-color: #ffffff;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.label28{
width: 190px;
height: 68px;
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-end;
cursor: text;
}
.span28{
width: 100%;
color: #000;
font-size: 14px;
margin-bottom: 6px;
padding: 0 10px;
}
.inp28{
width: 100%;
padding: 0 10px;
height: 2px;
border: 0;
font-size: 14px;
box-sizing: border-box;
background-color: rgba(0,0,0,0.1);
transition: .3s;
}
.inp28:hover{
background-color: rgba(50,133,255,0.7);
}
.inp28:focus,.inp28:valid{
background-color: rgba(50,133,255,0.2);
border: 2px solid rgba(50,133,255,0.7);
border-radius: 4px;
height: 42px;
color: #000;
}
圆点交互
:hover 获取鼠标状态,当鼠标悬浮上方时,改变背景样式来实现鼠标的交互。
实现思路:
- 两个span 搭建按钮主体
- 当鼠标悬浮时,改变圆形 span 的参数,并且加上 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">
<div class="btn29">
<span class="btn29-bg"></span>
<span class="btn29-span-text">查看详情</span>
</div>
</div>
</body>
</html>
- CSS部分
.app{
width: 100%;
height: 100vh;
background-color: #ffffff;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.btn29{
width: 100px;
height: 42px;
line-height: 42px;
position: relative;
cursor: pointer;
}
.btn29-bg{
width: 30px;
height: 30px;
display: block;
border-radius: 15px;
position: absolute;
left: 0;
bottom: 0;
background-color: #97E138;
transition: 0.24s;
}
.btn29-span-text{
width: 100%;
text-align: center;
display: block;
font-size: 16px;
font-weight: 700;
color: #056C00;
position: absolute;
}
.btn29:hover .btn29-bg{
width: 100%;
height: 42px;
border-radius: 21px;
}
文字上下滑动按钮
当鼠标悬浮按钮上方时,利用伪元素和定位来实现伪元素块上下滑入和滑出的交互效果。
实现思路:
- 一个 div 父元素,及其子元素span ,形成一个大按钮
- 每个 span 添加其伪元素 :after ,并通过 content 属性插入文本,然后通过定位让其每个伪元素放到其上或下的位置,通过 :hover 获取鼠标状态,当鼠标悬浮在按钮上方时,改变其伪元素的定位,利用 transition 过渡效果,来让其伪元素上下滑入滑出,实现按钮块上下滑动的的交互效果
此效果适用于较大的按钮入口,如主页banner处按钮,也可以放在当作首屏当作一个大banner作为视觉效果等场景。
- 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="btn30">
<span class="btn-text30">探</span>
<span class="btn-text30">索</span>
<span class="btn-text30">未</span>
<span class="btn-text30">知</span>
</div>
</div>
</body>
</html>
- CSS部分
.app{
width: 100%;
height: 100vh;
background-color: #ffffff;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.btn30{
height: 42px;
position: relative;
cursor: pointer;
display: flex;
overflow: hidden;
}
.btn-text30{
width: 36px;
height: 42px;
line-height: 42px;
text-align: center;
display: block;
background-color: #457356;
color: #ffffff;
font-size: 16px;
font-weight: 700;
position: relative;
}
.btn-text30:after{
width: 36px;
height: 42px;
position: absolute;
background-color: #3185fa;
color: #ffffff;
z-index: 99;
transition: 0.3s ease-in-out;
}
.btn-text30:nth-of-type(1):after{
content: '学';
top: -42px;
left: 0;
}
.btn-text30:nth-of-type(2):after{
content: '无';
top: 42px;
left: 0px;
}
.btn-text30:nth-of-type(3):after{
content: '止';
top: -42px;
left: 0;
}
.btn-text30:nth-of-type(4):after{
content: '境';
top: 42px;
left: 0px;
}
.btn30:hover .btn-text30:after{
top: 0;
}
呼吸灯按钮
模拟微信发送语音按钮,在按住按钮时增加呼吸灯效果。
实现思路:
- 主体一个 button 标签
- 通过 :hover 和 :active 获取状态,分别设置不同的样式,当按钮按下时,增加 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="btn31">按住说话</button>
</div>
</body>
</html>
- CSS部分
.app{
width: 100%;
height: 100vh;
background-color: #ffffff;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.btn31{
width: 190px;
height: 42px;
cursor: pointer;
border: none;
border-radius: 4px;
background-color: #333;
font-size: 16px;
font-weight: 700;
color: #fff;
transition: 0.3s;
}
.btn31:hover{
background-color: #3185fa;
}
.btn31:active{
animation: btn31-eff 3s linear infinite;
}
@keyframes btn31-eff{
0%{
box-shadow: 0 0 2px #3185fa;
}
50%{
box-shadow: 0 0 40px #3185fa;
}
100%{
box-shadow: 0 0 2px #3185fa;
}
}
新拟态按钮
使用 box-shadow 属性模拟新拟态风格按钮,当鼠标 :hover 悬浮时,通过 transition 过渡效果实现阴影变化丝滑过渡。
实现思路:
- 主体 button 标签
- 给 button 设置 box-shadow 属性,设置外阴影和内阴影,然后 button 按钮增加 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 class="btn32">FUN</button>
</div>
</body>
</html>
- CSS部分
.app{
width: 100%;
height: 100vh;
background-color: #d1d1d1;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.btn32{
height: 70px;
padding: 0 20px;
cursor: pointer;
border: 1px solid rgba(255,255,255,0.8);
border-radius: 10px;
background-color: #f2fff7;
font-size: 32px;
font-weight: 700;
color: #44d431;
box-shadow: 6px 6px 16px rgba(0,0,0,0.2),-6px -6px 16px rgba(255,255,255,0.8),inset 0px 0px 0px rgba(0,0,0,0.2),inset 0px 0px 0px rgba(255,255,255,0.8);
transition: 0.2s;
}
.btn32:hover{
color: #3034d4;
background-color: #f2f3ff;
border: 1px solid rgba(255,255,255,1);
box-shadow: 0px 0px 0px rgba(0,0,0,0.2),0px 0px 0px rgba(255,255,255,0.8),inset 6px 6px 12px rgba(0,0,0,0.2),inset -6px -6px 12px rgba(255,255,255,0.8);
transform: translateY(10px) scale(0.98);
}
暗黑模式切换开关
用css打造一个切换界面暗黑模式的按钮开关。
实现思路:
- 用 label 和 input 标签绘制开关按钮,span 标签绘制简约的月亮和太阳图标
- 通过 :checked 属性选择器获取开关的状态,利用 span 标签通过 box-shadow 属性来实现月亮和太阳图标,然后通过 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">
<label class="label34">
<input class="inp34" type="checkbox">
<span class="check-span34"></span>
</label>
</div>
</body>
</html>
- CSS部分
.app{
width: 100%;
height: 100vh;
background-color: #ffffff;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.label34{
width: 60px;
height: 32px;
position: relative;
cursor: pointer;
}
.inp34{
display: none;
}
.check-span34{
width: 100%;
height: 100%;
display: block;
background-color: #383838;
border: 2px solid #383838;
box-sizing: border-box;
border-radius: 16px;
transition: 0.3s linear;
}
.check-span34:after{
content: '';
width: 22px;
height: 22px;
background-color: #383838;
box-shadow: inset -8px -4px 0 #ffffff;
border-radius: 11px;
position: absolute;
top: 5px;
left: 6px;
box-sizing: border-box;
transition: 0.3s ease-in-out;
}
.inp34:checked + .check-span34{
background-color: #ffffff;
}
.inp34:checked + .check-span34:after{
transform: translateX(26px);
background-color: orange;
box-shadow: none;
}
文字跳动的输入框
当输入框获取焦点准备输入时,让输入框内提示文字跳起来的交互效果。
实现思路:
- 主体 label 和 input 标签,span 标签是模拟输入框内提示文字内容
- 通过 ::focus 和 :valid 伪选择器获取输入框的状态, 给span 标签增加 transition 过渡属性,并且给单独的文字 span 标签添加 transition-delay 属性,分别设置不同的延迟参数,实现每个单独的提示文字依次跳起来的视觉效果
- 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="label35">
<input class="inp35" type="text" required>
<span class="span35-box">
<span class="span35-info">用</span>
<span class="span35-info">户</span>
<span class="span35-info">名</span>
</span>
</label>
</div>
</body>
</html>
- CSS部分
.app{
width: 100%;
height: 100vh;
background-color: #ffffff;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.label35{
width: 180px;
position: relative;
cursor: text;
}
.inp35{
width: 100%;
padding: 0 10px;
height: 42px;
border: 0;
border-bottom: 2px solid #414141;
font-size: 16px;
outline: none;
box-sizing: border-box;
transition: .3s;
}
.span35-box{
width: 100%;
padding: 0 10px;
color: #aaa;
font-size: 16px;
position: absolute;
top: 9px;
box-sizing: border-box;
display: flex;
}
.span35-info{
transition: .3s cubic-bezier(0.5, -0.5, 0.5, 1.5);
}
.span35-info:nth-of-type(2){
transition-delay: 100ms;
}
.span35-info:nth-of-type(3){
transition-delay: 200ms;
}
.inp35:focus + .span35-box .span35-info,.inp35:valid + .span35-box .span35-info{
color: #3034d4;
transform: translateY(-30px);
}
.inp35:focus,.inp35:valid{
border-bottom: 2px solid #3034d4;
}
音频小特效
使用 css3 animation 动画属性模拟实现一个音频节奏变化的小动效。
实现思路:
- 用7个 div 标签,绘制音频节奏谱
- 7个 div 基于 flex 布局,进行底部对齐,让7个 div 标签变化时从底部往上进行高度的变化,然后基于 animation 属性,再设置不同的延迟时间及动画时长,让7个 div 标签在视觉上实现不同的变化频率
- 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="audio-box37">
<div class="audio37-block"></div>
<div class="audio37-block"></div>
<div class="audio37-block"></div>
<div class="audio37-block"></div>
<div class="audio37-block"></div>
<div class="audio37-block"></div>
<div class="audio37-block"></div>
</div>
</div>
</body>
</html>
- CSS部分
.app{
width: 100%;
height: 100vh;
background-color: #ffffff;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.audio-box37{
width: 84px;
height: 32px;
display: flex;
justify-content: space-between;
align-items: flex-end;
}
.audio37-block{
width: 6px;
box-sizing: border-box;
background-color: #97E138;
animation: audio73-eff 2s linear infinite;
box-shadow: 0 -1px 0 #ffffff, 0 -2px 0 #97E138;
}
.audio37-block:nth-of-type(2){
background-color: #FF3A85;
animation-delay: .3s;
animation-duration: 2.4s;
box-shadow: 0 -1px 0 #ffffff, 0 -2px 0 #FF3A85;
}
.audio37-block:nth-of-type(3){
background-color: #A2DAF6;
animation-delay: .38s;
box-shadow: 0 -1px 0 #ffffff, 0 -2px 0 #A2DAF6;
}
.audio37-block:nth-of-type(4){
background-color: #FFD6D0;
animation-delay: .5s;
box-shadow: 0 -1px 0 #ffffff, 0 -2px 0 #FFD6D0;
}
.audio37-block:nth-of-type(5){
background-color: #FF472C;
animation-duration: 2.7s;
box-shadow: 0 -1px 0 #ffffff, 0 -2px 0 #FF472C;
}
.audio37-block:nth-of-type(6){
background-color: #DE74CE;
animation-delay: .6s;
animation-duration: 1.4s;
box-shadow: 0 -1px 0 #ffffff, 0 -2px 0 #DE74CE;
}
.audio37-block:nth-of-type(7){
background-color: #36AFCA;
animation-delay: .8s;
box-shadow: 0 -1px 0 #ffffff, 0 -2px 0 #36AFCA;
}
@keyframes audio73-eff{
0%{
height: 0;
}
50%{
height: 32px;
}
100%{
height: 0;
}
空空如也!