前言
现如今网页越来越趋近于动画,相信大家平时浏览网页或多或少都能看到一些动画效果,那其实大家看到的动画其实很大一部分都是通过js或者插件实现的,但你知道吗,我们所熟知的css就可以制作炫酷的动画效果,下面一起看看吧。
看代码:
<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>
<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>
<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>
原文地址:https://blog.csdn.net/xybhua/article/details/128488555
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.7code.cn/show_31424.html
如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱:suwngjj01@126.com进行投诉反馈,一经查实,立即删除!
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。