简单的特效--css画圆圈

最新推荐文章于 2023-11-04 11:41:09 发布

心与天游

最新推荐文章于 2023-11-04 11:41:09 发布

阅读量971

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/qq_32536863/article/details/83505464

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

注释的代码是点击画圈圈，没有注释的是长按画圆圈（ps:是效果）

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>⭕</title>
   
   <script src="jquery.min.js"></script>
   <style>
       * {
           margin: 0;
           padding: 0;
       }
       .outer{
           width: 90px;
           height: 90px;
           border-radius: 50%;
           position: relative;
           top: 50px;
           left: 200px;
           border: 5px solid #65bff4;
           background-color: #ffffff;
           z-index: 100;
       }
       .con {
           content: "";
           display: none;
           width: 45px;
           height: 90px;
           border: 5px solid #65bff4;
           border-left: transparent;
           border-radius: 0 100% 100% 0/50%;
           position: absolute;
           top: -5px;
           left: 45px;
           z-index: 25;
       }
       .d1 {
           width:80px;
           height: 110px;
           background-color: #fff;
           position: absolute;
           top: -10px;
           left: -35px;
           z-index: 20;
       }
       .d2 {
           width:80px;
           height: 110px;
           background-color: #fff;
           position: absolute;
           top: -10px;
           left: 45px;
           z-index: 20;

       }
       .longClick {
           width: 80px;
           height: 80px;
           position: absolute;
           border-radius: 50%;
           background-color: #ffffff;
           top: 5px;
           left: 5px;
           z-index: 40;
       }
       .outer img {
           width: 80px;
           height: 80px;
           position: absolute;
           border-radius: 50%;
           top: 0;
           left: 0;
           z-index: 39;
       }
       @keyframes d2 {
           0%{
               transform: rotate(0);
               transform-origin: 0% 50%;
           }
           99%{
               transform: rotate(180deg);
               transform-origin: 0% 50%;
               opacity: 1;
           }
           100%{
               transform: rotate(180deg);
               transform-origin: 0% 50%;
               opacity: 0;
           }
       }
       @keyframes d1 {
           0%{
               transform: rotate(0);
               transform-origin: 100% 50%;
           }
           99%{
               transform: rotate(180deg);
               transform-origin: 100% 50%;
               opacity: 1;
           }
           100%{
               transform: rotate(180deg);
               transform-origin: 100% 50%;
               opacity: 0;
           }
       }
       @keyframes dOne {
           0%{
               transform: rotate(180deg);
               transform-origin: 0% 50%;
               opacity: 0;
           }
           99%{
               transform: rotate(180deg);
               transform-origin: 100% 50%;
               opacity: 1;
           }
           100%{
               transform: rotate(0);
               transform-origin: 100% 50%;
               opacity: 1;
           }
       }
       @keyframes dTwo {
           0%{
               transform: rotate(180deg);
               transform-origin: 100% 50%;
               opacity: 0;
           }
           99%{
               transform: rotate(180deg);
               transform-origin: 100% 50%;
               opacity: 1;
           }
           100%{
               transform: rotate(0);
               transform-origin: 100% 50%;
               opacity: 1;
           }
       }
   </style>
</head>
<body>
   <div class="outer">
       <div class="con"></div>
       <div class="d1"></div>
       <div class="d2"></div>
       
       <div class="longClick">
           <img src="abc.png" alt="">
       </div>
   </div>
   <script>
       // 长按出现圆圈
       var state = false;
       var time1 = null,time2 = null;
       $('.longClick').on({
           touchstart: (e)=>{
               if (!state) {
                   state = true
               }
               time1 = setTimeout(()=>{
                   if (state) {
                       $('.d2').css({'animation':'2s d2 linear'});
                       $('.d2').css({'animation-fill-mode':'forwards'});
                       time2 = setTimeout(()=>{
                           $('.con').css({'display':'block'});
                           $('.d1').css({'animation':'2s d1 linear'});
                           $('.d1').css({'animation-fill-mode':'forwards'});
                       },2000)
                   }
               },500)
           },
           touchmove: (e)=>{
               clearTimeout(time1);
               state = false
           },
           touchend: (e)=>{
               clearTimeout(time1);
               clearTimeout(time2);
               state = false
               if(!state){
                   $('.d2').css({'animation':'0s dTwo linear'});
                   $('.d2').css({'animation-fill-mode':'forwards'});
                   $('.d1').css({'animation':'0s dOne linear'});
                   $('.d1').css({'animation-fill-mode':'forwards'});
                   $('.con').css({'display':'none'});
               }
           }
       })
       // 点击出现圆圈
       /*$('.longClick').on('click',()=>{
           $('.d2').css({'animation':'2s d2 linear'});
           $('.d2').css({'animation-fill-mode':'forwards'});
           setTimeout(()=>{
               $('.con').css({'display':'block'});
               $('.d1').css({'animation':'2s d1 linear'});
               $('.d1').css({'animation-fill-mode':'forwards'});
           },2000)
       })*/
   </script>
</body>
</html>