css太阳动画

PinelliaLogic

已于 2024-05-10 11:05:00 修改

阅读量62

点赞数 1

分类专栏：前端文章标签： css 前端

于 2024-04-26 14:52:52 首次发布

本文链接：https://blog.csdn.net/m0_55649935/article/details/138218901

版权

前端专栏收录该内容

12 篇文章 0 订阅

订阅专栏

<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>