CSS3日食动画

新建html文档。

书写hmtl代码。

书写css代码。html, body { width: 100%; overflow-x: hidden; }*, *:before, *:after { box-sizing: border-box; margin: 0; padding: 0; }.universe { width: 100vw; height: 100vh; background: #030613; display: block; position: relative; -webkit-ani   mation: skyDim 4s 8s linear forwards; ani   mation: skyDim 4s 8s linear forwards; }.universe:before { content: ''; box-shadow: 10vw 1vh #fff, 14vw 29vh 2px #FFF, 23vw 34vh 1px #FFF, 1vw 99vh 1px #FFF, 20vw 80vh #FFF, 90vw 10vh 2px #fff, 55vw 9vh #FFF, 24vw 4vh 1px #FFF, 50vw 99vh 1px #FFF, 74vw 40vh 1px #FFF, 80vw 9vh 1px #FFF, 20vw 80vh #FFF, 85vw 78vh #fff; width: 4px; height: 4px; position: absolute; border-radius: 50%; -webkit-ani   mation: starsFloating 100s -200s linear both infinite; ani   mation: starsFloating 100s -200s linear both infinite; }.universe:after { content: ''; box-shadow: 37vw 78vh #fff, 17vw 69vh #FFF, 68vw 4vh 1px #FFF, 98vw 9vh 1px #FFF, 45vw 67vh #FFF, 95vw 1vh 2px #fff, 35vw 75vh 2px #FFF, 44vw 47vh 1px #FFF, 54vw 5vh 1px #FFF, 22vw 29vh 1px #FFF, 39vw 71vh 1px #FFF, 11vw 11vh #FFF, 88vw 82vh #fff; width: 2px; height: 2px; position: absolute; border-radius: 50%; -webkit-ani   mation: starsFloating 100s 3s linear backwards infinite; ani   mation: starsFloating 100s 3s linear backwards infinite; }.sun { height: 200px; width: 200px; border-radius: 50%; background: #cfcfd4; box-shadow: 0 0 60px gold, 0 0 100px #b9a018, inset 0 5px 35px 53px #dbdbdb, inset 48px 8px 34px 25px #c4c4c4; left: calc(50% - 100px); top: calc(50% - 100px); position: absolute; -webkit-ani   mation: sunFreakOut 5s 7.1s linear forwards; ani   mation: sunFreakOut 5s 7.1s linear forwards; }.moon { height: 50px; width: 50px; border-radius: 50%; background: rgba(0, 0, 0, 0.99); box-shadow: inset 5px 1px 10px -8px #d4d4d6; -webkit-transition: 1s; transition: 1s; top: calc(40% - 100px); position: absolute; z-index: 5; -webkit-ani   mation: move 20s ease-in-out forwards; ani   mation: move 20s ease-in-out forwards; }

书写css3动画代码。 @-webkit-keyframes move {  0% { -webkit-transform: translateX(100vw); transform: translateX(100vw);} 40%, 60% { top: calc(50% - 100px);} 50%, 50.5% { width: 200px; height: 200px; -webkit-transform: translateX(calc(50vw - 100px)); transform: translateX(calc(50vw - 100px)); box-shadow: inset 20px 1px 35px -15px #d4d4d6; top: calc(50% - 100px);} 60% { box-shadow: inset -20px 1px 35px -15px #d4d4d6;} 100% { width: 50px; height: 50px; -webkit-transform: translateX(calc(-1vw - 60px)); transform: translateX(calc(-1vw - 60px)); top: calc(40% - 100px); box-shadow: inset -5px 1px 10px -8px #d4d4d6;}} @keyframes move {  0% { -webkit-transform: translateX(100vw); transform: translateX(100vw);} 40%, 60% { top: calc(50% - 100px);} 50%, 50.5% { width: 200px; height: 200px; -webkit-transform: translateX(calc(50vw - 100px)); transform: translateX(calc(50vw - 100px)); box-shadow: inset 20px 1px 35px -15px #d4d4d6; top: calc(50% - 100px);} 60% { box-shadow: inset -20px 1px 35px -15px #d4d4d6;} 100% { width: 50px; height: 50px; -webkit-transform: translateX(calc(-1vw - 60px)); transform: translateX(calc(-1vw - 60px)); top: calc(40% - 100px); box-shadow: inset -5px 1px 10px -8px #d4d4d6;}}@-webkit-keyframes skyDim {  0%, 100% { background: #030613;} 50%, 70% { background: black;}}@keyframes skyDim {  0%, 100% { background: #030613;} 50%, 70% { background: black;}}@-webkit-keyframes sunFreakOut {  0%, 100% { box-shadow: 0 0 60px gold, 0 0 100px #b9a018, inset 0 5px 35px 53px #dbdbdb, inset 48px 8px 34px 25px #c4c4c4;} 50%, 70% { box-shadow: 0 0 50px #e30000, 0 0 0px #b91818, inset 0 5px 35px 53px #dbdbdb, inset 48px 8px 34px 25px #c4c4c4;}}@keyframes sunFreakOut {  0%, 100% { box-shadow: 0 0 60px gold, 0 0 100px #b9a018, inset 0 5px 35px 53px #dbdbdb, inset 48px 8px 34px 25px #c4c4c4;} 50%, 70% { box-shadow: 0 0 50px #e30000, 0 0 0px #b91818, inset 0 5px 35px 53px #dbdbdb, inset 48px 8px 34px 25px #c4c4c4;}}@-webkit-keyframes starsFloating {  0% { opacity: 0;} 10% { opacity: 1;} 100% { -webkit-transform: translateY(-100vh); transform: translateY(-100vh);}}@keyframes starsFloating {  0% { opacity: 0;} 10% { opacity: 1;} 100% { -webkit-transform: translateY(-100vh); transform: translateY(-100vh);}}

代码整体结构。

查看效果。