CSS3实现打勾效果
- HTML主体
- 我们看，这个效果的HTML结构
- 属性：
- 样式属性
关于打勾✔效果，应该都不陌生。
eg：我们在某些商场，支付的时候，支付成功会有个成功的标识，就像下面这样
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;
}
}下载封装好的效果