<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>纯CSS3北极光背景动画特效 - 更多源码【www.96flw.com】</title>
<style>
* {
box-sizing: border-box;
}
:root {
--hue: 220;
}
body {
background: hsl(var(--hue), 100%, 5%);
height: 100vh;
overflow: hidden;
}
.star {
--hue: 55;
border-radius: 50%;
background: hsl(var(--hue), 100%, 50%);
box-shadow: 0 0 5px 1px hsl(var(--hue), 100%, 85%);
height: calc(var(--size, 2) * 1px);
position: absolute;
width: calc(var(--size, 2) * 1px);
left: calc(var(--x, 0) * 1vw);
opacity: 0.5;
top: calc(var(--y, 0) * 1vw);
-webkit-animation: flicker calc(var(--duration, 2) * 1s) calc(var(--delay, 10) * 1s) infinite steps(1);
animation: flicker calc(var(--duration, 2) * 1s) calc(var(--delay, 10) * 1s) infinite steps(1);
}
.hill {
background: hsl(var(--hue), 100%, 2%);
position: fixed;
bottom: 0;
left: 0;
height: 25vmin;
width: 68vmin;
border-radius: 0 100% 0 0;
}
.hill:after {
content: '';
position: absolute;
height: 15vmin;
width: 50vmax;
background: hsl(var(--hue), 100%, 2%);
left: 0;
bottom: 0;
border-radius: 0 100% 0 0;
}
.moon {
height: 40vmin;
width: 40vmin;
position: absolute;
left: 0;
top: 0;
background: #c6b9b9;
border-radius: 50%;
box-shadow: 0 0 50px 10px #8c8c8c;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-filter: blur(10px);
filter: blur(10px);
}
.lights {
width: 200vmax;
height: 100vmax;
position: absolute;
left: 50%;
top: 0;
-webkit-transform: translate(-20%, -55%) rotate(30deg);
transform: translate(-20%, -55%) rotate(30deg);
display: -webkit-box;
display: flex;
-webkit-filter: blur(75px);
filter: blur(75px);
}
.light {
-webkit-box-flex: 1;
flex: 1;
--color-one: hsla(var(--hue-1), 100%, 50%, var(--alpha-1));
--color-two: hsla(var(--hue-2), 100%, 50%, var(--alpha-2));
--color-three: hsla(var(--hue-3), 100%, 50%, var(--alpha-3));
--up: calc(var(--y, 10) * 1vmax);
--left: calc(var(--x, 2) * 1vmax);
background-image: -webkit-gradient(linear, left bottom, left top, from(transparent), color-stop(10%, var(--color-one)), color-stop(transparent), color-stop(40%, var(--color-two)), color-stop(transparent), color-stop(60%, var(--color-three)));
background-image: linear-gradient(0deg, transparent, var(--color-one) 10%, transparent, var(--color-two) 40%, transparent, var(--color-three) 60%);
background-size: 100% 40vmax;
background-position: center bottom;
background-repeat: no-repeat;
-webkit-transform: translate(var(--left), var(--up)) scale(1);
transform: translate(var(--left), var(--up)) scale(1);
-webkit-animation: shift calc(var(--duration, 2) * 1s) calc(var(--delay, 0) * -1s) infinite ease;
animation: shift calc(var(--duration, 2) * 1s) calc(var(--delay, 0) * -1s) infinite ease;
}
@media (max-width: 768px) {
.light {
--up: calc(var(--y, 10) * 2vmax);
--left: calc(var(--x, 2) * 2vmax);
}
}
@-webkit-keyframes shift {
50% {
-webkit-transform: translate(0, 0) scale(1);
transform: translate(0, 0) scale(1);
}
}
@keyframes shift {
50% {
-webkit-transform: translate(0, 0) scale(1);
transform: translate(0, 0) scale(1);
}
}
@-webkit-keyframes flicker {
0%, 50%, 100% {
-webkit-transform: scale(1);
transform: scale(1);
}
25% {
-webkit-transform: scale(0);
transform: scale(0);
}
}
@keyframes flicker {
0%, 50%, 100% {
-webkit-transform: scale(1);
transform: scale(1);
}
25% {
-webkit-transform: scale(0);
transform: scale(0);
}
}
</style>
</head>
<body>
<div class="scene" style="--hue-1: 100; --hue-2: 147; --hue-3: 219; --alpha-1: 0.13109462719449483; --alpha-2: 0.4809489268013014; --alpha-3: 0.5875160443609215;">
<div class="star" style="--size: 1.4847320631544942; --x: 44.86773252221434; --y: 66.20778986980615; --duration: 10; --delay: 6;"></div>
<div class="star" style="--size: 0.10856500239837086; --x: 43.18656067723086; --y: 49.92219363368697; --duration: 6; --delay: 7;"></div>
<div class="star" style="--size: 0.6663391888967531; --x: 63.28667233251348; --y: 15.343032400959; --duration: 10; --delay: 5;"></div>
<div class="star" style="--size: 1.7832948236723585; --x: 52.30018127212666; --y: 39.58393689086503; --duration: 10; --delay: 4;"></div>
<div class="star" style="--size: 0.8268868343375111; --x: 23.89040486197045; --y: 82.17185753770508; --duration: 8; --delay: 10;"></div>
<div class="star" style="--size: 0.5131788106414255; --x: 3.595218474459805; --y: 15.98117808517532; --duration: 10; --delay: 10;"></div>
<div class="star" style="--size: 1.5255711097608828; --x: 82.44683690724833; --y: 70.77575644419025; --duration: 10; --delay: 7;"></div>
<div class="star" style="--size: 0.6383565092145997; --x: 37.27748794857069; --y: 78.30840082099455; --duration: 8; --delay: 10;"></div>
<div class="star" style="--size: 0.2301547884397963; --x: 73.24378947395394; --y: 29.13626218276646; --duration: 10; --delay: 6;"></div>
<div class="star" style="--size: 1.8450510455166658; --x: 9.191050293801851; --y: 1.8550256094036932; --duration: 6; --delay: 6;"></div>
<div class="star" style="--size: 0.6185400719959486; --x: 37.697212436032146; --y: 90.30803315925304; --duration: 9; --delay: 4;"></div>
<div class="star" style="--size: 1.3682361350001906; --x: 27.150293837058804; --y: 94.79196543961488; --duration: 5; --delay: 8;"></div>
<div class="star" style="--size: 0.056114746203097976; --x: 20.508458125575004; --y: 89.22121100009683; --duration: 6; --delay: 5;"></div>
<div class="star" style="--size: 1.9687192642244233; --x: 73.05334835572874; --y: 70.81089066666175; --duration: 5; --delay: 4;"></div>
<div class="star" style="--size: 0.01835946456355897; --x: 18.426856610483867; --y: 40.57370028893696; --duration: 8; --delay: 4;"></div>
<div class="star" style="--size: 1.279434467557231; --x: 86.77881775531064; --y: 40.17503616583311; --duration: 10; --delay: 6;"></div>
<div class="star" style="--size: 1.7241576911702525; --x: 21.12680156926117; --y: 82.91919821019033; --duration: 5; --delay: 4;"></div>
<div class="star" style="--size: 1.7200374999340116; --x: 99.52986342373748; --y: 49.25959838966383; --duration: 5; --delay: 7;"></div>
<div class="star" style="--size: 0.715660546067157; --x: 48.133869035224805; --y: 25.879324827772532; --duration: 6; --delay: 6;"></div>
<div class="star" style="--size: 1.4679564771652776; --x: 4.53302704830989; --y: 48.3505387819535; --duration: 6; --delay: 8;"></div>
<div class="hill"></div>
<div class="moon"></div>
<div class="lights">
<div class="light" style="--duration: 12; --delay: 10; --x: 1; --y: 7; --scale: 0.07921118959700538;"></div>
<div class="light" style="--duration: 12; --delay: 9; --x: 3; --y: 0; --scale: 0.04309716319846633;"></div>
<div class="light" style="--duration: 10; --delay: 4; --x: 1; --y: 1; --scale: 0.0557277177330812;"></div>
<div class="light" style="--duration: 9; --delay: 4; --x: 0; --y: 3; --scale: 0.09377321963757435;"></div>
<div class="light" style="--duration: 11; --delay: 8; --x: 5; --y: 1; --scale: 0.09187632481269452;"></div>
<div class="light" style="--duration: 15; --delay: 8; --x: 4; --y: 1; --scale: 0.007688490105183976;"></div>
<div class="light" style="--duration: 14; --delay: 6; --x: 1; --y: 4; --scale: 0.027509557443092757;"></div>
<div class="light" style="--duration: 14; --delay: 10; --x: 0; --y: 4; --scale: 0.07100868705735805;"></div>
<div class="light" style="--duration: 10; --delay: 9; --x: 5; --y: 8; --scale: 0.08685544578061577;"></div>
<div class="light" style="--duration: 5; --delay: 4; --x: 5; -