CSS3北极光背景动画特效代码下载


CSS3北极光背景动画特效代码下载
CSS3北极光背景动画特效代码下载以及北极光、背景动画等js/jquery网页特效代码下载。

1. HTML代码

<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; --y: 9; --scale: 0.07327836438556286;"></div>
    <div class="light" style="--duration: 13; --delay: 8; --x: 5; --y: 2; --scale: 0.04715684885611047;"></div>
    <div class="light" style="--duration: 11; --delay: 5; --x: 4; --y: 8; --scale: 0.06736733078759569;"></div>
    <div class="light" style="--duration: 11; --delay: 6; --x: 0; --y: 5; --scale: 0.05132912295918035;"></div>
    <div class="light" style="--duration: 12; --delay: 7; --x: 2; --y: 2; --scale: 0.08327754286747684;"></div>
    <div class="light" style="--duration: 7; --delay: 9; --x: 2; --y: 1; --scale: 0.07740974418445934;"></div>
    <div class="light" style="--duration: 15; --delay: 5; --x: 4; --y: 10; --scale: 0.07208962978638875;"></div>
    <div class="light" style="--duration: 9; --delay: 6; --x: 2; --y: 8; --scale: 0.010963103754125436;"></div>
    <div class="light" style="--duration: 14; --delay: 7; --x: 4; --y: 5; --scale: 0.07514123946282121;"></div>
    <div class="light" style="--duration: 12; --delay: 9; --x: 4; --y: 7; --scale: 0.02915295831851481;"></div>
    <div class="light" style="--duration: 5; --delay: 7; --x: 1; --y: 4; --scale: 0.014061113409662207;"></div>
    <div class="light" style="--duration: 11; --delay: 4; --x: 4; --y: 8; --scale: 0.09935179432353788;"></div>
    <div class="light" style="--duration: 7; --delay: 10; --x: 1; --y: 2; --scale: 0.0316669651371986;"></div>
    <div class="light" style="--duration: 5; --delay: 8; --x: 0; --y: 2; --scale: 0.03878072766633252;"></div>
    <div class="light" style="--duration: 7; --delay: 8; --x: 4; --y: 0; --scale: 0.04731737227661679;"></div>
    <div class="light" style="--duration: 5; --delay: 6; --x: 3; --y: 2; --scale: 0.04004332746627228;"></div>
    <div class="light" style="--duration: 8; --delay: 9; --x: 3; --y: 1; --scale: 0.06148852366721251;"></div>
    <div class="light" style="--duration: 15; --delay: 5; --x: 5; --y: 10; --scale: 0.07254457165693358;"></div>
    <div class="light" style="--duration: 12; --delay: 10; --x: 3; --y: 8; --scale: 0.09704484059877645;"></div>
    <div class="light" style="--duration: 7; --delay: 9; --x: 1; --y: 3; --scale: 0.0055741895438983224;"></div>
    <div class="light" style="--duration: 9; --delay: 9; --x: 5; --y: 9; --scale: 0.040727917495630164;"></div>
  </div>
</div>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';color:#ffffff">
</div>

相关推荐

发表评论

相关文章