波浪-语音识别动画

最新推荐文章于 2022-10-25 16:11:52 发布

hhhuuu009

最新推荐文章于 2022-10-25 16:11:52 发布

阅读量301

点赞数

文章标签： linq p2p html

本文链接：https://blog.csdn.net/weixin_41883580/article/details/124815924

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <style>
           body,html{
               margin: 0;
               padding: 0;
               width: 100%;
               height: 100%;
               display: flex;
               align-items: center;
               justify-content: center;
           }
           .quan_1,.quan_2,.quan_3{
           position: absolute;
           top: 0px;
           left: 0px;
           //transform: translate(-50%,-50%);
           }
           .quan_1{
           width: 100%;
           height: 100%;
           border-radius: 50%;
           opacity: 0;
           border: 2px solid rgba(0,186,255,0.55);
           animation: quan_1_show 2s linear infinite;


           }
           .quan_2{
           width: 100%;
           height: 100%;
           border-radius: 50%;
           border: 2px solid rgba(0,186,255,0.45);
           animation: quan_1_show 2s linear infinite;
           animation-delay:1s;
           -webkit-animation-delay:1s;

           }
           .quan_3{
           width: 100%;
           height: 100%;
           border-radius: 50%;
           border: 2px solid rgba(0,186,255,0.35);
           -webkit-animation-name: quan_1_show;
           animation-delay:2s;
           -webkit-animation-delay:2s;

           }
           .left_box{
               width: 170px;
               height: 170px;
               cursor: pointer;
               position: relative;
           }
           .quan_ht{
               width: 100%;
               height: 100%;
               position: absolute;
               cursor: pointer;
               z-index: 99999;
               background: rgba(24,136,220, 0.5);
               background-size: 100% 100%;
           }
           .quan_1,.quan_2,.quan_3{
position: absolute;
top: 0px;
left: 0px;
}
           @keyframes quan_1_show {
           0% {
           transform: scale(1);
           -webkit-transform: scale(1);
           opacity: 1;
           }

           25% {
           transform: scale(1.1);
           -webkit-transform: scale(1.1);
           opacity: 0.7;
           }

           50% {
           transform: scale(1.2);
           -webkit-transform: scale(1.2);
           opacity: 0.5;
           }

           75% {
           transform: scale(1.3);
           -webkit-transform: scale(1.3);
           opacity: 0.3;
           }

           100% {
           transform: scale(1.4);
           -webkit-transform: scale(1.4);
           opacity: 0.0;
           }
           }
       </style>
   </head>
   <body>
       <div class="box1">
           <div class="left_box">
           <div class="quan_ht" > </div>
           <p class="quan_1" ></p>
           <p class="quan_2" ></p>
           <p class="quan_3" ></p>

           </div>
       </div>
   </body>
</html>

hhhuuu009

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
波浪-语音识别动画

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> body,html{ margin: 0; padding: 0; width: 100%;...
复制链接

扫一扫