css 签名字体,SVG 花样字体文本的自动签名动画

CSS

语言：

CSSSCSS

确定

body {

margin: 0;

padding: 0;

overflow: none;

}

.home {

position: absolute;

top: 0;

height: 100vh;

width: 100%;

color: #fff;

background: #446db3;

background: -webkit-gradient(left top, left bottom, color-stop(0%, #446db3), color-stop(100%, #103166));

background: -webkit-linear-gradient(top, #446db3 0%, #103166 100%);

background: linear-gradient(to bottom, #446db3 0%, #103166 100%);

overflow: none;

}

.logo-container {

position: relative;

top: 35%;

height: 20%;

width: 100%;

display: table;

text-align: center;

}

.logo {

display: table-cell;

vertical-align: middle;

}

.logo:hover {

cursor: pointer;

}

svg {

width: 20%;

}

path {

fill: none;

stroke: #fff;

stroke-width: 2;

stroke-linecap: round;

stroke-linejoin: round;

stroke-miterlimit: 10;

}

circle {

stroke: #446cb3;

stoke-width: 5;

stroke-linecap: round;

stroke-linejoin: round;

stroke-miterlimit: 10;

}

.svg-animated > .svg-0,

.svg-animated > .svg-7 {

stroke-dasharray: 172;

}

.svg-animated > .svg-1,

.svg-animated > .svg-3,

.svg-animated > .svg-6 {

stroke-dasharray: 141;

}

.svg-animated > .svg-2,

.svg-animated > .svg-5 {

stroke-dasharray: 76;

}

.svg-animated > .svg-4 {

stroke-dasharray: 190;

}

.svg-animated > .svg-8 {

stroke-dasharray: 163;

}

.svg-animated > .svg-9 {

stroke-dasharray: 92;

}

.svg-animated > .svg-underline {

stroke-dasharray: 155;

}

@-webkit-keyframes show-0 {

0% {

stroke-dashoffset: 172;

}

12% {

stroke-dashoffset: 0;

}

}

@-webkit-keyframes show-1 {

0%, 13% {

stroke-dashoffset: 141;

}

23% {

stroke-dashoffset: 0;

}

}

@-webkit-keyframes show-2 {

0%, 24% {

stroke-dashoffset: 76;

}

30% {

stroke-dashoffset: 0;

}

}

@-webkit-keyframes show-3 {

0%, 32% {

stroke-dashoffset: 141;

}

38% {

stroke-dashoffset: 0;

}

}

@-webkit-keyframes show-4 {

0%, 38% {

stroke-dashoffset: 190;

}

52% {

stroke-dashoffset: 0;

}

}

@-webkit-keyframes show-5 {

0%, 52% {

stroke-dashoffset: 76;

}

58% {

stroke-dashoffset: 0;

}

}

@-webkit-keyframes show-6 {

0%, 60% {

stroke-dashoffset: 141;

}

69% {

stroke-dashoffset: 0;

}

}

@-webkit-keyframes show-7 {

0%, 70% {

stroke-dashoffset: 172;

}

81% {

stroke-dashoffset: 0;

}

}

@-webkit-keyframes show-8 {

0%, 82% {

stroke-dashoffset: 163;

}

93% {

stroke-dashoffset: 0;

}

}

@-webkit-keyframes show-9 {

0%, 93% {

stroke-dashoffset: 92;

}

100% {

stroke-dashoffset: 0;

}

}

@-webkit-keyframes show-u {

0%, 50% {

stroke-dashoffset: 155;

}

100% {

stroke-dashoffset: 0;

}

}

.svg-animated > .svg-0 {

-webkit-animation: show-0 3.5s linear;

}

.svg-animated > .svg-1 {

-webkit-animation: show-1 3.5s linear;

}

.svg-animated > .svg-5 {

-webkit-animation: show-2 3.5s linear;

}

.svg-animated > .svg-3 {

-webkit-animation: show-3 3.5s linear;

}

.svg-animated > .svg-4 {

-webkit-animation: show-4 3.5s linear;

}

.svg-animated > .svg-2 {

-webkit-animation: show-5 3.5s linear;

}

.svg-animated > .svg-6 {

-webkit-animation: show-6 3.5s linear;

}

.svg-animated > .svg-7 {

-webkit-animation: show-7 3.5s linear;

}

.svg-animated > .svg-8 {

-webkit-animation: show-8 3.5s linear;

}

.svg-animated > .svg-9 {

-webkit-animation: show-9 3.5s linear;

}

.svg-animated > .svg-underline {

-webkit-animation: show-u 4s ease;

}