CSS动画模拟太阳日出日落

先上效果

html结构

<div class="sunBackBox">
    <div class="sunRotateBox">
         <div class="sun"></view>
    </div>
</div>

CSS

不用计算半圆路径，不用一直改变定位位置，偷个懒实现同样的效果，留更多时间学习（摸鱼）不舒服嘛！

 .sunBackBox {
            width: 600px;
            height: 400px;
            background: url('../images/sunBack.png') no-repeat center center / 100% 100%;
            margin: 50px auto;
            position: relative;
            overflow: hidden;
            animation: sunShadow 20s infinite linear;

        }

        .sunRotateBox {
            position: absolute;
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
            bottom: 0;
            right: 0;
            transform-origin: 50% 100%;
            animation: sunMove 20s infinite linear;
        }

        .sun {
            position: absolute;
            width: 80px;
            height: 80px;
            border-radius: 50%;
            bottom: -10px;
            left: -25px;
            background: url('../images/sun.png') no-repeat center center / cover;
        }

        @keyframes sunMove {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(180deg);
            }
        }

        @keyframes sunShadow {
            from {
                box-shadow: 0px 5px 9px 200px rgba(0, 0, 0, 0) inset;
            }

            to {
                box-shadow: 0px 5px 9px 200px rgba(0, 0, 0, .35) inset;
            }
        }