CSS3で作った日食アニメーション特殊効果

<頭>
<メタ文字セット="utf-8">
<title>逼真的CSS3日食アニメーション画特效</title>

<スタイル>
html、本文{
幅: 100%;
オーバーフロー-x: 非表示;
}

*、 *：ビフォアーアフター {＃＃＃ ボックスのサイズ設定: ボーダーボックス;
マージン: 0;
パディング: 0;
}

。宇宙 {＃＃＃ 幅: 100vw;
高さ: 100vh;
背景: #030613;
表示ブロック;＃＃＃ 位置: 相対;
-webkit-animation: skyDim 4s 8s リニアフォワード;
アニメーション: skyDim 4s 8s リニアフォワード;
}

.universe:前 {
コンテンツ： "";＃＃＃ ボックスシャドウ: 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;
幅: 4px;
高さ: 4px;
位置: 絶対;
境界半径: 50%;
-webkit-animation: スター浮動 100 秒 -200 秒リニア両方無限;
アニメーション: スター浮遊 100 秒 -200 秒リニア両方無限;
}

.universe:{
の後 コンテンツ： "";＃＃＃ ボックスシャドウ: 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;
幅: 2px;
高さ: 2px;
位置: 絶対;
境界半径: 50%;
-webkit-animation: スターフローティング 100 秒 3 秒 リニア後方無限;
アニメーション: スターフローティング 100 秒 3 秒 リニア後方無限;
}

。太陽 {＃＃＃ 高さ: 200px;
幅: 200px;
境界半径: 50%;
背景: #cfcfd4;
ボックスシャドウ: 0 0 60px ゴールド、0 0 100px #b9a018、インセット 0 5px 35px 53px #dbdbdb、インセット 48px 8px 34px 25px #c4c4c4;
左: calc(50% - 100px);
上: calc(50% - 100px);
位置: 絶対;
-webkit-animation: sunFreakOut 5 秒 7.1 秒のリニアフォワード;
アニメーション: sunFreakOut 5 秒 7.1 秒のリニアフォワード;
}

。月 {＃＃＃ 高さ: 50px;
幅: 50px;
境界半径: 50%;
背景: rgba(0, 0, 0, 0.99);
ボックスシャドウ: インセット 5px 1px 10px -8px #d4d4d6;
-webkit-transition: 1s;
トランジション: 1 秒;
上: calc(40% - 100px);
位置: 絶対;
z インデックス: 5;
-webkit-animation: 20 秒のイーズインアウトを前方に移動します;
アニメーション: 20 秒のイーズインアウトを前方に移動します;
}

@-webkit-keyframes は {
を移動します 0% {
-webkit-transform:translateX(100vw);
変換:translateX(100vw);
}
40%、60% {
上: calc(50% - 100px);
}
50%、50.5% {
幅: 200px;
高さ: 200px;
-webkit-transform:translateX(calc(50vw - 100px));
変換:translateX(calc(50vw - 100px));
ボックスシャドウ: インセット 20px 1px 35px -15px #d4d4d6;
上: calc(50% - 100px);
}
60% {
ボックスシャドウ: インセット -20px 1px 35px -15px #d4d4d6;
}
100% {
幅: 50px;
高さ: 50px;
-webkit-transform:translateX(calc(-1vw - 60px));
変換:translateX(calc(-1vw - 60px));
上: calc(40% - 100px);
ボックスシャドウ: インセット -5px 1px 10px -8px #d4d4d6;
}
}

@keyframes 移動 {
0% {
-webkit-transform:translateX(100vw);
変換:translateX(100vw);
}
40%、60% {
上: calc(50% - 100px);
}
50%、50.5% {
幅: 200px;
高さ: 200px;
-webkit-transform:translateX(calc(50vw - 100px));
変換:translateX(calc(50vw - 100px));
ボックスシャドウ: インセット 20px 1px 35px -15px #d4d4d6;
上: calc(50% - 100px);
}
60% {
ボックスシャドウ: インセット -20px 1px 35px -15px #d4d4d6;
}
100% {
幅: 50px;
高さ: 50px;
-webkit-transform:translateX(calc(-1vw - 60px));
変換:translateX(calc(-1vw - 60px));
上: calc(40% - 100px);
ボックスシャドウ: インセット -5px 1px 10px -8px #d4d4d6;
}
}
@-webkit-keyframes スカイディム {
0%、100% {
背景: #030613;
}
50%、70% {
背景: 黒;
}
}
@keyframes スカイディム {
0%、100% {
背景: #030613;
}
50%、70% {
背景: 黒;
}
}
@-webkit-keyframes sunFreakOut {
0%、100% {
ボックスシャドウ: 0 0 60px ゴールド、0 0 100px #b9a018、インセット 0 5px 35px 53px #dbdbdb、インセット 48px 8px 34px 25px #c4c4c4;
}
50%、70% {
ボックスシャドウ: 0 0 50px #e30000、0 0 0px #b91818、インセット 0 5px 35px 53px #dbdbdb、インセット 48px 8px 34px 25px #c4c4c4;
}
}
@keyframessunFreakOut {
0%、100% {
ボックスシャドウ: 0 0 60px ゴールド、0 0 100px #b9a018、インセット 0 5px 35px 53px #dbdbdb、インセット 48px 8px 34px 25px #c4c4c4;
}
50%、70% {
ボックスシャドウ: 0 0 50px #e30000、0 0 0px #b91818、インセット 0 5px 35px 53px #dbdbdb、インセット 48px 8px 34px 25px #c4c4c4;
}
}
@-webkit-keyframes スターフローティング {
0% {
不透明度: 0;
}
10% {
不透明度: 1;
}
100% {
-webkit-transform:translateY(-100vh);
変換:translateY(-100vh);
}
}
@keyframesstarFloating {
0% {
不透明度: 0;
}
10% {
不透明度: 1;
}
100% {
-webkit-transform:translateY(-100vh);
変換:translateY(-100vh);
}
}
</style>
</head>

これは非常に緊迫した使用纯CSS3实现的天狗食月日食アニメーション画特效，当日全食時，还有背景星星闪烁アニメーション画特效，效果很漂亮