css实现模拟日全食动画过程代码
代码语言：html
所属分类：动画
代码描述：css实现模拟日全食动画过程代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
*, *::before, *::after {
font-family: inherit;
box-sizing: inherit;
margin: 0;
padding: 0;
}
html {
box-sizing: border-box;
font-family: 'Nunito Sans', sans-serif;
font-size: 62.5%;
}
html body {
font-size: 1.6rem;
margin: 0;
}
ul {
list-style: none;
}
a, a:link, a:visited {
text-decoration: none;
}
</style>
<style>
body {
height: 100vh;
overflow: hidden;
background-color: #000;
}
main {
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
}
main::before {
content: "";
position: absolute;
display: block;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 1;
-webkit-animation: color-switch 20s cubic-bezier(0.3, 0, 0.7, 1) both infinite;
animation: color-switch 20s cubic-bezier(0.3, 0, 0.7, 1) both infinite;
mix-blend-mode: screen;
}
main .star-wrapper {
position: absolute;
width: 100%;
height: 100%;
position: relative;
}
main .star-wrapper .star {
--hue: 0;
--brightness: 80%;
position: absolute;
width: 2px;
height: 2px;
border-radius: 2px;
background-color: hsl(var(--hue), 10%, var(--brightness));
}
main .star-wrapper .star:nth-child(1) {
top: 27.0379218245%;
left: 11.7007061648%;
--hue: 43.4771178561deg;
--brightness: 49.3486688936%;
}
main .star-wrapper .star:nth-child(2) {
top: 74.9172930933%;
left: 60.4552425443%;
--hue: 42.0460605679deg;
--brightness: 34.9476832896%;
}
main .star-wrapper .star:nth-child(3) {
top: 63.6100419614%;
left: 64.8417546325%;
--hue: 354.2901129208deg;
--brightness: 40.978447333%;
}
main .star-wrapper .star:nth-child(4) {
top: 78.1161287865%;
left: 20.554662663%;
--hue: 2.0655131902deg;
--brightness: 66.3884075017%;
}
main .star-wrapper .star:nth-child(5) {
top: 40.7785297859%;
left: 96.842212369%;
--hue: 159.0685529112deg;
--brightness: 59.6160411819%;
}
main .star-wrapper .star:nth-child(6) {
top: 95.8700155474%;
left: 92.4214493263%;
--hue: 96.461135313deg;
--brightness: 11.3341213117%;
}
main .star-wrapper .star:nth-child(7) {
top: 19.3462157884%;
left: 58.7234457082%;
--hue: 237.9403949889deg;
--brightness: 12.3071161292%;
}
main .star-wrapper .star:nth-child(8) {
top: 62.1442258282%;
left: 92.4204680168%;
--hue: 260.1664119782deg;
--brightness: 49.2479630631%;
}
main .star-wrapper .star:nth-child(9) {
top: 7.7121372098%;
left: 55.0633359575%;
--hue: 155.1928256768deg;
--brightness: 49.9062296258%;
}
main .star-wrapper .star:nth-child(10) {
top: 88.8604324639%;
left: 19.1755944767%;
--hue: 107.9122904944deg;
--brightness: 51.180547386%;
}
main .star-wrapper .star:nth-child(11) {
top: 19.2270433549%;
left: 51.0580568626%;
--hue: 225.8850463585deg;
--brightness: 35.7716749576%;
}
main .star-wrapper .star:nth-child(12) {
top: 43.5659383397%;
left: 63.5450896681%;
--hue: 341.7739495484deg;
--brightness: 60.394054837%;
}
main .star-wrapper .star:nth-child(13) {
top: 26.5399708453%;
left: 99.863278139%;
--hue: 127.6425462065deg;
--brightness: 63.3153863464%;
}
main .star-wrapper .star:nth-child(14) {
top: 6.0937113213%;
left: 41.2528600877%;
--hue: 337.2415010703deg;
--brightness: 47.0468718658%;
}
main .star-wrapper .star:nth-child(15) {
top: 20.6525512619%;
left: 56.4985943364%;
--hue: 85.1066464328deg;
--brightness: 44.11819392%;
}
main .star-wrapper .star:nth-child(16) {
top: 24.3612668056%;
left: 83.6793545478%;
--hue: 300.5440624949deg;
--brightness: 20.4352034356%;
}
main .star-wrapper .star:nth-child(17) {
top: 0.061426901%;
left: 51.3376394149%;
--hue: 309.368620488deg;
--brightness: 32.8115670133%;
}
main .star-wrapper .star:nth-child(18) {
top: 28.7871540278%;
left: 75.4265648236%;
--hue: 182.5410191096deg;
--brightness: 65.6530309562%;
}
main .star-wrapper .star:nth-child(19) {
top: 47.3767976605%;
left: 74.8425850182%;
--hue: 220.4671247825deg;
--brightness: 37.5567031317%;
}
main .star-wrapper .star:nth-child(20) {
top: 99.9099734195%;
left: 18.5382603625%;
--hue: 75.8605483046deg;
--brightness: 32.3970269421%;
}
main .star-wrapper .star:nth-child(21) {
top: 72.8343398387%;
left: 19.4493087173%;
--hue: 215.3384287583deg;
--brightness: 44.0611378585%;
}
main .star-wrapper .star:nth-child(22) {
top: 83.6928151497%;
left: 94.1032485221%;
--hue: 198.0307817108deg;
--brightness: 65.754989884%;
}
main .star-wrapper .star:nth-child(23) {
top: 94.218873784%;
left: 21.2086717729%;
--hue: 342.1199313875deg;
--brightness: 28.2134761862%;
}
main .star-wrapper .star:nth-child(24) {
top: 86.0124616233%;
left: 19.2674917887%;
--hue: 299.3815709229deg;
--brightness: 58.160086818%;
}
main .star-wrapper .star:nth-child(25) {
top: 53.8363233767%;
left: 78.2884944364%;
--hue: 328.7238403473deg;
--brightness: 67.3445761114%;
}
main .star-wrapper .star:nth-child(26) {
top: 72.5918697889%;
left: 44.2316737661%;
--hue: 298.4327078522deg;
--brightness: 64.9218080753%;
}
main .star-wrapper .star:nth-child(27) {
top: 54.2892804062%;
left: 52.3932522872%;
--hue: 268.9122120098deg;
--brightness: 62.4709670705%;
}
main .star-wrapper .star:nth-child(28) {
top: 59.363164503%;
left: 80.6991008738%;
--hue: 76.7265173592deg;
--brightness: 49.1571429105%;
}
main .star-wrapper .star:nth-child(29) {
top: 36.8466400062%;
left: 9.6168604773%;
--hue: 143.6502797956deg;
--brightness: 39.1063524017%;
}
main .star-wrapper .star:nth-child(30) {
top: 75.4582567666%;
left: 71.632086687%;
--hue: 222.5136526715deg;
--brightness: 44.8333530995%;
}
main .star-wrapper .star:nth-child(31) {
top: 10.317352408%;
left: 19.0525508319%;
--hue: 336.4589394346deg;
--brightness: 57.9315190862%;
}
main .star-wrapper .star:nth-child(32) {
top: 48.0574389363%;
left: 58.0850235225%;
--hue: 297.4082381108deg;
--brightness: 16.6950608988%;
}
main .star-wrapper .star:nth-child(33) {
top: 82.8824116012%;
left: 41.9794049418%;
--hue: 261.3139783369deg;
--brightness: 40.7676719657%;
}
main .star-wrapper .star:nth-child(34) {
top: 18.5383934618%;
left: 23.9935268987%;
--hue: 280.9988523303deg;
--brightness: 21.1275541903%;
}
main .star-wrapper .star:nth-child(35) {
top: 14.4941090743%;
left: 54.8688722552%;
--hue: 68.4746761765deg;
--brightness: 56.9224390282%;
}
main .star-wrapper .star:nth-child(36) {
top: 35.2791909862%;
left: 15.200494129%;
--hue: 177.5056747816deg;
--brightness: 21.145404336%;
}
main .star-wrapper .star:nth-child(37) {
top: 29.781473071%;
left: 16.4910706171%;
--hue: 286.7134099673deg;
--brightness: 41.6205148934%;
}
main .star-wrapper .star:nth-child(38) {
top: 51.771587128%;
left: 17.1404779126%;
--hue: 159.1130963105deg;
--brightness: 11.0285833102%;
}
main .star-wrapper .star:nth-child(39) {
top: 69.4582890348%;
left: 50.892273179%;
--hue: 74.6104299146deg;
--brightness: 54.5434310649%;
}
main .star-wrapper .star:nth-child(40) {
top: 24.46994725%;
left: 15.2121295179%;
--hue: 208.5204454629deg;
--brightness: 19.1356938788%;
}
main .star-wrapper .star:nth-child(41) {
top: 61.4324716291%;
left: 91.8519165735%;
--hue: 150.0156975395deg;
--brightness: 43.7535553111%;
}
main .star-wrapper .star:nth-child(42) {
top: 50.9980190206%;
left: 96.8631911945%;
--hue: 320.0625338859deg;
--brightness: 63.3137748138%;
}
main .star-wrapper .star:nth-child(43) {
top: 35.485384276%;
left: 14.271500092%;
--hue: 84.3720934284deg;
--brightness: 39.0260033129%;
}
main .star-wrapper .star:nth-child(44) {
top: 52.8120098997%;
left: 22.907841312%;
--hue: 120.4953392229deg;
--brightness: 67.5058717928%;
}
main .star-wrapper .star:nth-child(45) {
top: 79.0312791078%;
left: 7.2816622054%;
--hue: 178.1826917878deg;
--brightness: 24.097163534%;
}
main .star-wrapper .star:nth-child(46) {
top: 35.33059631%;
left: 33.141679576%;
--hue: 298.3795246279deg;
--brightness: 21.9083835803%;
}
main .star-wrapper .star:nth-child(47) {
top: 80.2526271472%;
left: 94.2848829683%;
--hue: 339.8506366043deg;
--brightness: 67.5039646125%;
}
main .star-wrapper .star:nth-child(48) {
top: 32.000255969%;
left: 82.6557197348%;
--hue: 252.6486480373deg;
--brightness: 40.8154050435%;
}
main .star-wrapper .star:nth-child(49) {
top: 5.6090032474%;
left: 23.8182840318%;
--hue: 96.1561831245deg;
--brightness: 30.5756558289%;
}
main .star-wrapper .star:nth-child(50) {
top: 35.3381579902%;
left: 56.1559271639%;
--hue: 178.0823994398deg;
--brightness: 43.8033894083%;
}
main .star-wrapper .star:nth-child(51) {
top: 8.7482736809%;
left: 87.4723133568%;
--hue: 115.2853172287deg;
--brightness: 22.5606684621%;
}
main .star-wrapper .star:nth-child(52) {
top: 42.0530868989%;
left: 64.5301253353%;
--hue: 124.1938128496deg;
--brightness: 35.4964694781%;
}
main .star-wrapper .star:nth-child(53) {
top: 6.6738890588%;
left: 16.9389606899%;
--hue: 181.9515208254deg;
--brightness: 38.7449108233%;
}
main .star-wrapper .star:nth-child(54) {
top: 91.9668041594%;
left: 39.6988618642%;
--hue: 217.0249592032deg;
--brightness: 54.7238701904%;
}
main .star-wrapper .star:nth-child(55) {
top: 69.0804998971%;
left: 0.2650501956%;
--hue: 185.5404224938deg;
--brightness: 52.8010550261%;
}
main .star-wrapper .star:nth-child(56) {
top: 85.0016288198%;
left: 20.1313489793%;
--hue: 307.0191702671deg;
--brightness: 27.1796390579%;
}
main .star-wrapper .star:nth-child(57) {
top: 0.5761829067%;
left: 67.7796192066%;
--hue: 153.9155283201deg;
--brightness: 56.0486723266%;
}
main .star-wrapper .star:nth-child(58) {
top: 59.1848365038%;
left: 33.6689836375%;
--hue: 98.4603537137deg;
--brightness: 26.1881709046%;
}
main .star-wrapper .star:nth-child(59) {
top: 92.2022741213%;
left: 9.1405703157%;
--hue: 337.5817127232deg;
--brightness: 42.3389394182%;
}
main .star-wrapper .star:nth-child(60) {
top: 87.5193022775%;
left: 15.0506121804%;
--hue: 275.5050095995deg;
--brightness: 18.7544995607%;
}
main .star-wrapper .star:nth-child(61) {
top: 11.4676907766%;
left: 79.7816329679%;
--hue: 184.1815993303deg;
--brightness: 23.4995756121%;
}
main .star-wrapper .star:nth-child(62) {
top: 65.7244845901%;
left: 64.498834054%;
--hue: 334.2613883389deg;
--brightness: 42.3478323967%;
}
main .star-wrapper .star:nth-child(63) {
top: 46.6438118889%;
left: 46.3300159397%;
--hue: 145.4539440114deg;
--brightness: 50.0970558882%;
}
main .star-wrapper .star:nth-child(64) {
top: 56.1820799247%;
left: 66.7193312799%;
--hue: 79.5347978563deg;
--brightness: 67.0146182459%;
}
main .star-wrapper .star:nth-child(65) {
top: 36.872992152%;
left: 99.3876753671%;
--hue: 322.7301809398deg;
--brightness: 69.4853584895%;
}
main .star-wrapper .star:nth-child(66) {
top: 27.9074303162%;
left: 98.1094678899%;
--hue: 328.5682583961deg;
--brightness: 22.927068332%;
}
main .star-wrapper .star:nth-child(67) {
top: 49.8615038066%;
left: 92.6319101583%;
--hue: 224.972536441deg;
--brightness: 43.3964633005%;
}
main .star-wrapper .star:nth-child(68) {
top: 21.8383226294%;
left: 70.300788365%;
--hue: 328.0355112291deg;
--brightness: 15.5572388237%;
}
main .star-wrapper .star:nth-child(69) {
top: 14.8645590236%;
left: 16.5500058677%;
--hue: 291.0851995668deg;
--brightness: 19.8546777294%;
}
main .star-wrapper .star:nth-child(70) {
top: 36.3715535021%;
left: 11.8843590454%;
--hue: 197.3912634065deg;
--brightness: 37.3422162589%;
}
main .star-wrapper .star:nth-child(71) {
top: 74.1924847736%;
left: 17.8208301675%;
--hue: 96.8537448742deg;
--brightness: 28.0342732472%;
}
main .star-wrapper .star:nth-child(72) {
top: 42.1293757513%;
left: 80.9249872594%;
--hue: 82.1009424907deg;
--brightness: 14.3680732675%;
}
main .star-wrapper .star:nth-child(73) {
top: 15.3370962571%;
left: 21.2557230549%;
--hue: 5.5584843771deg;
--brightness: 34.5019461888%;
}
main .star-wrapper .star:nth-child(74) {
top: 22.1381083067%;
left: 13.9423195047%;
--hue: 259.1877638905deg;
--bri.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0