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-durati.........完整代码请登录后点击上方下载按钮下载查看