纯CSS星空动画

下载代码

html

css

分享到微信朋友圈

html

•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•

css

@-webkit-keyframes stars {
  50% {
    opacity: 1;
  }
  100% {
    transform: translate3d(0vmin, 0vmin, 1000vmin) scale(5);
    opacity: 0;
  }
}
html, body {
  width: 100%;
  height: 100%;
}

body {
  perspective: 200vmin;
  perspective-origin: 50% 50%;
  background: #000;
  overflow: hidden;
}
body span {
  width: .5vmin;
  height: .5vmin;
  position: absolute;
  top: 50vh;
  left: 50vw;
  transform: translate3d(0vmin, 0vmin, -5000vmin) scale(5);
  opacity: 0;
}
body span:nth-of-type(1) {
  box-shadow: 17vmin -10vmin 0 #fff , -4vmin -25vmin 0 #fff , -8vmin 36vmin 0 #fff , 40vmin 9vmin 0 #fff , 21vmin -25vmin 0 #fff;
  animation: stars 10s infinite linear;
}
body span:nth-of-type(2) {
  animation: stars 9s infinite linear 1s;
  box-shadow: 42vmin -20vmin 0 #fff , -45vmin -2vmin 0 #fff , 38vmin 50vmin 0 #fff , 5vmin 54vmin 0 #fff , -4vmin -41vmin 0 #fff , 29vmin 33vmin 0 #fff , -15vmin 40vmin 0 #fff;
}
body span:nth-of-type(3) {
  animation: stars 8s infinite linear 2s;
  box-shadow: -47vmin -29vmin 0 #fff , 9vmin 27vmin 0 #fff , -45vmin 41vmin 0 #fff , 1vmin 20vmin 0 #fff , 13vmin -11vmin 0 #fff , 37vmin -39vmin 0 #fff , -15vmin -30vmin 0 #fff , -9vmin 31vmin 0 #fff , 1vmin -11vmin 0 #fff , -39vmin -12vmin 0 #fff;
}
body span:nth-of-type(4) {
  animation: stars 7s infinite linear 3s;
  box-shadow: 17vmin -10vmin 0 #fff , -4vmin -25vmin 0 #fff , -8vmin 36vmin 0 #fff , 40vmin 9vmin 0 #fff , 21vmin -25vmin 0 #fff;
}
body span:nth-of-type(5) {
  animation: stars 6s infinite linear 4s;
  box-shadow: 42vmin -20vmin 0 #fff , -45vmin -2vmin 0 #fff , 38vmin 50vmin 0 #fff , 5vmin 54vmin 0 #fff , -4vmin -41vmin 0 #fff , 29vmin 33vmin 0 #fff , -15vmin 40vmin 0 #fff;
}
body span:nth-of-type(6) {
  animation: stars 5s infinite linear 5s;
  box-shadow: -47vmin -29vmin 0 #fff , 9vmin 27vmin 0 #fff , -45vmin 41vmin 0 #fff , 1vmin 20vmin 0 #fff , 13vmin -11vmin 0 #fff , 37vmin -39vmin 0 #fff , -15vmin -30vmin 0 #fff , -9vmin 31vmin 0 #fff , 1vmin -11vmin 0 #fff , -39vmin -12vmin 0 #fff;
}
body span:nth-of-type(7) {
  animation: stars 4s infinite linear 6s;
  box-shadow: 17vmin -10vmin 0 #fff , -4vmin -25vmin 0 #fff , -8vmin 36vmin 0 #fff , 40vmin 9vmin 0 #fff , 21vmin -25vmin 0 #fff;
}
body span:nth-of-type(8) {
  animation: stars 3s infinite linear 7s;
  box-shadow: -47vmin -29vmin 0 #fff , 9vmin 27vmin 0 #fff , -45vmin 41vmin 0 #fff , 1vmin 20vmin 0 #fff , 13vmin -11vmin 0 #fff , 37vmin -39vmin 0 #fff , -15vmin -30vmin 0 #fff , -9vmin 31vmin 0 #fff , 1vmin -11vmin 0 #fff , -39vmin -12vmin 0 #fff;
}
body span:nth-of-type(9) {
  animation: stars 2s infinite linear 8s;
  box-shadow: 42vmin -20vmin 0 #fff , -45vmin -2vmin 0 #fff , 38vmin 50vmin 0 #fff , 5vmin 54vmin 0 #fff , -4vmin -41vmin 0 #fff , 29vmin 33vmin 0 #fff , -15vmin 40vmin 0 #fff;
}
body span:nth-of-type(10) {
  animation: stars 1s infinite linear 9s;
  box-shadow: 17vmin -10vmin 0 #fff , -4vmin -25vmin 0 #fff , -8vmin 36vmin 0 #fff , 40vmin 9vmin 0 #fff , 21vmin -25vmin 0 #fff;
}

JavaScript

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