CSS3实现打勾(✔)效果-CFANZ编程社区

CSS3实现打勾效果

HTML主体

我们看，这个效果的HTML结构
属性：

样式属性

关于打勾✔效果，应该都不陌生。

eg：我们在某些商场，支付的时候，支付成功会有个成功的标识，就像下面这样

CSS3实现打勾(✔)效果_html

HTML主体

我们看，这个效果的HTML结构

<svg>标签作为画布
<circle>标签来画✔外围的圆
<polyline>标签来画✔

属性：

fill="none" 设置背景颜色为无色
stroke="#68E534" 设置圆的主题颜色同✔
stroke-width="20" 设置线条的粗细
stroke-linecap="round" 设置线条两端为圆角
stroke-linejoin="round" 设置✔的交点为圆角
points="88,214 173,284 304,138" 确定✔的位置

<body>
    <input type="checkbox">
    <svg>
        <circle class="circle" fill="none" stroke="#68E534" stroke-width="20" cx="200" cy="200" r="190"
            stroke-linecap="round" transform="rotate(-90,200,200)" />
        <polyline class="tick" fill="none" stroke="#68E534" stroke-width="24" points="88,214 173,284 304,138"
            stroke-linecap="round" stroke-linejoin="round" />
    </svg>
    <h2>Success</h2>
</body>

样式属性

主流的样式设置，就不过的赘述啦

input[type="checkbox"]:checked~h2input[type="checkbox"]:checked+svg .circleinput[type="checkbox"]:checked+svg .tick
实现联动效果（类似于js）

@keyframes circle 设置动态范围

animation-fill-mode: forwards; 必不可少的一项，因为我们在初始化的时候我们设置显示范围为不可见，这是属性是用来设置显示停留在最后时刻，这样我们就能实现只有进场动画，一个从无到有的显示效果

body {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    min-height: 100vh;
    flex-direction: column;
}

svg {
    width: 400px;
    height: 400px;
}

h2 {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 36px;
    margin-top: 40px;
    color: #333;
    opacity: 0;
}

input[type="checkbox"]:checked~h2 {
    animation: .6s title ease-in-out;
    animation-delay: 1.2s;
    animation-fill-mode: forwards;
}

.circle {
    stroke-dasharray: 1194;
    stroke-dashoffset: 1194;
}

@keyframes circle {
    from {
        stroke-dashoffset: 1194;
    }
    to {
        stroke-dashoffset: 2388;
    }
}

input[type="checkbox"]:checked+svg .circle {
    animation: circle 1s ease-in-out;
    animation-fill-mode: forwards;
}

.tick {
    stroke-dasharray: 350;
    stroke-dashoffset: 350;
}

@keyframes tick {
    from {
        stroke-dashoffset: 350;
    }
    to {
        stroke-dashoffset: 0;
    }
}

input[type="checkbox"]:checked+svg .tick {
    animation: tick 0.8s ease-in-out;
    animation-fill-mode: forwards;
    animation-delay: .95s;
}

@keyframes title {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

下载封装好的效果
👉下载直接使用哟😀

⬆