这段CSS代码展示了如何创建一个100px宽30px高的.success视频图标，包括一个圆形边框和内部的对号标记。代码中定义了动画来实现边框填充、缩放和颜色变化的效果，为图标添加动态视觉效果。
CSS
语言：
CSSSCSS
确定
.video-success {
width: 100px;
height: 30px;
margin: 0 auto;
}
.video-success .checkmark__circle {
stroke-dasharray: 166;
stroke-dashoffset: 166;
stroke-width: 2;
stroke-miterlimit: 10;
stroke: #7ac142;
fill: none;
-webkit-animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}
.video-success .checkmark {
width: 56px;
height: 56px;
border-radius: 50%;
display: block;
stroke-width: 2;
stroke: #fff;
stroke-miterlimit: 10;
margin: 10% auto;
box-shadow: inset 0px 0px 0px #7ac142;
-webkit-animation: fill 0.4s ease-in-out 0.4s forwards, scale 0.3s ease-in-out 0.9s both;
animation: fill 0.4s ease-in-out 0.4s forwards, scale 0.3s ease-in-out 0.9s both;
}
.video-success .checkmark__check {
-webkit-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%;
stroke-dasharray: 48;
stroke-dashoffset: 48;
-webkit-animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}
@-webkit-keyframes stroke {
100% {
stroke-dashoffset: 0;
}
}
@keyframes stroke {
100% {
stroke-dashoffset: 0;
}
}
@-webkit-keyframes scale {
0%, 100% {
-webkit-transform: none;
transform: none;
}
50% {
-webkit-transform: scale3d(1.1, 1.1, 1);
transform: scale3d(1.1, 1.1, 1);
}
}
@keyframes scale {
0%, 100% {
-webkit-transform: none;
transform: none;
}
50% {
-webkit-transform: scale3d(1.1, 1.1, 1);
transform: scale3d(1.1, 1.1, 1);
}
}
@-webkit-keyframes fill {
100% {
box-shadow: inset 0px 0px 0px 30px #7ac142;
}
}
@keyframes fill {
100% {
box-shadow: inset 0px 0px 0px 30px #7ac142;
}
}
扫一扫
261
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
