纯css写的类似花纹图案的立体动态旋转

最新推荐文章于 2023-07-24 22:24:42 发布
最新推荐文章于 2023-07-24 22:24:42 发布
阅读量199 收藏 1
点赞数 1
分类专栏： css html 文章标签： css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43260038/article/details/108689932
版权
html 同时被 2 个专栏收录
18 篇文章 0 订阅
订阅专栏
css
17 篇文章 0 订阅
订阅专栏

纯css写的类似花纹图案的立体动态旋转

动态中的静态截图
在这里插入图片描述

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
  <style>
  html, body {
  width: 100%;
  height: 100%;
}

body {
  background-color: #140032;
  overflow: hidden;
  margin: 0;
}
body * {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  border-radius: 50%;
}

.galaxy:nth-child(1) {
  -webkit-transform: translateX(-120px) scale(-1, 1);
          transform: translateX(-120px) scale(-1, 1);
}

.galaxy:nth-child(2) {
  -webkit-transform: translateX(120px) scale(1, -1);
          transform: translateX(120px) scale(1, -1);
}

.stars {
  width: 200px;
  height: 200px;
}
.stars .circle {
  animation: 5s galaxy ease-in-out infinite reverse;
}
.stars .dot {
  width: 10px;
  height: 10px;
  border: 5px dotted #fff;
}
.stars .dot:nth-child(0) {
  -webkit-transform: rotate(0deg) translate(120px) scale(1);
          transform: rotate(0deg) translate(120px) scale(1);
  border-color: magenta;
}
.stars .dot:nth-child(1) {
  -webkit-transform: rotate(12deg) translate(120px) scale(0.9666666667);
          transform: rotate(12deg) translate(120px) scale(0.9666666667);
  border-color: #f500ff;
}
.stars .dot:nth-child(2) {
  -webkit-transform: rotate(24deg) translate(120px) scale(0.9333333333);
          transform: rotate(24deg) translate(120px) scale(0.9333333333);
  border-color: #eb00ff;
}
.stars .dot:nth-child(3) {
  -webkit-transform: rotate(36deg) translate(120px) scale(0.9);
          transform: rotate(36deg) translate(120px) scale(0.9);
  border-color: #e100ff;
}
.stars .dot:nth-child(4) {
  -webkit-transform: rotate(48deg) translate(120px) scale(0.8666666667);
          transform: rotate(48deg) translate(120px) scale(0.8666666667);
  border-color: #d700ff;
}
.stars .dot:nth-child(5) {
  -webkit-transform: rotate(60deg) translate(120px) scale(0.8333333333);
          transform: rotate(60deg) translate(120px) scale(0.8333333333);
  border-color: #cd00ff;
}
.stars .dot:nth-child(6) {
  -webkit-transform: rotate(72deg) translate(120px) scale(0.8);
          transform: rotate(72deg) translate(120px) scale(0.8);
  border-color: #c400ff;
}
.stars .dot:nth-child(7) {
  -webkit-transform: rotate(84deg) translate(120px) scale(0.7666666667);
          transform: rotate(84deg) translate(120px) scale(0.7666666667);
  border-color: #ba00ff;
}
.stars .dot:nth-child(8) {
  -webkit-transform: rotate(96deg) translate(120px) scale(0.7333333333);
          transform: rotate(96deg) translate(120px) scale(0.7333333333);
  border-color: #b000ff;
}
.stars .dot:nth-child(9) {
  -webkit-transform: rotate(108deg) translate(120px) scale(0.7);
          transform: rotate(108deg) translate(120px) scale(0.7);
  border-color: #a600ff;
}
.stars .dot:nth-child(10) {
  -webkit-transform: rotate(120deg) translate(120px) scale(0.6666666667);
          transform: rotate(120deg) translate(120px) scale(0.6666666667);
  border-color: #9c00ff;
}
.stars .dot:nth-child(11) {
  -webkit-transform: rotate(132deg) translate(120px) scale(0.6333333333);
          transform: rotate(132deg) translate(120px) scale(0.6333333333);
  border-color: #9200ff;
}
.stars .dot:nth-child(12) {
  -webkit-transform: rotate(144deg) translate(120px) scale(0.6);
          transform: rotate(144deg) translate(120px) scale(0.6);
  border-color: #8800ff;
}
.stars .dot:nth-child(13) {
  -webkit-transform: rotate(156deg) translate(120px) scale(0.5666666667);
          transform: rotate(156deg) translate(120px) scale(0.5666666667);
  border-color: #7e00ff;
}
.stars .dot:nth-child(14) {
  -webkit-transform: rotate(168deg) translate(120px) scale(0.5333333333);
          transform: rotate(168deg) translate(120px) scale(0.5333333333);
  border-color: #7400ff;
}
.stars .dot:nth-child(15) {
  -webkit-transform: rotate(180deg) translate(120px) scale(0.5);
          transform: rotate(180deg) translate(120px) scale(0.5);
  border-color: #6a00ff;
}
.stars .dot:nth-child(16) {
  -webkit-transform: rotate(192deg) translate(120px) scale(0.4666666667);
          transform: rotate(192deg) translate(120px) scale(0.4666666667);
  border-color: #6000ff;
}
.stars .dot:nth-child(17) {
  -webkit-transform: rotate(204deg) translate(120px) scale(0.4333333333);
          transform: rotate(204deg) translate(120px) scale(0.4333333333);
  border-color: #5600ff;
}
.stars .dot:nth-child(18) {
  -webkit-transform: rotate(216deg) translate(120px) scale(0.4);
          transform: rotate(216deg) translate(120px) scale(0.4);
  border-color: #4d00ff;
}
.stars .dot:nth-child(19) {
  -webkit-transform: rotate(228deg) translate(120px) scale(0.3666666667);
          transform: rotate(228deg) translate(120px) scale(0.3666666667);
  border-color: #4300ff;
}
.stars .dot:nth-child(20) {
  -webkit-transform: rotate(240deg) translate(120px) scale(0.3333333333);
          transform: rotate(240deg) translate(120px) scale(0.3333333333);
  border-color: #3900ff;
}
.stars .dot:nth-child(21) {
  -webkit-transform: rotate(252deg) translate(120px) scale(0.3);
          transform: rotate(252deg) translate(120px) scale(0.3);
  border-color: #2f00ff;
}
.stars .dot:nth-child(22) {
  -webkit-transform: rotate(264deg) translate(120px) scale(0.2666666667);
          transform: rotate(264deg) translate(120px) scale(0.2666666667);
  border-color: #2500ff;
}
.stars .dot:nth-child(23) {
  -webkit-transform: rotate(276deg) translate(120px) scale(0.2333333333);
          transform: rotate(276deg) translate(120px) scale(0.2333333333);
  border-color: #1b00ff;
}
.stars .dot:nth-child(24) {
  -webkit-transform: rotate(288deg) translate(120px) scale(0.2);
          transform: rotate(288deg) translate(120px) scale(0.2);
  border-color: #1100ff;
}
.stars .dot:nth-child(25) {
  -webkit-transform: rotate(300deg) translate(120px) scale(0.1666666667);
          transform: rotate(300deg) translate(120px) scale(0.1666666667);
  border-color: #0700ff;
}
.stars .dot:nth-child(26) {
  -webkit-transform: rotate(312deg) translate(120px) scale(0.1333333333);
          transform: rotate(312deg) translate(120px) scale(0.1333333333);
  border-color: #0003ff;
}
.stars .dot:nth-child(27) {
  -webkit-transform: rotate(324deg) translate(120px) scale(0.1);
          transform: rotate(324deg) translate(120px) scale(0.1);
  border-color: #000dff;
}
.stars .dot:nth-child(28) {
  -webkit-transform: rotate(336deg) translate(120px) scale(0.0666666667);
          transform: rotate(336deg) translate(120px) scale(0.0666666667);
  border-color: #0017ff;
}
.stars .dot:nth-child(29) {
  -webkit-transform: rotate(348deg) translate(120px) scale(0.0333333333);
          transform: rotate(348deg) translate(120px) scale(0.0333333333);
  border-color: #0021ff;
}
.stars .dot:nth-child(30) {
  -webkit-transform: rotate(360deg) translate(120px) scale(0);
          transform: rotate(360deg) translate(120px) scale(0);
  border-color: #002bff;
}
.stars .dot:nth-child(31) {
  -webkit-transform: rotate(372deg) translate(120px) scale(-0.0333333333);
          transform: rotate(372deg) translate(120px) scale(-0.0333333333);
  border-color: #0034ff;
}
.stars .dot:nth-child(32) {
  -webkit-transform: rotate(384deg) translate(120px) scale(-0.0666666667);
          transform: rotate(384deg) translate(120px) scale(-0.0666666667);
  border-color: #003eff;
}
.stars .dot:nth-child(33) {
  -webkit-transform: rotate(396deg) translate(120px) scale(-0.1);
          transform: rotate(396deg) translate(120px) scale(-0.1);
  border-color: #0048ff;
}
.stars .dot:nth-child(34) {
  -webkit-transform: rotate(408deg) translate(120px) scale(-0.1333333333);
          transform: rotate(408deg) translate(120px) scale(-0.1333333333);
  border-color: #0052ff;
}
.stars .dot:nth-child(35) {
  -webkit-transform: rotate(420deg) translate(120px) scale(-0.1666666667);
          transform: rotate(420deg) translate(120px) scale(-0.1666666667);
  border-color: #005cff;
}
.stars:nth-child(0) {
  -webkit-transform: rotate(0deg) translate(80px);
          transform: rotate(0deg) translate(80px);
}
.stars:nth-child(0) .circle {
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
}
.stars:nth-child(1) {
  -webkit-transform: rotate(18deg) translate(80px);
          transform: rotate(18deg) translate(80px);
}
.stars:nth-child(1) .circle {
  -webkit-animation-delay: -0.25s;
          animation-delay: -0.25s;
}
.stars:nth-child(2) {
  -webkit-transform: rotate(36deg) translate(80px);
          transform: rotate(36deg) translate(80px);
}
.stars:nth-child(2) .circle {
  -webkit-animation-delay: -0.5s;
          animation-delay: -0.5s;
}
.stars:nth-child(3) {
  -webkit-transform: rotate(54deg) translate(80px);
          transform: rotate(54deg) translate(80px);
}
.stars:nth-child(3) .circle {
  -webkit-animation-delay: -0.75s;
          animation-delay: -0.75s;
}
.stars:nth-child(4) {
  -webkit-transform: rotate(72deg) translate(80px);
          transform: rotate(72deg) translate(80px);
}
.stars:nth-child(4) .circle {
  -webkit-animation-delay: -1s;
          animation-delay: -1s;
}
.stars:nth-child(5) {
  -webkit-transform: rotate(90deg) translate(80px);
          transform: rotate(90deg) translate(80px);
}
.stars:nth-child(5) .circle {
  -webkit-animation-delay: -1.25s;
          animation-delay: -1.25s;
}
.stars:nth-child(6) {
  -webkit-transform: rotate(108deg) translate(80px);
          transform: rotate(108deg) translate(80px);
}
.stars:nth-child(6) .circle {
  -webkit-animation-delay: -1.5s;
          animation-delay: -1.5s;
}
.stars:nth-child(7) {
  -webkit-transform: rotate(126deg) translate(80px);
          transform: rotate(126deg) translate(80px);
}
.stars:nth-child(7) .circle {
  -webkit-animation-delay: -1.75s;
          animation-delay: -1.75s;
}
.stars:nth-child(8) {
  -webkit-transform: rotate(144deg) translate(80px);
          transform: rotate(144deg) translate(80px);
}
.stars:nth-child(8) .circle {
  -webkit-animation-delay: -2s;
          animation-delay: -2s;
}
.stars:nth-child(9) {
  -webkit-transform: rotate(162deg) translate(80px);
          transform: rotate(162deg) translate(80px);
}
.stars:nth-child(9) .circle {
  -webkit-animation-delay: -2.25s;
          animation-delay: -2.25s;
}
.stars:nth-child(10) {
  -webkit-transform: rotate(180deg) translate(80px);
          transform: rotate(180deg) translate(80px);
}
.stars:nth-child(10) .circle {
  -webkit-animation-delay: -2.5s;
          animation-delay: -2.5s;
}
.stars:nth-child(11) {
  -webkit-transform: rotate(198deg) translate(80px);
          transform: rotate(198deg) translate(80px);
}
.stars:nth-child(11) .circle {
  -webkit-animation-delay: -2.75s;
          animation-delay: -2.75s;
}
.stars:nth-child(12) {
  -webkit-transform: rotate(216deg) translate(80px);
          transform: rotate(216deg) translate(80px);
}
.stars:nth-child(12) .circle {
  -webkit-animation-delay: -3s;
          animation-delay: -3s;
}
.stars:nth-child(13) {
  -webkit-transform: rotate(234deg) translate(80px);
          transform: rotate(234deg) translate(80px);
}
.stars:nth-child(13) .circle {
  -webkit-animation-delay: -3.25s;
          animation-delay: -3.25s;
}
.stars:nth-child(14) {
  -webkit-transform: rotate(252deg) translate(80px);
          transform: rotate(252deg) translate(80px);
}
.stars:nth-child(14) .circle {
  -webkit-animation-delay: -3.5s;
          animation-delay: -3.5s;
}
.stars:nth-child(15) {
  -webkit-transform: rotate(270deg) translate(80px);
          transform: rotate(270deg) translate(80px);
}
.stars:nth-child(15) .circle {
  -webkit-animation-delay: -3.75s;
          animation-delay: -3.75s;
}
.stars:nth-child(16) {
  -webkit-transform: rotate(288deg) translate(80px);
          transform: rotate(288deg) translate(80px);
}
.stars:nth-child(16) .circle {
  -webkit-animation-delay: -4s;
          animation-delay: -4s;
}
.stars:nth-child(17) {
  -webkit-transform: rotate(306deg) translate(80px);
          transform: rotate(306deg) translate(80px);
}
.stars:nth-child(17) .circle {
  -webkit-animation-delay: -4.25s;
          animation-delay: -4.25s;
}
.stars:nth-child(18) {
  -webkit-transform: rotate(324deg) translate(80px);
          transform: rotate(324deg) translate(80px);
}
.stars:nth-child(18) .circle {
  -webkit-animation-delay: -4.5s;
          animation-delay: -4.5s;
}
.stars:nth-child(19) {
  -webkit-transform: rotate(342deg) translate(80px);
          transform: rotate(342deg) translate(80px);
}
.stars:nth-child(19) .circle {
  -webkit-animation-delay: -4.75s;
          animation-delay: -4.75s;
}
.stars:nth-child(20) {
  -webkit-transform: rotate(360deg) translate(80px);
          transform: rotate(360deg) translate(80px);
}
.stars:nth-child(20) .circle {
  -webkit-animation-delay: -5s;
          animation-delay: -5s;
}

