<template>
<div class="sun_style">
<div class="sun"></div>
</div>
</template>
<script>
export default {
name: "temp"
}
</script>
<style scoped>
.sun_style {
position: relative;
height: 50vh;
}
.sun {
position: absolute;
width: 150px;
height: 150px;
left: 45%;
top: 20%;
border-radius: 50%;
background: #f8e353;
}
.sun::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 150px;
height: 150px;
border-radius: 50%;
background: #ff5959;
filter: blur(10px);
z-index: 1;
animation: inlineSun 5s ease infinite;
}
.sun::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 180px;
height: 180px;
border-radius: 50%;
background: #f8e353;
z-index: -1;
box-shadow: 0 0 40px #ff0000;
animation: sun 5s ease-in infinite;
}
@keyframes inlineSun {
0% {
opacity: 1;
}
50% {
opacity: 0.5;
width: 70px;
height: 70px;
}
100% {
opacity: 1;
}
}
@keyframes sun {
0% {
box-shadow: 0 0 90px #ff0000;
}
50% {
box-shadow: 0 0 30px #ff0000;
}
100% {
box-shadow: 0 0 90px #ff0000;
}
}
</style>
css太阳动画
于 2024-04-26 14:52:52 首次发布