css3动画学习之太阳与月亮

最新推荐文章于 2023-05-30 18:43:39 发布

井底的蜗牛

最新推荐文章于 2023-05-30 18:43:39 发布

阅读量211

点赞数

分类专栏： css3+html5 文章标签： css3

本文链接：https://blog.csdn.net/weixin_41277748/article/details/117234015

版权

css3+html5 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

上代码

<!DOCTYPE html>
<html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>太阳的升起与降落</title>
    </head>
    <body>
    <div class="space"></div>
    <div class="sun"></div>
    <div class="moon"></div>
    </body>
    <style>
          *{
            margin: 0;
            padding: 0;
          }
          body{
            background-color: #000;
          }
          @keyframes space-change {
            0%{
              opacity: .3;
            }
            25%{
              opacity: 1;
            }
            50%{
              opacity: .3;
            }
            75%{
              opacity: .1;
            }
            100%{
              opacity: .3;
            }
          }
          @keyframes sunrise {
            0%{
              opacity: 0;
            }
            10%{
              opacity: 1;
              transform: scale(.7,.7) translateX(0) translateY(0);
            }
            30%{
              opacity: 1;
              transform: scale(.5,.5) translateX(0) translateY(-600px);
            }
            50%{
              opacity: 0;
              transform: scale(.7,.7) translateX(0) translateY(0);
            }
            100%{
              opacity: 0;
            }
          }
          @keyframes moonrise {
            0%{
              opacity: 0;
            }
            50%{
              opacity: 0;
              transform: translateY(0);
            }
            75%{
              transform: translateY(-300px);
              opacity: 1;
            }
            80%{
              transform: translateY(-300px);
              opacity: 1;
            }
            90%{
              opacity: 0;
            }
            100%{
              transform: translateY(0);
              opacity: 0;
            }
          }
          .sun{
            position: absolute;
            left:30%;
            top:70%;
            width: 100px;
            height: 100px;
            transform: scale(.5,.5);
            background: #fff;
            border-radius: 50%;
            box-shadow: 0 0 100px 80px #fff,
            0 0 150px 125px #ff0;
            animation: sunrise 20s infinite;
          }
          .moon{
            position: absolute;
            left: 30%;
            top: 70%;
            width: 100px;
            height: 100px;
            background-color: #fff;
            border-radius: 50%;
            box-shadow: 0 0 8px #fff,inset 0 0 8px #000;
            animation: moonrise 20s cubic-bezier(0,0,.5,.5) infinite;
          }
          .moon::after{
            content: '';
            position: absolute;
            width: 90px;
            height: 90px;
            background-color: #000;
            border-radius: 50%;
            left: -10px;
            top: -10px;
        
        }
        .space{
        height: 100vh;
        background-image: linear-gradient(to bottom, rgba(0,130,255,1),rgba(255,255,255,1));
        animation: space-change 20s cubic-bezier(.5,0,.5,1) infinite;
        }
    </style>
</html>

井底的蜗牛

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
css3动画学习之太阳与月亮

上代码<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>太阳的升起与降落</title> </head> <body> <div class="space"></div> <div class="sun"></..
复制链接

扫一扫