超级月亮css

我爱摸鱼～

已于 2023-08-08 17:11:56 修改

阅读量96

点赞数 1

分类专栏： HTML+CSS+JS例子文章标签： css 前端

于 2023-08-08 13:51:10 首次发布

本文链接：https://blog.csdn.net/qq_44893424/article/details/132165309

版权

HTML+CSS+JS例子专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  body{
    background-color: #000;
  }
  .ball{
    width: 200px;
    height: 200px;
    background-color: pink;
    border-radius: 50%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    box-shadow: 0 0 20px #fff,
                -10px 0 80px #ff0,
                -10px 0 40px #ff2039,
                inset 0 0 50px #fff,
                inset -50px 0 80px #ff0,
                inset 20px 0 50px #ff2039,
                inset -50px 0 200px #ff0,
                inset 20px 0 50px #ff2039;
              }
    .ball{
      animation: sun 6s ease-in-out infinite;
    }
    .ball img{
      height: 270px;
      width: 270px;
      position: absolute;
      top: -39px;
      left: -39px;
      z-index: 4;
      opacity: 0.5;
    }
  @keyframes sun{
    50%{
      box-shadow: 0 0 50px #fff,
                  -10px 0 80px #ff2039,
                  -10px 0 80px #ff0,
                  inset 0 0 50px #fff,
                  inset -50px 0 80px #ff0,
                  inset 50px 0 80px #ff2039,
                  inset -50px 0 200px #ff2039,
                  inset 50px 0 200px #ff0;
    }
  }
</style>
<body>
  <div class="ball">
    <img src="./月亮.png" alt="">
  </div>
</body>
</html>

在这里插入图片描述