html ul 载入动画,打勾动画.html

Document

* {

/* padding: 0; */

margin: 0;

}

body {

display: flex;

justify-content: center;

align-items: center;

min-height: 100vh;

flex-direction: column;

}

h2 {

font-family: Helvetica;

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;

}

input[type="checkbox"]:checked+svg .circle {

animation: circle 1s ease-in-out;

animation-fill-mode: forwards;

}

.tick {

stroke-dasharray: 350;

stroke-dashoffset: 350;

}

input[type="checkbox"]:checked+svg .tick {

animation: tick .8s ease-out;

animation-fill-mode: forwards;

animation-delay: .95s;

}

@keyframes circle {

from {

stroke-dashoffset: 1194;

}

to {

stroke-dashoffset: 2388;

}

}

@keyframes tick {

from {

stroke-dashoffset: 350;

}

to {

stroke-dashoffset: 0;

}

}

@keyframes title {

form {

opacity: 0;

}

to {

opacity: 1;

}

}

cx="200" cy="200" r="190" class="circle" />

stroke-linejoin="round" class="tick" />

支付成功

一键复制

编辑

Web IDE

原始数据

按行查看

历史