前言
现如今网页越来越趋近于动画，相信大家平时浏览网页或多或少都能看到一些动画效果，那其实大家看到的动画其实很大一部分都是通过js或者插件实现的，但你知道吗，我们所熟知的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>
