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.12 3.741-.851 5.487-5.986 9.244-11.474 8.394a9.988 9.988 0 01-3.528-1.251c-.852-.499-.806-1.681-.006-2.266v.005zm-4.742-8.726c.785-5.063 5.529-8.534 10.592-7.749.845.131 1.422.92 1.291 1.765a1.545 1.545 0 01-1.765 1.292 6.185 6.185 0 00-7.061 5.165 1.545 1.545 0 01-1.765 1.292 1.545 1.545 0 01-1.292-1.765zM123.931 165.971l-1.288-.456a.977.977 0 01-.65-.804 51.44 51.44 0 01-.121-1.113l-2.985 1.423a.751.751 0 01-1.071-.743l.291-3.202a2.249 2.249 0 011.272-1.828l2.321-1.107a9.29 9.29 0 01.051-.416c.686-4.509 4.074-6.262 6.308-6.863a.889.889 0 01.95.337c1.358 1.876 2.881 5.37.578 9.303a6.724 6.724 0 01-.222.355l1.107 2.322a2.246 2.246 0 01-.164 2.221l-1.79 2.671a.748.748 0 01-1.3-.098l-1.441-3.024a48.63 48.63 0 01-.847.816.987.987 0 01-1.002.208l.003-.002zm3.498-9.176a1.251 1.251 0 10-1.078-2.258 1.251 1.251 0 001.078 2.258zM21.326 84.21A.362.362 0 0021 84a.363.363 0 00-.327.21l-.73 1.551-1.632.249a.366.366 0 00-.292.254.385.385 0 00.09.383l1.183 1.208-.28 1.707a.382.382 0 00.148.367.357.357 0 00.384.027L21 89.153l1.458.803a.355.355 0 00.384-.027.382.382 0 00.147-.367l-.28-1.707 1.183-1.208a.383.383 0 00.09-.383.368.368 0 00-.292-.254l-1.633-.249-.73-1.55zM69.03 120.8a.844.844 0 00-.216-.882.846.846 0 00-.893-.168l-3.726 1.453-3.162-2.198a.852.852 0 00-.902-.038.897.897 0 00-.463.793l.066 3.946-3.214 2.443a.89.89 0 00-.34.856.832.832 0 00.607.662l3.758.98 1.18 3.7c.1.31.368.533.694.57a.891.891 0 00.837-.386l2.265-3.341 3.944-.146a.894.894 0 00.767-.505.857.857 0 00-.087-.899l-2.366-3.042 1.25-3.798zM204.856 25.816a.851.851 0 00-.876.157.852.852 0 00-.275.846l.92 3.652-2.517 2.906a.839.839 0 00-.152.863c.118.285.39.476.704.489l3.802.159 1.938 3.218c.16.264.463.41.78.374a.887.887 0 00.714-.544l1.422-3.546 3.707-.923a.881.881 0 00.638-.633.801.801 0 00-.264-.823l-2.924-2.36.364-3.788a.789.789 0 00-.387-.763.842.842 0 00-.876.032l-3.226 2.096-3.492-1.413zM111.5 130a2.5 2.5 0 100-5 2.5 2.5 0 000 5zM137 123a3.995 3.995 0 002.828-1.172 3.995 3.995 0 000-5.656 3.995 3.995 0 00-5.656 0 3.995 3.995 0 000 5.656A3.995 3.995 0 00137 123zM210.943 137.508c2.262 1.224 5.052.442 6.235-1.743 1.182-2.186.309-4.949-1.953-6.173a4.727 4.727 0 00-3.46-.424.313.313 0 00-.235.3.34.34 0 00.23.319c.195.067.387.15.576.252 1.775.96 2.461 3.131 1.532 4.849-.629 1.162-1.836 1.818-3.101 1.824a.315.315 0 00-.306.229.331.331 0 00.142.363c.111.071.223.139.34.202v.002zM194.61 116.392c.196.577.821.885 1.394.687l5.891-2.002c.577-.196.885-.821.687-1.393l-1.864-5.487.951-.323a8.844 8.844 0 007.008 3.28c.465-.011.762-.478.61-.916l-2.242-6.607 1.007-.342a1.463 1.463 0 002.282-.454 1.466 1.466 0 10-2.754-.933l-1.006.342-2.244-6.603c-.15-.442-.67-.632-1.041-.355a8.725 8.725 0 00-2.654 3.178 8.775 8.775 0 00-.907 3.687l-.952.323-1.86-5.484a1.095 1.095 0 00-1.393-.687l-5.892 2.002c-.576.196-.884.82-.686 1.393l1.864 5.487-3.375 1.146a1.47 1.47 0 00-.918 1.863l1.001 2.945a1.469 1.469 0 001.862.918l3.375-1.147 1.856 5.482zm.574-17.65l1.51 4.443-3.811 1.295-1.508-4.447 3.811-1.295-.002.004zm3.458 10.164l1.509 4.443-3.811 1.295-1.509-4.443 3.811-1.295zM68.378 43.567a.562.562 0 00-.031.797l2.17 2.345c.213.23.57.243.797.03l2.184-2.02.35.378a4.537 4.537 0 00-.073 3.973.348.348 0 00.557.095l2.63-2.432.371.4a.752.752 0 10.552-.51l-.37-.401 2.628-2.433c.176-.163.156-.446-.051-.562a4.517 4.517 0 00-3.964-.236l-.35-.379 2.183-2.019a.563.563 0 00.03-.797l-2.17-2.345a.562.562 0 00-.797-.031l-2.183 2.021-1.244-1.344a.754.754 0 00-1.065-.04l-1.173 1.084a.754.754 0 00-.041 1.066l1.243 1.343-2.183 2.017zm8.4-3.42l-1.77 1.637-1..........完整代码请登录后点击上方下载按钮下载查看