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

代码语言：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-.027-1.28 4.537 10.442 2.948zM13.17 40.8l1.28-4.537-.745-.21c-1.236-.349-2.525.384-2.878 1.637l-.64 2.268.372.105c-1.03-.29-2.103.32-2.398 1.364l-.213.757-1.921 6.805-.214.756c-.295 1.045.301 2.126 1.331 2.417l-.373-.105-.64 2.268c-.353 1.253.362 2.552 1.597 2.9l.746.21 1.28-4.536.374.105a3.854 3.854 0 003.41-.67l13.425 3.79c3.23.911 6.596.703 9.443-1.499.411-.318.569-.875.384-1.361-1.275-3.365-4.035-5.303-7.265-6.215L16.1 43.26a3.854 3.854 0 00-2.556-2.353l-.373-.106zm17.85 10.937l-.332 1.177c-.262.926-1.216 1.473-2.135 1.214a.213.213 0 01-.146-.266l1.165-4.126a.213.213 0 01.263-.15 1.737 1.737 0 011.185 2.151zM49.106 140.044l-9.487 3.647.112-1.43a.784.784 0 00-1.171-.738l-8.614 4.991A9.907 9.907 0 0025 155.088c0 5.474 4.439 9.912 9.912 9.912a9.916 9.916 0 008.58-4.946l4.985-8.614a.781.781 0 00-.738-1.171l-1.43.112 3.647-9.487a.656.656 0 00-.85-.85zm-14.731 9.331a6.247 6.247 0 016.25 6.25 6.248 6.248 0 01-6.25 6.25 6.247 6.247 0 01-6.25-6.25 6.248 6.248 0 016.25-6.25zm0 4.687a1.561 1.561 0 00-2.667-1.104 1.561 1.561 0 102.21 2.209c.292-.293.457-.69.457-1.105zm.781 4.688a.78.78 0 00.782-.781.784.784 0 00-.782-.781.783.783 0 00-.781.781.78.78 0 00.781.781zM194 74a5.002 5.002 0 003.536-8.535A5.002 5.002 0 00189 69a5.002 5.002 0 005 5zM71 173a2.999 2.999 0 002.121-5.121 2.999 2.999 0 10-4.242 4.242A2.999 2.999 0 0071 173zM181.045 15.11a.747.747 0 00-.253-1.03l-3.629-2.197a.747.747 0 00-1.029.252l-2.047 3.38-.586-.356a6.01 6.01 0 00-.063-2.59 5.993 5.993 0 00-1.297-2.507.463.463 0 00-.746.083l-2.467 4.068-.62-.375a1 1 0 10-1.97.217.999.999 0 001.453.637l.62.375-2.464 4.068c-.165.272-.036.626.271.699.9.217 1.862.228 2.824-.008a5.991 5.991 0 002.322-1.143l.586.355-2.048 3.376a.747.747 0 00.253 1.03l3.629 2.197a.746.746 0 001.028-.252l2.048-3.38 2.078 1.26a1.002 1.002 0 001.375-.337l1.099-1.815a1.001 1.001 0 00-.337-1.375l-2.079-1.26 2.049-3.372zm-9.468 7.44l1.658-2.736 2.347 1.422-1.661 2.737-2.347-1.422h.003zm3.791-6.262l1.658-2.737 2.347 1.422-1.658 2.737-2.347-1.422zM95.925 76.084a8.071 8.071 0 00-8.795-1.047 8.072 8.072 0 00-4.473 7.645 1.617 1.617 0 00-.608 2.102l1.44 2.894c.377.76 1.269 1.09 2.042.784a8.071 8.071 0 008.795 1.047 8.071 8.071 0 004.474-7.645c.71-.432.985-1.342.607-2.102l-1.44-2.894a1.617 1.617 0 00-2.041-.784zm-.492 2.947l.36.723a4.85 4.85 0 01-2.182 6.5l-1.447.72a4.85 4.85 0 01-6.5-2.182l-.36-.724a2.425 2.425 0 011.09-3.25l5.79-2.878a2.425 2.425 0 013.25 1.09zm-6.213 4.145l-.748-.824a.379.379 0 00-.454-.085.379.379 0 00-.207.413l.206 1.094-.824.748a.379.379 0 00-.085.454c.077.153.244.24.413.206l1.094-.205.748.824c.115.129.3.16.454.084a.38.38 0 00.206-.413l-.205-1.093.824-.749a.379.379 0 00.084-.453.379.379 0 00-.413-.207l-1.093.206zm-.006 8.678a9.005 9.005 0 00-1.368 10.032 1.5 1.5 0 002.011.675l4.446-2.21-1.44-2.895a1.614 1.614 0 01.728-2.166l5.789-2.879a1.614 1.614 0 012.166.728l1.44 2.894 4.445-2.21a1.5 1.5 0 00.675-2.012 9.004 9.004 0 00-8.825-4.963 9.678 9.678 0 01-4.235 4.108 9.677 9.677 0 01-5.832.898zm5.82 4.523a.81.81 0 00-.364 1.083l1.08 2.171 1.447-.72-1.08-2.17a.81.81 0 00-1.083-.364zm5.061-.712a.807.807 0 00-.102-1.49.807.807 0 10.102 1.49zM182.95 162.52a1.545 1.545 0 01-1.292-1.765c1.178-7.599 8.289-12.801 15.887-11.623.846.131 1.423.92 1.292 1.765a1.545 1.545 0 01-1.765 1.292c-5.908-.916-11.441 3.132-12.357 9.04a1.545 1.545 0 01-1.765 1.291zm8.035 7.672l5.742-4.201-1.146-1.567a1.544 1.544 0 01-1.696-1.774 1.545 1.545 0 011.765-1.291 1.545 1.545 0 011.178 2.153l1.146 1.567 5.742-4.201c.8-.585 1.941-.277 2.157.691.265 1.195.319 2.456..........完整代码请登录后点击上方下载按钮下载查看