简单的特效--css画圆圈

注释的代码是点击画圈圈,没有注释的是长按画圆圈(ps:是效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>⭕</title>
    <!-- 引jQuery文件 路径不要错哦 -->
    <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>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值