前言
现如今网页越来越趋近于动画，相信大家平时浏览网页或多或少都能看到一些动画效果，那其实大家看到的动画其实很大一部分都是通过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-joggle 5s infinite ease-in-out;
}
</style>
4.文字缩放动画
上代码
<template>
<div class="html body">
<div class="fatherBox">
<div class="scaletext">点击进入直播间</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
}
},
}
</script>
<style scoped>
.html {
padding: 30px;
background-color: cornflowerblue;
height: 100vh;
}
@keyframes zoomMeans {
40% {
opacity: 1;
transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
to {
opacity: 0;
transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
}
}
.scaletext {
/* animation：规定完成动画所花费的时间，该属性必须规定，否则动画时长为0，无法播放 */
animation: 2s linear 0s infinite alternate zoomMeans;
font-family: Arial;
font-size: 18px;
font-weight: bold;
color: white;
margin-top: 70px;
text-align: center;
margin-top: 15px;
}
</style>
5.融合效果
上代码
<template>
<div>
<div class="container">
<div class="filter-mix"></div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
}
},
}
</script>
<style>
.filter-mix {
/* 最大的盒子的样式 */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 300px;
height: 200px;
filter: contrast(20);
background: #fff;
}
.filter-mix::before {
/* 大球的样式 */
content: "";
position: absolute;
width: 120px;
height: 120px;
border-radius: 50%;
background: olive;
top: 40px;
left: 80px;
z-index: 2;
filter: blur(6px);
box-sizing: border-box;
/* animation：规定完成动画所花费的时间，该属性必须规定，否则动画时长为0，无法播放 */
animation: filterBallMove 4s ease-out infinite;
}
.filter-mix::after {
/* 小球的样式 */
content: "";
position: absolute;
width: 80px;
height: 80px;
border-radius: 50%;
background: green;
top: 60px;
right: 40px;
z-index: 2;
filter: blur(6px);
/* animation：规定完成动画所花费的时间，该属性必须规定，否则动画时长为0，无法播放 */
animation: filterBallMove2 4s ease-out infinite;
}
/* @keyframes：定义一个动画
filterBallMove：自定义一个动画名称 */
@keyframes filterBallMove {
50% {
left: 140px;
}
}
/* @keyframes：定义一个动画
filterBallMove2：自定义一个动画名称 */
@keyframes filterBallMove2 {
50% {
right: 140px;
}
}
</style>
还可以这样
上代码
<template>
<div>
<div class="container">
<h1>Blur word Animation</h1>
</div>
</div>
</template>
<script>
export default {
data() {
return {
}
},
}
</script>
<style>
html,
body {
height: 100%;
width: 100%;
background-color: black;
}
.container {
width: 100%;
height: 100%;
position: relative;
padding: 4em;
filter: contrast(20);
background-color: black;
overflow: hidden;
}
h1 {
font-family: Righteous;
color: white;
font-size: 4rem;
text-transform: uppercase;
line-height: 1;
animation: letterspacing 3s infinite alternate ease-in-out;
display: block;
position: absolute;
left: 50%;
top: 50%;
transform: translate3d(-50%, -50%, 0);
letter-spacing: -2.2rem;
}
@keyframes letterspacing {
0% {
letter-spacing: -2.4rem;
filter: blur(.3rem);
}
50% {
filter: blur(.5rem);
}
100% {
letter-spacing: .5rem;
filter: blur(0rem);
color: #fff;
}
}
</style>
这样
上代码
<template>
<div>
<div class="g-container">
<div class="word">iPhone</div>
<div class="word">13</div>
<div class="word">Pro</div>
<div class="word">强得很！</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
}
},
}
</script>
<style lang="scss" scoped>
$speed: 8s;
$wordCount: 4;
.g-container {
position: relative;
width: 100vw;
height: 100vh;
background: #000;
font-family: 'Montserrat', sans-serif;
color: #fff;
font-size: 120px;
filter: contrast(15);
}
.word {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation: change $speed infinite ease-in-out;
@for $i from 0 to $wordCount {
&:nth-child(#{
$i + 1}) {
animation-delay: ($speed / ($wordCount + 1) * $i) - $speed;
}
}
}
@keyframes change {
0%,
5%,
100% {
filter: blur(0px);
opacity: 1;
}
50%,
80% {
filter: blur(80px);
opacity: 0;
}
}
</style>