不含JS的PureCSS，将鼠标悬停时，动画多个对象应显示在圆圈顶部 Download

animation image when hover

 <style>
    html,body {
      background:#130560;
      overflow:hidden;
    }
    .seaContainer {
    position: relative;
      border-radius:50%;
      background:red;
      width:10%;
      padding:20px 0 20px 0;
      margin-top:30px;
      margin-left: 40%;
    }
    .stars__container
    {
      position:absolute;
      top:50%;
      left:5%;
      width:100px;
      height:50px;
      transform:translate(100%,-50%);
      posotion: absolute;

    }
    .stars
    {
      position:absolute;
      width:10px;
      height:10px;
      border-radius:100%;
      left:5%;
      top:65%;
      background:#fff;
      opacity:0.8;
    }
    span {
      color: #fff;
      font-size: 30px;
      padding:30px;
      position: absolute;
          animation: rot 3s infinite linear;

    }

    .test1 {
      position: absolute;
      right: 90%;
      left:40%;
    }
    $star-class: star;

    @for $i from 1 through 4{
      .#{$star-class}-#{$i}{
        top:25%*($i+1-1);
        left:10%;
        opacity: 0;
        animation: rot 3s infinite linear;
        animation-delay: 0.25s*$i;
        position:absolute;
    }
    }

    @keyframes move-right {
      0%
      {
        opacity:0;
      }
      10%
      {
        opacity:0.4;
        transform:translate(10%,10%);
      }
      50%
      {
        opacity:0.2;
        transform:translate(450%,25%);
      }
      80%
      {
        opacity:0;
         transform:translateX(555%);
      }
      100%
      {
        opacity:0;
        left:0%;
        top:0%;
      }
    }
</style>
    <div class="seaContainer">
          <div class="stars__container">
            <span class="test1 stars star-1">star1</span>
            <span class=" test2 stars star-2">star2</span>
            <span class="test3 stars star-3">star3</span>
            <span class="stars star-4">star4</span>
          </div>

        </div>

我尝试了此代码，但无法正常工作。我将星星图像放在span标签中。

0 个答案: