注释的代码是点击画圈圈,没有注释的是长按画圆圈(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>