@-webkit-keyframes galaxy {
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes galaxy {
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

  </style>
 </HEAD>

 <BODY>
  <div class='galaxy'>
  <div class='stars'>
    <div class='circle'>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
    </div>
  </div>
  <div class='stars'>
    <div class='circle'>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
    </div>
  </div>
  <div class='stars'>
    <div class='circle'>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
    </div>
  </div>
  <div class='stars'>
    <div class='circle'>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
    </div>
  </div>
  <div class='stars'>
    <div class='circle'>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
    </div>
  </div>
  <div class='stars'>
    <div class='circle'>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
    </div>
  </div>
  <div class='stars'>
    <div class='circle'>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
    </div>
  </div>
  <div class='stars'>
    <div class='circle'>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
    </div>
  </div>
  <div class='stars'>
    <div class='circle'>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
    </div>
  </div>
  <div class='stars'>
    <div class='circle'>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
    </div>
  </div>
  <div class='stars'>
    <div class='circle'>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
    </div>
  </div>
  <div class='stars'>
    <div class='circle'>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
    </div>
  </div>
  <div class='stars'>
    <div class='circle'>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
    </div>
  </div>
  <div class='stars'>
    <div class='circle'>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
    </div>
  </div>
  <div class='stars'>
    <div class='circle'>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
    </div>
  </div>
  <div class='stars'>
    <div class='circle'>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
    </div>
  </div>
  <div class='stars'>
    <div class='circle'>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
    </div>
  </div>
  <div class='stars'>
    <div class='circle'>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
    </div>
  </div>
  <div class='stars'>
    <div class='circle'>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
    </div>
  </div>
  <div class='stars'>
    <div class='circle'>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
    </div>
  </div>
</div>
<div class='galaxy'>
  <div class='stars'>
    <div class='circle'>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
    </div>
  </div>
  <div class='stars'>
    <div class='circle'>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
    </div>
  </div>
  <div class='stars'>
    <div class='circle'>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
    </div>
  </div>
  <div class='stars'>
    <div class='circle'>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
    </div>
  </div>
  <div class='stars'>
    <div class='circle'>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
    </div>
  </div>
  <div class='stars'>
    <div class='circle'>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
    </div>
  </div>
  <div class='stars'>
    <div class='circle'>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
    </div>
  </div>
  <div class='stars'>
    <div class='circle'>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
    </div>
  </div>
  <div class='stars'>
    <div class='circle'>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
    </div>
  </div>
  <div class='stars'>
    <div class='circle'>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
    </div>
  </div>
  <div class='stars'>
    <div class='circle'>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
    </div>
  </div>
  <div class='stars'>
    <div class='circle'>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
    </div>
  </div>
  <div class='stars'>
    <div class='circle'>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
    </div>
  </div>
  <div class='stars'>
    <div class='circle'>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
    </div>
  </div>
  <div class='stars'>
    <div class='circle'>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
    </div>
  </div>
  <div class='stars'>
    <div class='circle'>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
    </div>
  </div>
  <div class='stars'>
    <div class='circle'>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
    </div>
  </div>
  <div class='stars'>
    <div class='circle'>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
    </div>
  </div>
  <div class='stars'>
    <div class='circle'>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
    </div>
  </div>
  <div class='stars'>
    <div class='circle'>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
    </div>
  </div>
</div>

 </BODY>
</HTML>
时光飞逝，岁月依然
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
纯css3实现螺旋状动态旋转导航下拉菜单
06-12
不需要额外的js实现的动态效果 占用客户端内存极低 当鼠标悬停在一级导航上，二级导航呈现螺旋状效果下拉展示 使用方法： 1、引入lanrenzhijia.css样式 2、将index.html中的代码部分拷贝到你需要的...
纯css3全屏图片幻灯片3D立体旋转切换特效
11-03
【纯CSS3全屏图片幻灯片3D立体旋转切换特效】是一种利用现代浏览器支持的CSS3特性实现的网页动态效果。在不依赖JavaScript或任何外部库的情况下，仅通过CSS3就能创建出具有视觉冲击力的全屏图片展示，同时结合3D立体...
CSS3五颜六色的花纹图案动画js特效
ICode联盟
03-14 158
CSS3@keyframes属性制作五颜六色的花纹图案动画特效，星星、叶子、花朵、爱心混合动画效果。
html图片环绕怎么设置,css怎么实现图片环绕的效果，求详解
weixin_35851654的博客
06-04 462
竹马君大图用float，小图用margin——Css里用nth-child()控制不同小图的位置。HTML部分012345css部分.rect-group{width:320px;height:160x;background:#efefef;}.rect{background:#ccc;}.big{float:left;width:210px;height:110px;}.s...
【css】动画彩色条纹。
KatyLight的博客
08-02 225
【css】动画彩色条纹。
css3 多种边框样式
fengxiaopeng74的博客
02-05 674
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .div { ...
css实现纹理条纹，波点背景效果
qq_23858785的博客
07-24 2109
css实现纹理条纹，波点背景效果
CSS3立体3D杯子旋转特效
07-24
【CSS3立体3D杯子旋转特效】是一种利用CSS3的强大功能来实现的视觉效果，它展示了3个彩色的3D立体杯子在网页上进行旋转的动态场景。这种特效充分利用了CSS3中的3D转换、变换和动画属性，使得在不借助JavaScript或者...
纯css写一个动态圣诞老人.html
最新发布
06-27
通过巧妙地应用CSS的@keyframes动画规则、position定位属性以及其他视觉效果，创建了一个具有动态摇摆动作的3D圣诞老人形象。 适用人群 前端开发者：希望在不使用JavaScript的情况下增加网页的趣味性和互动性。 ...
纯css3 transform旋转属性创建立体纹理文字特效
11-23
以上就是使用纯CSS3 `transform`旋转属性创建立体纹理文字特效的基本步骤。通过调整不同的参数，你可以创建出各种独特的视觉效果，增强网页的交互性和吸引力。在实际应用中，可能还需要结合JavaScript或者其他交互...
花纹背景css整站模板
12-13
花纹背景css整站模板
CSS3五颜六色的花纹图案动画特效
06-11
CSS3@keyframes属性制作五颜六色的花纹图案动画特效，星星、叶子、花朵、爱心混合动画效果。
CSS3制作花纹图案动画特效特效代码
03-20
CSS3制作花纹图案动画特效是一款用@keyframes制作一个星星叶子花朵爱心混合的动画效果。
html5 css3 3D螺旋动画特效.zip
07-11
<html> <head> <meta charset="UTF-8"> <title>html5 css3 3D螺旋动画特效</title> <link rel="stylesheet" href="css/style.css?3.1.64" media="screen" type="text/css" /> </head> <body> [removed][removed]   </body> </html> 一款炫酷的基于html5 css3实现的螺旋动画特效，全屏css3网页动画效果。
css3 svg方块组合花纹图形背景动画特效
06-11
css3 svg绘制的方块组合花纹图形背景动画特效，旋转着的渐变方块组成花纹图案。
css 背景条纹效果
Young_Gao的博客
01-03 1179
background-image: linear-gradient(45deg,red 25%,green 0,green 50%,red 0,red 75%,green 0); background-size: 40px 40px;
CSS:条纹背景的实现
前端御书房
10-01 992
线性渐变实现条纹背景适用于简单条纹背景，复杂的背景还是需要使用图片实现。
css花纹背景
weixin_34292402的博客
03-16 647
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> </head> <style type="text/css"> .patterns { width: 200px; height: 200px; ...
css3 svg线条花纹动画js特效
ICode联盟
10-17 154
下载地址 css3 svg线条花纹动画特效是一款彩色的线条花纹旋转变形动画特效。 dd:
纯CSS打造立体旋转3D幻灯片
"这篇教程介绍了如何仅使用CSS创建立体旋转幻灯片，无需JavaScript。教程适合中等难度的读者，需要约45分钟阅读。为了观看效果，建议使用支持3D CSS和GPU加速的最新版Safari或Chrome浏览器。通过CSS3的3D变换属性，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值