css3热点图动画

最新推荐文章于 2023-08-09 21:03:29 发布

XIAOERDS

最新推荐文章于 2023-08-09 21:03:29 发布

阅读量205

点赞数

文章标签： css css3

本文链接：https://blog.csdn.net/XIAOERDS/article/details/106779836

版权

 <style>
        .dd {
            position: relative;
            width: 600px;   
            height: 500px;
            background-color:pink;
        
        }
        
      .city {
          position: absolute;
          top: 300px;
          right: 100px;
      }
      .dotted {
            width: 8px;
          height: 8px;
          background-color: blue;
          border-radius: 50%;
      }
      .city div[class^='pusle'] {
          position: absolute;
            top: 50%;
            left: 50%;
           transform: translate(-50%,-50%); /*保证我们的小波文，在父盒子里水平居中，垂直居中，放大以后就会向中心四周发散 */
          width: 8px;
          height: 8px;
          box-shadow: 0 0 8px #009df0;
          border-radius: 50%;
          animation: am 1.2s linear infinite;
      }
      .city div.pusle2 {
          animation-delay: 0.6s;
      }
      .city div.pusle2 {
          animation-delay: 0.8s;
      }
      @keyframes am {
           0% {

           }
           70% {
               width: 40PX;
               height: 40PX;
           }
           100% {
            width: 70px;
            height: 70px;
            opacity: 0;
           }
      }
    </style>  
    <div class="dd">
       <div class="city">
           <div class="dotted"></div>
           <div class="pusle1"></div>
           <div class="pusle2"></div>
           <div class="pusle3"></div>
       </div>
   </div>