Realizing Scintillation Point Marking of Rotating Earth with css3 Animation

Previously, I wanted to use position ing to nest several div s to achieve the effect of zooming and flickering. After realizing this, I found that the html nesting structure was too complex, and the page structure was too complex after the number of tag points was too large. So I thought about how to use pseudo-elements to achieve the effect of external flickering, combining the two attributes of css3 animation. To achieve: scale(), rotate().

      <div class="box">
          <div class="earth">
              <div class="abs abs1"></div>
              <div class="abs abs2"></div>
              <div class="abs abs3"></div>
              <div class="abs abs4"></div>
          </div>
      </div>

	  .box {
         width: 800px;
         height: 320px;
         text-align: center;
         padding: 10px 0px;
         border: 1px solid #f1f1f1;
         margin: 0px auto;
         overflow: hidden;
       }
     
       .earth{
            position: relative;
            width: 300px;
            height: 300px;
            background-color: rgb(122, 163, 240);
            background-image: url('./earth.png');//Background picture of the Earth, attached at the bottom of the article
            background-size: 100%;
            background-repeat: no-repeat;
            border-radius: 100%;
            animation: 60s infinite linear rotate;
            overflow: hidden;
        }

        .abs{
            display: inline-block;
            width: 10px;
            height: 10px;
            border-radius: 100%;
            border: #fff 1px solid;
            margin: 10px;
        }

        .abs::before, .abs::after{
            position: absolute;
            z-index: -1;
            display: block;
            content: '';
            width: 10px;
            height: 10px;
            border-radius: 100%;
            opacity: .9;
            animation: abc 2.2s infinite;
        }

        .abs::after{
            opacity: .8;
            animation-delay: 1.9s;
        }

        .abs1, .abs1::after, .abs1::before{
            background-color: rgb(144, 43, 238);
        }

        .abs2, .abs2::after, .abs2::before{
            background-color: rgb(238, 43, 53);
        }

        .abs3, .abs3::after, .abs3::before{
            background-color: rgb(30, 140, 230);
        }
        
        .abs4, .abs4::after, .abs4::before{
            background-color: rgb(56, 209, 82);
        }

        .abs1{
            position: absolute;
            top: 55px;
            left: 30px;
        }

        .abs2{
            position: absolute;
            top: 210px;
            left: 100px;
        }

        .abs3{
            position: absolute;
            top: 110px;
            left: 230px;
        }

        .abs4{
            position: absolute;
            top: 460px;
            left: 710px;
        }

        @keyframes abc{
            100% {
                transform: scale(3.8);
                opacity: 0;
            }
        }

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

By the way, if the offset is not set when position:absolute is set, the element will be separated from the document stream but will not leave the previous position, so at this point: before and after will overlap. When using css3 animation, two attributes trigger GPU rendering: translateZ(0), translate3d(0,0,0).
Background map annex:

Tags: css3

Posted on Mon, 07 Oct 2019 14:44:01 -0400 by Mad_T