CSS3實現打勾效果
關於打勾✔效果，應該都不陌生。
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~h2
input[type="checkbox"]:checked+svg .circle
input[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;
}
}
下載封裝好的效果
👉下載直接使用喲😀