Css火花

下载代码

html

css

js

分享到微信朋友圈

X

html

<div class="sparkler">
  <div class="sparkler__spark" style="--rotation: 262; --delay: 0.6779807201299441; --speed: 0.5; --travel: 97; --h: 23; --s: 67; --l: 59;"></div>
  <div class="sparkler__spark" style="--rotation: 242; --delay: 0.14228294777193362; --speed: 0.4; --travel: 90; --h: 33; --s: 88; --l: 51;"></div>
  <div class="sparkler__spark" style="--rotation: 103; --delay: 0.5883091077647706; --speed: 0.7; --travel: 56; --h: 41; --s: 94; --l: 55;"></div>
  <div class="sparkler__spark" style="--rotation: 155; --delay: 0.896818873947751; --speed: 0.5; --travel: 82; --h: 51; --s: 71; --l: 75;"></div>
  <div class="sparkler__spark" style="--rotation: 155; --delay: 0.7553119662665275; --speed: 0.8; --travel: 84; --h: 54; --s: 77; --l: 83;"></div>
  <div class="sparkler__spark" style="--rotation: 152; --delay: 0.3671479239723694; --speed: 0.3; --travel: 141; --h: 31; --s: 65; --l: 78;"></div>
  <div class="sparkler__spark" style="--rotation: 146; --delay: 0.8763266815519508; --speed: 0.6; --travel: 104; --h: 49; --s: 84; --l: 92;"></div>
  <div class="sparkler__spark" style="--rotation: 270; --delay: 0.3351159698298485; --speed: 0.5; --travel: 63; --h: 27; --s: 54; --l: 97;"></div>
  <div class="sparkler__spark" style="--rotation: 9; --delay: 0.7532545866575207; --speed: 0.8; --travel: 129; --h: 52; --s: 75; --l: 58;"></div>
  <div class="sparkler__spark" style="--rotation: 195; --delay: 0.4374745398689335; --speed: 0.6; --travel: 61; --h: 54; --s: 85; --l: 88;"></div>
  <div class="sparkler__spark" style="--rotation: 16; --delay: 0.11412009956818281; --speed: 0.9; --travel: 149; --h: 27; --s: 63; --l: 72;"></div>
  <div class="sparkler__spark" style="--rotation: 30; --delay: 0.6031451633362741; --speed: 0.9; --travel: 104; --h: 45; --s: 56; --l: 82;"></div>
  <div class="sparkler__spark" style="--rotation: 214; --delay: 0.5720794163116438; --speed: 1; --travel: 112; --h: 43; --s: 59; --l: 51;"></div>
  <div class="sparkler__spark" style="--rotation: 330; --delay: 0.27934202073025505; --speed: 0.2; --travel: 119; --h: 29; --s: 84; --l: 70;"></div>
  <div class="sparkler__spark" style="--rotation: 129; --delay: 0.18705535605489132; --speed: 1; --travel: 126; --h: 53; --s: 56; --l: 64;"></div>
  <div class="sparkler__spark" style="--rotation: 52; --delay: 0.018766039343215635; --speed: 0.9; --travel: 64; --h: 51; --s: 59; --l: 62;"></div>
  <div class="sparkler__spark" style="--rotation: 301; --delay: 0.42040307930325427; --speed: 0.2; --travel: 136; --h: 60; --s: 72; --l: 92;"></div>
  <div class="sparkler__spark" style="--rotation: 198; --delay: 0.8723377235628624; --speed: 0.5; --travel: 55; --h: 36; --s: 51; --l: 72;"></div>
  <div class="sparkler__spark" style="--rotation: 90; --delay: 0.15316320350618295; --speed: 0.2; --travel: 89; --h: 33; --s: 97; --l: 54;"></div>
  <div class="sparkler__spark" style="--rotation: 149; --delay: 0.04065406222405632; --speed: 0.7; --travel: 99; --h: 45; --s: 80; --l: 81;"></div>
  <div class="sparkler__spark" style="--rotation: 172; --delay: 0.3622718081270846; --speed: 0.2; --travel: 114; --h: 28; --s: 57; --l: 97;"></div>
  <div class="sparkler__spark" style="--rotation: 16; --delay: 0.7343525600622594; --speed: 0.6; --travel: 59; --h: 51; --s: 94; --l: 51;"></div>
  <div class="sparkler__spark" style="--rotation: 103; --delay: 0.6101654053197698; --speed: 0.8; --travel: 106; --h: 56; --s: 78; --l: 99;"></div>
  <div class="sparkler__spark" style="--rotation: 223; --delay: 0.015842791239301768; --speed: 0.7; --travel: 51; --h: 28; --s: 80; --l: 87;"></div>
  <div class="sparkler__spark" style="--rotation: 39; --delay: 0.27478083412089305; --speed: 1; --travel: 110; --h: 37; --s: 90; --l: 58;"></div>
  <div class="sparkler__spark" style="--rotation: 271; --delay: 0.21087709625622142; --speed: 0.8; --travel: 118; --h: 58; --s: 73; --l: 95;"></div>
  <div class="sparkler__spark" style="--rotation: 158; --delay: 0.8791301572529298; --speed: 0.9; --travel: 56; --h: 32; --s: 84; --l: 74;"></div>
  <div class="sparkler__spark" style="--rotation: 197; --delay: 0.04465182506068266; --speed: 0.3; --travel: 76; --h: 58; --s: 54; --l: 69;"></div>
  <div class="sparkler__spark" style="--rotation: 117; --delay: 0.8399661487299006; --speed: 0.4; --travel: 116; --h: 49; --s: 86; --l: 63;"></div>
  <div class="sparkler__spark" style="--rotation: 41; --delay: 0.05097465453686745; --speed: 0.6; --travel: 125; --h: 56; --s: 88; --l: 57;"></div>
  <div class="sparkler__spark" style="--rotation: 341; --delay: 0.8410001215277705; --speed: 0.6; --travel: 140; --h: 48; --s: 52; --l: 56;"></div>
  <div class="sparkler__spark" style="--rotation: 236; --delay: 0.023034444269822485; --speed: 0.4; --travel: 68; --h: 45; --s: 88; --l: 63;"></div>
  <div class="sparkler__spark" style="--rotation: 19; --delay: 0.8617798419042506; --speed: 0.7; --travel: 71; --h: 53; --s: 70; --l: 85;"></div>
  <div class="sparkler__spark" style="--rotation: 271; --delay: 0.2754377580103131; --speed: 1; --travel: 139; --h: 39; --s: 98; --l: 75;"></div>
  <div class="sparkler__spark" style="--rotation: 213; --delay: 0.9132617560888441; --speed: 0.7; --travel: 73; --h: 21; --s: 85; --l: 54;"></div>
  <div class="sparkler__spark" style="--rotation: 335; --delay: 0.6719643561247786; --speed: 0.9; --travel: 106; --h: 57; --s: 54; --l: 69;"></div>
  <div class="sparkler__spark" style="--rotation: 138; --delay: 0.3523519441435239; --speed: 0.5; --travel: 137; --h: 54; --s: 77; --l: 85;"></div>
  <div class="sparkler__spark" style="--rotation: 46; --delay: 0.7544508808956227; --speed: 0.4; --travel: 94; --h: 29; --s: 82; --l: 78;"></div>
  <div class="sparkler__spark" style="--rotation: 147; --delay: 0.8031513974779514; --speed: 0.7; --travel: 106; --h: 31; --s: 61; --l: 62;"></div>
  <div class="sparkler__spark" style="--rotation: 343; --delay: 0.19660398964827186; --speed: 0.2; --travel: 87; --h: 55; --s: 78; --l: 61;"></div>
  <div class="sparkler__spark" style="--rotation: 167; --delay: 0.34243055211869255; --speed: 0.6; --travel: 124; --h: 27; --s: 99; --l: 65;"></div>
  <div class="sparkler__spark" style="--rotation: 185; --delay: 0.8438605195935112; --speed: 0.4; --travel: 67; --h: 54; --s: 52; --l: 80;"></div>
  <div class="sparkler__spark" style="--rotation: 213; --delay: 0.8168988134275836; --speed: 0.8; --travel: 95; --h: 46; --s: 71; --l: 99;"></div>
  <div class="sparkler__spark" style="--rotation: 23; --delay: 0.933506977310891; --speed: 1; --travel: 99; --h: 32; --s: 55; --l: 87;"></div>
  <div class="sparkler__spark" style="--rotation: 237; --delay: 0.566389498800274; --speed: 0.4; --travel: 110; --h: 35; --s: 80; --l: 54;"></div>
  <div class="sparkler__spark" style="--rotation: 78; --delay: 0.305631819946393; --speed: 1; --travel: 89; --h: 34; --s: 66; --l: 59;"></div>
  <div class="sparkler__spark" style="--rotation: 100; --delay: 0.4088903673072388; --speed: 0.3; --travel: 97; --h: 44; --s: 59; --l: 63;"></div>
  <div class="sparkler__spark" style="--rotation: 346; --delay: 0.05972093989736704; --speed: 0.6; --travel: 122; --h: 31; --s: 59; --l: 53;"></div>
  <div class="sparkler__spark" style="--rotation: 135; --delay: 0.25702989953401567; --speed: 0.2; --travel: 118; --h: 33; --s: 92; --l: 63;"></div>
  <div class="sparkler__spark" style="--rotation: 108; --delay: 0.2296478449395063; --speed: 0.9; --travel: 93; --h: 21; --s: 66; --l: 94;"></div>
  <div class="sparkler__spark" style="--rotation: 199; --delay: 0.012426665988166663; --speed: 0.9; --travel: 113; --h: 27; --s: 76; --l: 67;"></div>
  <div class="sparkler__spark" style="--rotation: 93; --delay: 0.22794317043524903; --speed: 0.7; --travel: 113; --h: 37; --s: 72; --l: 74;"></div>
  <div class="sparkler__spark" style="--rotation: 76; --delay: 0.527735089599983; --speed: 0.6; --travel: 52; --h: 35; --s: 83; --l: 57;"></div>
  <div class="sparkler__spark" style="--rotation: 192; --delay: 0.023383361836615935; --speed: 0.5; --travel: 148; --h: 40; --s: 57; --l: 95;"></div>
  <div class="sparkler__spark" style="--rotation: 99; --delay: 0.6044099550962103; --speed: 1; --travel: 99; --h: 54; --s: 98; --l: 70;"></div>
  <div class="sparkler__spark" style="--rotation: 76; --delay: 0.5069849795738213; --speed: 1; --travel: 130; --h: 28; --s: 61; --l: 98;"></div>
  <div class="sparkler__spark" style="--rotation: 348; --delay: 0.3360946205987212; --speed: 0.7; --travel: 62; --h: 26; --s: 51; --l: 75;"></div>
  <div class="sparkler__spark" style="--rotation: 154; --delay: 0.5992883207549933; --speed: 0.4; --travel: 128; --h: 25; --s: 64; --l: 65;"></div>
  <div class="sparkler__spark" style="--rotation: 259; --delay: 0.08702725275902856; --speed: 0.3; --travel: 54; --h: 23; --s: 65; --l: 52;"></div>
  <div class="sparkler__spark" style="--rotation: 355; --delay: 0.23630930350969614; --speed: 0.9; --travel: 63; --h: 22; --s: 94; --l: 61;"></div>
  <div class="sparkler__spark" style="--rotation: 71; --delay: 0.802425345452372; --speed: 0.4; --travel: 63; --h: 53; --s: 57; --l: 83;"></div>
  <div class="sparkler__spark" style="--rotation: 108; --delay: 0.7097741864776652; --speed: 0.7; --travel: 102; --h: 41; --s: 84; --l: 86;"></div>
  <div class="sparkler__spark" style="--rotation: 220; --delay: 0.17011033637154482; --speed: 0.5; --travel: 133; --h: 40; --s: 63; --l: 61;"></div>
  <div class="sparkler__spark" style="--rotation: 48; --delay: 0.5322839360595801; --speed: 0.9; --travel: 148; --h: 35; --s: 94; --l: 57;"></div>
  <div class="sparkler__spark" style="--rotation: 102; --delay: 0.5203252097929385; --speed: 1; --travel: 130; --h: 23; --s: 98; --l: 77;"></div>
  <div class="sparkler__spark" style="--rotation: 352; --delay: 0.6947916024980216; --speed: 0.3; --travel: 125; --h: 42; --s: 71; --l: 52;"></div>
  <div class="sparkler__spark" style="--rotation: 312; --delay: 0.800925142602096; --speed: 0.3; --travel: 92; --h: 36; --s: 96; --l: 67;"></div>
  <div class="sparkler__spark" style="--rotation: 233; --delay: 0.3818561745097635; --speed: 0.2; --travel: 115; --h: 55; --s: 80; --l: 59;"></div>
  <div class="sparkler__spark" style="--rotation: 75; --delay: 0.6494579282388833; --speed: 0.5; --travel: 144; --h: 28; --s: 52; --l: 80;"></div>
  <div class="sparkler__spark" style="--rotation: 264; --delay: 0.4779629309181921; --speed: 0.5; --travel: 76; --h: 37; --s: 82; --l: 90;"></div>
  <div class="sparkler__spark" style="--rotation: 309; --delay: 0.12638338716554887; --speed: 0.4; --travel: 135; --h: 40; --s: 52; --l: 84;"></div>
  <div class="sparkler__spark" style="--rotation: 288; --delay: 0.20456171274229984; --speed: 1; --travel: 78; --h: 50; --s: 62; --l: 54;"></div>
  <div class="sparkler__spark" style="--rotation: 146; --delay: 0.5519437678982873; --speed: 0.2; --travel: 103; --h: 46; --s: 77; --l: 91;"></div>
  <div class="sparkler__spark" style="--rotation: 41; --delay: 0.1237503460881626; --speed: 0.3; --travel: 78; --h: 36; --s: 55; --l: 75;"></div>
  <div class="sparkler__spark" style="--rotation: 261; --delay: 0.3038914818677312; --speed: 0.5; --travel: 118; --h: 28; --s: 74; --l: 56;"></div>
  <div class="sparkler__spark" style="--rotation: 237; --delay: 0.5304408890724424; --speed: 0.6; --travel: 144; --h: 46; --s: 77; --l: 97;"></div>
  <div class="sparkler__spark" style="--rotation: 169; --delay: 0.2573322126221367; --speed: 0.3; --travel: 55; --h: 50; --s: 89; --l: 81;"></div>
  <div class="sparkler__spark" style="--rotation: 205; --delay: 0.44481090366579323; --speed: 0.8; --travel: 150; --h: 50; --s: 66; --l: 87;"></div>
  <div class="sparkler__spark" style="--rotation: 13; --delay: 0.0254430596118127; --speed: 0.2; --travel: 129; --h: 28; --s: 84; --l: 67;"></div>
  <div class="sparkler__spark" style="--rotation: 11; --delay: 0.0956039511457738; --speed: 0.2; --travel: 62; --h: 57; --s: 98; --l: 63;"></div>
  <div class="sparkler__spark" style="--rotation: 204; --delay: 0.485508168820564; --speed: 0.5; --travel: 84; --h: 37; --s: 69; --l: 96;"></div>
  <div class="sparkler__spark" style="--rotation: 87; --delay: 0.6443384604287299; --speed: 0.5; --travel: 105; --h: 45; --s: 56; --l: 95;"></div>
  <div class="sparkler__spark" style="--rotation: 117; --delay: 0.05876569762095829; --speed: 0.4; --travel: 112; --h: 27; --s: 78; --l: 72;"></div>
  <div class="sparkler__spark" style="--rotation: 2; --delay: 0.5879842893020297; --speed: 0.3; --travel: 58; --h: 54; --s: 55; --l: 67;"></div>
  <div class="sparkler__spark" style="--rotation: 322; --delay: 0.011006425800013098; --speed: 0.6; --travel: 143; --h: 48; --s: 75; --l: 74;"></div>
  <div class="sparkler__spark" style="--rotation: 85; --delay: 0.06184367765762144; --speed: 0.5; --travel: 112; --h: 52; --s: 75; --l: 99;"></div>
  <div class="sparkler__spark" style="--rotation: 339; --delay: 0.60237492577878; --speed: 0.6; --travel: 116; --h: 36; --s: 54; --l: 81;"></div>
  <div class="sparkler__spark" style="--rotation: 9; --delay: 0.5766467503503707; --speed: 0.6; --travel: 141; --h: 35; --s: 68; --l: 77;"></div>
  <div class="sparkler__spark" style="--rotation: 170; --delay: 0.9474696906545654; --speed: 0.5; --travel: 65; --h: 60; --s: 93; --l: 69;"></div>
  <div class="sparkler__spark" style="--rotation: 243; --delay: 0.8632256834587997; --speed: 0.8; --travel: 140; --h: 51; --s: 67; --l: 59;"></div>
  <div class="sparkler__spark" style="--rotation: 221; --delay: 0.245343384665744; --speed: 0.9; --travel: 126; --h: 54; --s: 74; --l: 63;"></div>
  <div class="sparkler__spark" style="--rotation: 218; --delay: 0.410592413798162; --speed: 0.4; --travel: 115; --h: 51; --s: 76; --l: 57;"></div>
  <div class="sparkler__spark" style="--rotation: 82; --delay: 0.2547594354400331; --speed: 0.5; --travel: 83; --h: 23; --s: 92; --l: 68;"></div>
  <div class="sparkler__spark" style="--rotation: 142; --delay: 0.15426477074529266; --speed: 1; --travel: 90; --h: 55; --s: 79; --l: 81;"></div>
  <div class="sparkler__spark" style="--rotation: 33; --delay: 0.8331725926938225; --speed: 0.6; --travel: 115; --h: 42; --s: 72; --l: 64;"></div>
  <div class="sparkler__spark" style="--rotation: 85; --delay: 0.6828403183280496; --speed: 0.4; --travel: 102; --h: 40; --s: 56; --l: 83;"></div>
  <div class="sparkler__spark" style="--rotation: 98; --delay: 0.7936282966422992; --speed: 0.3; --travel: 67; --h: 50; --s: 55; --l: 82;"></div>
  <div class="sparkler__spark" style="--rotation: 91; --delay: 0.11902340157163671; --speed: 1; --travel: 64; --h: 50; --s: 92; --l: 56;"></div>
  <div class="sparkler__spark" style="--rotation: 95; --delay: 0.752084695473672; --speed: 0.3; --travel: 109; --h: 50; --s: 56; --l: 84;"></div>
  <div class="sparkler__spark" style="--rotation: 57; --delay: 0.25267990908296345; --speed: 0.9; --travel: 135; --h: 41; --s: 72; --l: 70;"></div>
