纯css实现那些超炫酷的动画效果
前⾔
现如今⽹页越来越趋近于动画，相信⼤家平时浏览⽹页或多或少都能看到⼀些动画效果，那其实⼤家看到的动画其实很⼤⼀部分都是通过js或者插件实现的，但你知道吗，我们所熟知的css就可以制作炫酷的动画效果，嗯？css?是的，你没有听错，就是css，下⾯分享的⼏款动画效果就是⽤css实现的，⼀起看看吧。
1.仿抖⾳进⼊直播间的动画效果
上代码
<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:0000rgba(255,255,255,0.4);/* 添加开始阴影并设置透明度 */
}
100%{
box-shadow:00012px 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;
borderboxcolor: white;
border:1px solid;
border-radius:20px;
display: flex;
justify-content: center;
align-items: center;
}
</style>
上代码
<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%,
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 {
.
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); }
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论