效果图(这里用点击事件来模拟触发事件):
代码:
HTML
<main>
<div class="box">
<svg class="arrow" width="40" height="40" viewBox="0 0 40 40">
<circle
cx="50%"
cy="50%"
r="19"
fill="none"
stroke="#ffffff"
stroke-width="2"
class="circle"
></circle>
<polyline
points="8,20 18,30 30 12"
fill="none"
stroke="#ffffff"
stroke-width="2"
class="hookmark"
></polyline>
</svg>
</div>
</main>
css
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
main {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
/* 按钮添加样式 */
.box {
width: 180px;
height: 60px;
background-image: linear-gradient(160deg, #0093e9, #80d0c7);
border-radius: 8px;
cursor: pointer;
box-shadow: 0 2px rgba(0, 147, 233, 0.28);
position: relative;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
/* 打钩样式 */
.box .hookmark {
opacity: 0;
}
/* 加载完成时 出现打钩的样式 */
.box.completed .hookmark {
opacity: 1;
stroke-dasharray: 100 100;
stroke-dashoffset: 100;
animation: 1s linear hookmarkTransform forwards 0.5s;
}
/* 初始化圆圈(opacity: 0;隐藏状态) */
.box .circle {
opacity: 0;
transition: all 2.5s;
stroke-dasharray: 314;
stroke-dashoffset: 314;
}
/* 加载完成时 圈圈出现 */
.box.completed .circle {
opacity: 1;
stroke-dashoffset: 0;
}
/* 打钩的动态样式 */
@keyframes hookmarkTransform {
from {
stroke-dasharray: 100 100;
stroke-dashoffset: 100;
}
to {
stroke-dasharray: 100 100;
stroke-dashoffset: 0;
}
}
</style>
JS
var uploadButton = document.querySelector('.box')
uploadButton.addEventListener('click', () => {
// //点击事件
uploadButton.classList.add('completed')
})