CSS的常用动画
Posted 前端精髓
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS的常用动画相关的知识，希望对你有一定的参考价值。
CSS实现开关
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.check-wrap
margin-bottom: 20px;
text-align: center;
.switch
position: absolute;
clip: rect(0, 0, 0, 0);
label
margin-right: 40px;
font-size: 14px;
.switch-an
position: absolute;
clip: rect(0, 0, 0, 0);
.switch-an[type="checkbox"]+label
position: relative;
display: inline-block;
width: 5em;
height: 2em;
border-radius: 1em;
color: #fff;
background: #06c;
text-align: left;
.switch-an[type="checkbox"]+label::before
content: '';
width: 2em;
height: 2em;
position: absolute;
left: 0;
border-radius: 100%;
vertical-align: middle;
background-color: #fff;
transition: left .3s;
.switch-an[type="checkbox"]+label::after
content: 'OFF';
margin-left: 2.6em;
vertical-align: sub;
.switch-an[type="checkbox"]:checked+label::before
transition: left .3s;
left: 3em;
.switch-an[type="checkbox"]:checked+label::after
content: 'NO';
margin-left: .6em;
</style>
<div class="check-wrap">
<input type="checkbox" class="switch-an" id="switch-an-1" />
<label for="switch-an-1"></label>
</div>
</html>
CSS实现雷达
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.wave
margin-left: auto;
margin-right: auto;
width: 100px;
height: 100px;
border-radius: 100px;
border: 2px solid #fff;
text-align: center;
line-height: 100px;
color: #fff;
background: #06c url(http://p3g4ahmhh.bkt.clouddn.com/me.jpg) no-repeat center center;
background-size: 100%;
animation: wave 4s linear infinite;
@keyframes wave
0%
box-shadow: 0 0 0 0 rgba(245, 226, 226, 1), 0 0 0 0 rgba(250, 189, 189, 1);
50%
box-shadow: 0 0 0 20px rgba(245, 226, 226, .5), 0 0 0 0 rgba(250, 189, 189, 1);
100%
box-shadow: 0 0 0 40px rgba(245, 226, 226, 0), 0 0 0 20px rgba(245, 226, 226, 0);
</style>
<div class="wave"></div>
</html>
CSS 实现加载
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.loading
margin-left: auto;
margin-right: auto;
width: 30px;
height: 30px;
border-radius: 30px;
background-color: transparent;
animation: load 3s linear infinite;
@keyframes load
0%
box-shadow: -40px 0 0 rgba(250, 189, 189, 0), inset 0 0 0 15px rgba(250, 189, 189, 0), 40px 0 0 rgba(250, 189, 189, 0);
30%
box-shadow: -40px 0 0 rgba(250, 189, 189, 1), inset 0 0 0 15px rgba(250, 189, 189, 0), 40px 0 0 rgba(250, 189, 189, 0);
60%
box-shadow: -40px 0 0 rgba(250, 189, 189, 0), inset 0 0 0 15px rgba(250, 189, 189, 1), 40px 0 0 rgba(250, 189, 189, 0);
100%
box-shadow: -40px 0 0 rgba(250, 189, 189, 0), inset 0 0 0 15px rgba(250, 189, 189, 0), 40px 0 0 rgba(250, 189, 189, 1);
</style>
<div class="loading"></div>
</html>
CSS 实现对话框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.odd-shadow
margin-left: auto;
margin-right: auto;
width: 200px;
height: 80px;
border-radius: 8px;
color: #fff;
font-size: 24px;
text-align: center;
line-height: 80px;
background: #06c;
filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, .8))
.odd-shadow::before
content: '';
position: absolute;
display: block;
margin-left: -20px;
transform: translateY(20px);
width: 0;
height: 0;
border: 10px solid transparent;
border-right-color: #06c;
</style>
<div class="odd-shadow">哎呦，猪先森</div>
</html>
CSS实现进度动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.br-31
width: 100px;
height: 100px;
border-radius: 50%;
background: linear-gradient(to right, #f6c 50%, #333 0);
.br-31::before
content: '';
display: block;
margin-left: 50%;
height: 100%;
border-radius: 0 100% 100% 0 / 50%;
background-color: #f6c;
transform-origin: left;
animation: skin 4s linear infinite, bg 8s step-end infinite;
@keyframes skin
to
transform: rotate(.5turn);
@keyframes bg
50%
background: #333;
.br-32::before
animation-play-state: paused;
animation-delay: inherit;
</style>
<div class="br-31 black-theme"></div>
<div class="br-31 br-32 black-theme" style="animation-delay:-1s"></div>
</html>
CSS实现进度条
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.div10
height: 20px;
background: repeating-linear-gradient(45deg,
#30e8bf 25%,
#ff8235 0,
#ff8235 50%,
#30e8bf 0,
#30e8bf 75%,
#ff8235 0);
background-size: 30px 30px;
animation: roll 1s linear infinite;
@keyframes roll
from
background-position-x: 0;
to
background-position-x: 30px;
</style>
<div class="div10"></div>
</html>
CSS实现扫光
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>光亮效果</title>
<style>
.line3
height: 200px;
background: repeating-linear-gradient(to right, #ccc 0%, #fff 3%, #ccc 5%, #ccc 100%);
animation: gogo 2s linear 0s infinite normal;
@keyframes gogo
0%
background-position: 0%;
100%
background-position: 600px;
</style>
</head>
<body>
<div class='line3'></div>
</body>
</html>
CSS实现背景切换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>光亮效果</title>
<style>
.hover-1
background-image: linear-gradient(#1095c1, #1095c1);
background-size: 0 100%;
background-repeat: no-repeat;
transition: .4s;
.hover-1:hover
background-size: 100% 100%;
body
height: 100vh;
margin: 0;
display: grid;
gap: 20px;
place-content: center;
h3
font-family: system-ui, sans-serif;
font-size: 3rem;
margin: 0;
cursor: pointer;
padding: 0 .07em;
</style>
</head>
<body>
<h3 class="hover-1">Hover Me</h3>
</body>
</html>
以上是关于CSS的常用动画的主要内容，如果未能解决你的问题，请参考以下文章