html动画效果效果图,CSS+HTML<svg路径填充动画效果>

效果图：

iphone.gif

svg在线生成地址🎄，画完图之后直接 Ctrl+U生成代码，直接取其中 路径部分替换掉，就可以变成其他图案 🎉

bianfu.gif

fengye.gif

代码如下：

Document

body,

html {

height: 100%;

}

body {

margin: 0;

display: flex;

justify-content: center;

align-items: center;

}

.box {

width: 580px;

height: 400px;

clip-path: url(#svgTextPath);

position: relative;

/* 背景底色 */

background: #ccc;

overflow: hidden;

}

.box::after{

content: '';

width: 100%;

height: 100%;

position: absolute;

left: 0;

top: 0;

/* 最终填充颜色 */

background: #222222;

transform: translateY(100%);

animation: move 3s linear both 1;

}

@keyframes move {

100%{

transform: translateY(0%);

}

}

svg{

width: 100%;

height: 100%;

}