纯css实现那些超炫酷的动画效果
Posted 水星记_
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了纯css实现那些超炫酷的动画效果相关的知识，希望对你有一定的参考价值。
前言
现如今网页越来越趋近于动画，相信大家平时浏览网页或多或少都能看到一些动画效果，那其实大家看到的动画其实很大一部分都是通过js或者插件实现的，但你知道吗，我们所熟知的css就可以制作炫酷的动画效果，嗯？css?是的，你没有听错，就是css，下面分享的几款动画效果就是用css实现的，一起看看吧。
1.仿抖音进入直播间的动画效果
上代码
<template>
<div class="html body">
<div class="fatherBox">
<div class="buttonLight">点击进入直播间</div>
</div>
</div>
</template>
<script>
export default
data()
return
,
</script>
<style scoped>
.html
padding: 20px;
background-color: cornflowerblue;
height: 100vh;
/* @keyframes：定义一个动画
shineLight：自定义一个动画名称 */
@keyframes shineLight
0%
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);/* 添加开始阴影并设置透明度 */
100%
box-shadow: 0 0 0 12px rgba(255, 255, 255, 0);/* 添加结束阴影并设置透明度 */
.fatherBox
width: 100%;
display: flex;
justify-content: center;
.buttonLight
/* animation：规定完成动画所花费的时间，该属性必须规定，否则动画时长为0，无法播放 */
animation: shineLight 1.8s infinite;
font-size: 14px;
padding: 6px 16px;
color: white;
border: 1px solid;
border-radius: 20px;
display: flex;
justify-content: center;
align-items: center;
</style>
2.加载动画
上代码
<template>
<div class="html body">
<div class="loading load">
<div class="loaderContant"></div>
</div>
</div>
</template>
<script>
export default
data()
return
,
</script>
<style scoped>
.html
padding: 20px;
background-color: cornflowerblue;
height: 100vh;
.loading
padding: 40px;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
.load .loaderContant
color: white;
font-size: 40px;
overflow: hidden;
width:40px;
height: 40px;
border-radius: 50%;
transform: translateZ(0);
/* animation：规定完成动画所花费的时间，该属性必须规定，否则动画时长为0，无法播放 */
animation: load 1.7s infinite ease, round 1.7s infinite ease;
@keyframes load
0%
box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
5%,
95%
box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
10%,
59%
box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em;
20%
box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em;
38%
box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em;
100%
box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
@keyframes round
0%
transform: rotate(0deg);/* 开始旋转 div 元素 */
100%
transform: rotate(360deg);/* 结束旋转 div 元素 */
</style>
3.文字抖动动画
上代码
<template>
<div class="html body">
<div class="fatherBox">
<div class="shake-joggle">点击进入直播间</div>
</div>
</div>
</template>
<script>
export default
data()
return
,
</script>
<style scoped>
.html
padding: 30px;
background-color: cornflowerblue;
height: 100vh;
.fatherBox
display: flex;
justify-content: center;
color: white;
font-weight: bold;
/* @keyframes：定义一个动画
shake-joggle：自定义一个动画名称 */
@keyframes shake-joggle
2%
transform: translate(6px, -2px) rotate(3.5deg);
4%
transform: translate(5px, 8px) rotate(-0.5deg);
6%
transform: translate(6px, -3px) rotate(-2.5deg);
8%
transform: translate(4px, -2px) rotate(1.5deg);
10%
transform: translate(-6px, 8px) rotate(-1.5deg);
12%
transform: translate(-5px, 5px) rotate(1.5deg);
14%
transform: translate(4px, 10px) rotate(3.5deg);
16%
transform: translate(0px, 4px) rotate(1.5deg);
18%
transform: translate(-1px, -6px) rotate(-0.5deg);
20%
transform: translate(6px, -9px) rotate(2.5deg);
22%
transform: translate(1px, -5px) rotate(-1.5deg);
24%
transform: translate(-9px, 6px) rotate(-0.5deg);
26%
transform: translate(8px, -2px) rotate(-1.5deg);
28%
transform: translate(2px, -3px) rotate(-2.5deg);
30%
transform: translate(9px, -7px) rotate(-0.5deg);
32%
transform: translate(8px, -6px) rotate(-2.5deg);
34%
transform: translate(-5px, 1px) rotate(3.5deg);
36%
transform: translate(0px, -5px) rotate(2.5deg);
38%
transform: translate(2px, 7px) rotate(-1.5deg);
40%
transform: translate(6px, 3px) rotate(-1.5deg);
42%
transform: translate(1px, -5px) rotate(-1.5deg);
44%
transform: translate(10px, -4px) rotate(-0.5deg);
46%
transform: translate(-2px, 2px) rotate(3.5deg);
48%
transform: translate(3px, 4px) rotate(-0.5deg);
50%
transform: translate(8px, 1px) rotate(-1.5deg);
52%
transform: translate(7px, 4px) rotate(-1.5deg);
54%
transform: translate(10px, 8px) rotate(-1.5deg);
56%
transform: translate(-3px, 0px) rotate(-0.5deg);
58%
transform: translate(0px, -1px) rotate(1.5deg);
60%
transform: translate(6px, 9px) rotate(-1.5deg);
62%
transform: translate(-9px, 8px) rotate(0.5deg);
64%
transform: translate(-6px, 10px) rotate(0.5deg);
66%
transform: translate(7px, 0px) rotate(0.5deg);
68%
transform: translate(3px, 8px) rotate(-0.5deg);
70%
transform: translate(-2px, -9px) rotate(1.5deg);
72%
transform: translate(-6px, 2px) rotate(1.5deg);
74%
transform: translate(-2px, 10px) rotate(-1.5deg);
76%
transform: translate(2px, 8px) rotate(2.5deg);
78%
transform: translate(6px, -2px) rotate(-0.5deg);
80%
transform: translate(6px, 8px) rotate(0.5deg);
82%
transform: translate(10px, 9px) rotate(3.5deg);
84%
transform: translate(-3px, -1px) rotate(3.5deg);
86%
transform: translate(1px, 8px) rotate(-2.5deg);
88%
transform: translate(-5px, -9px) rotate(2.5deg);
90%
transform: translate(2px, 8px) rotate(0.5deg);
92%
transform: translate(0px, -1px) rotate(1.5deg);
94%
transform: translate(-8px, -1px) rotate(0.5deg);
96%
transform: translate(-3px, 8px) rotate(-1.5deg);
98%
transform: translate(4px, 8px) rotate(0.5deg);
0%,
100%
transform: translate(0, 0) rotate(0);
.shake-joggle
/* animation：规定完成动画所花费的时间，该属性必须规定，否则动画时长为0，无法播放 */
animation: shake以上是关于纯css实现那些超炫酷的动画效果的主要内容，如果未能解决你的问题，请参考以下文章
肝了一宿才收集的48个超炫酷的 CSS 文字特效，绝对值得收藏！！！