html字体随页面宽度变化,SVG CSS3 字体宽度随时间变宽

CSS

语言：

CSSSCSS

确定

body > svg {

width: 600px;

margin: 4rem auto 0;

display: block;

}

body > svg path {

fill: none;

stroke: #222;

stroke-width: 2;

stroke-linecap: round;

stroke-linejoin: round;

stroke-miterlimit: 10;

-webkit-animation-name: stroke-offset, stroke-width;

animation-name: stroke-offset, stroke-width;

-webkit-animation-timing-function: ease-out, ease-out;

animation-timing-function: ease-out, ease-out;

-webkit-animation-fill-mode: forwards, forwards;

animation-fill-mode: forwards, forwards;

}

path:nth-child(1) {

-webkit-animation-delay: 0s, 0s;

animation-delay: 0s, 0s;

-webkit-animation-duration: 0.90909s, 3s;

animation-duration: 0.90909s, 3s;

stroke-dasharray: 1000, 1000;

stroke-dashoffset: 1000;

}

path:nth-child(2) {

-webkit-animation-delay: 0.90909s, 0s;

animation-delay: 0.90909s, 0s;

-webkit-animation-duration: 0.45455s, 3s;

animation-duration: 0.45455s, 3s;

stroke-dasharray: 500, 500;

stroke-dashoffset: 500;

}

path:nth-child(3) {

-webkit-animation-delay: 1.36364s, 0s;

animation-delay: 1.36364s, 0s;

-webkit-animation-duration: 1s, 3s;

animation-duration: 1s, 3s;

stroke-dasharray: 1100, 1100;

stroke-dashoffset: 1100;

}

@-webkit-keyframes stroke-offset {

to {

stroke-dashoffset: 0;

}

}

@keyframes stroke-offset {

to {

stroke-dashoffset: 0;

}

}

@-webkit-keyframes stroke-width {

to {

stroke-width: 12;

}

}

@keyframes stroke-width {

to {

stroke-width: 12;

}

}

html,

body {

height: 100%;

}

body {

background: -webkit-linear-gradient(top left, cornSilk, #fff3c3);

background: linear-gradient(top left, cornSilk, #fff3c3);

background-size: cover;

background-repeat: no-repeat;

}