css+div实现星空顶灯光转动动画效果代码-html代码-BFW代码库

css+div实现星空顶灯光转动动画效果代码

代码语言：html

所属分类：动画

代码描述：css+div实现星空顶灯光转动动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  



  
  
  
  
<style>
@keyframes scroll-red {
  0% {
    mask-position: 0 0;
  }
  100% {
    mask-position: var(--nightlight-red-size) 0;
  }
}

@keyframes scroll-green {
  0% {
    mask-position: 0 10px;
  }
  100% {
    mask-position: var(--nightlight-green-size) 10px;
  }
}

@keyframes scroll-blue {
  0% {
    mask-position: 0 20px;
  }
  100% {
    mask-position: var(--nightlight-blue-size) 20px;
  }
}

body {
  margin: 0;
  padding: 0;
  height: 100vh;
  background-color: black;
}

.nightlight-container {
  width: 100%;
  height: 400px;
  perspective: 300px;
  overflow: hidden;
}

.nightlight {
  --nightlight-red-size: 400px;
  --nightlight-green-size: 450px;
  --nightlight-blue-size: 500px;
  position: relative;
  width: 100%;
  height: 100%;
  background-color: black;
  filter: blur(0.5px);
  transform: rotate3d(1, 0, 0, -53deg);
}

.nightlight::before {
  content: '';
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, transparent, black);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 20;
}

.nightlight::after {
  content: '';
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, black, transparent, black);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 20;
}

.layer {
  position: absolute;
  width: 100%;
  height: 100%;
  mix-blend-mode: difference;
  background-repeat: repeat;
  mask-image: var(--stars-svg);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.red {
  background-color: #f00;
  animation-name: scroll-red;
  animation-duration: 10s;
  mask-size: var(--nightlight-red-size);
}

.green {
  background-color: #0f0;
  animation-name: scroll-green;
  animation-duration: 13s;
  animation-delay: -5s;
  mask-size: var(--nightlight-green-size);
}

.blue {
  background-color: #00f;
  animation-name: scroll-blue;
  animation-duration: 14s;
  animation-delay: -10s;
  mask-size: var(--nightlight-blue-size);
}

html {
  --stars-svg: url("data:image/svg+xml,%3Csvg width='222' height='181' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23prefix__clip0_1_3)' fill='%23000'%3E%3Cpath d='M61.623 9.045a1.001 1.001 0 00-1.56-.897l-3.802 2.584-4.221-1.66a.998.998 0 00-1.33 1.197l1.22 4.415-2.935 3.565a1.003 1.003 0 00.742 1.638l4.543.14 2.41 3.854a1 1 0 001.789-.184l1.598-4.332 4.429-1.172a.999.999 0 00.364-1.751l-3.564-2.811.317-4.586zM150.22 93.471a1.385 1.385 0 00-2.29.98l-.305 6.355-5.348 3.288c-.447.275-.701.78-.652 1.3.048.52.384.974.87 1.165l5.898 2.326 1.502 6.211a1.389 1.389 0 002.429.541l3.935-4.907 6.267.539a1.383 1.383 0 001.304-.667 1.391 1.391 0 00-.019-1.464l-3.463-5.372 2.388-5.873a1.382 1.382 0 00-1.634-1.86l-6.074 1.604-4.808-4.166zM124.883 49.883c-7.119 1.447-11.715 8.366-10.274 15.453 1.441 7.087 8.374 11.66 15.493 10.213a13.143 13.143 0 008.243-5.458.931.931 0 00-.039-1.108.95.95 0 00-1.079-.288c-.546.213-1.112.382-1.705.502-5.586 1.136-11.035-2.457-12.167-8.026-.767-3.77.641-7.474 3.362-9.83a.931.931 0 00-.728-1.63 14.09 14.09 0 00-1.104.178l-.002-.006zM10.06 57.883c1.893.534 3.895.538 5.796.008l5.833-1.624-10.441-2.947-1.281 4.537.093.026zM25.105 44.17l-4.124-4.435a10.722 10.722 0 00-4.945-3.023l-.093-.02.........完整代码请登录后点击上方下载按钮下载查看