Home

JS special effects

CSS3 special effects

Solar eclipse animation special effects made with CSS3

Download Now Preview

<head>
<meta charset="utf-8">
<title>逼真的CSS3日食动画特效</title>

<style>
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-animation: skyDim 4s 8s linear forwards;
animation: 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-animation: starsFloating 100s -200s linear both infinite;
animation: 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-animation: starsFloating 100s 3s linear backwards infinite;
animation: 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-animation: sunFreakOut 5s 7.1s linear forwards;
animation: 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-animation: move 20s ease-in-out forwards;
animation: move 20s ease-in-out forwards;
}

@-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);
}
}
</style>
</head>

这是一款非常逼真的使用纯CSS3实现的一个天狗食月日食动画特效，当日全食时，还有背景星星闪烁动画特效，效果很漂亮

Disclaimer

All resources on this site are contributed by netizens or reprinted by major download sites. Please check the integrity of the software yourself! All resources on this site are for learning reference only. Please do not use them for commercial purposes. Otherwise, you will be responsible for all consequences! If there is any infringement, please contact us to delete it. Contact information: admin@php.cn