</div>

css

*,
*:after,
*:before {
  box-sizing: border-box;
}
:root {
  --bg: #04050d;
  --glow: rgba(245,224,163,0.5);
  --sparkler-top: #4f4139;
  --sparkler-bottom: #333;
  --spark: #fff;
}
body {
  min-height: 100vh;
  background: var(--bg);
  cursor: none;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: none;
  overflow: hidden;
}
span {
  position: absolute;
  border: 2px solid #008000;
  border-radius: 100%;
  opacity: 0.1;
  width: calc((100 / 3) * 1vw);
  height: 50vh;
  z-index: 3;
}
.sparkler {
  position: absolute;
  border-radius: 100%;
  left: calc(var(--x) * 1px);
  top: calc(var(--y) * 1px);
  box-shadow: 0 0 25px 25px var(--glow);
}
.sparkler:after,
.sparkler:before {
  content: '';
  height: 100px;
  width: 5px;
  background: var(--sparkler-top);
  position: absolute;
  top: 100%;
  left: 50%;
  border-radius: 2px;
  transform: translate(-50%, 0) rotate(-40deg);
  transform-origin: top center;
}
.sparkler:before {
  height: 160px;
  width: 2px;
  background: var(--sparkler-bottom);
}
.sparkler__spark {
  --shadow: hsl(var(--h), calc(var(--s, 100) * 1%), calc(var(--l, 50) * 1%));
  height: 5px;
  position: absolute;
  width: 5px;
  box-shadow: 0 0 20px 4px var(--shadow);
  background: var(--spark);
  border-radius: 100%;
  transform: rotate(calc(var(--rotation) * 1deg)) translate(0, 0);
  -webkit-animation: spark calc(var(--speed) * 1s) calc(var(--delay) * -1s) infinite ease;
          animation: spark calc(var(--speed) * 1s) calc(var(--delay) * -1s) infinite ease;
  z-index: 2;
}
@-webkit-keyframes spark {
  to {
    opacity: 0;
    transform: rotate(calc(var(--rotation) * 1deg)) translate(0, calc(var(--travel) * 1px));
  }
}
@keyframes spark {
  to {
    opacity: 0;
    transform: rotate(calc(var(--rotation) * 1deg)) translate(0, calc(var(--travel) * 1px));
  }
}

JavaScript

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg

<!doctype html> <html> <head> <meta charset="utf-8"> <title> Css火花-jq22.com</title> <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script> <style> </style> </head> <body> <script> </script> </body> </html>

2012-2021 jQuery插件库版权所有

jquery插件| jq22工具库| 网页技术| 广告合作| 在线反馈| 版权声明
沪ICP备13043785号-1 浙公网安备 33041102000314号