svg+ccss实现文字描边入场动画效果代码
代码语言：html
所属分类：动画
代码描述：svg+ccss实现文字描边入场动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<style>
* {
border: 0;
box-sizing: border-box;
margin: 0;
padding: 0;
}
:root {
--hue: 223;
--bg: hsl(var(--hue),90%,90%);
--fg: hsl(var(--hue),90%,10%);
--primary: hsl(var(--hue),90%,50%);
--secondary: hsl(198,90%,50%);
--trans-dur: 0.3s;
font-size: calc(16px + (48 - 16) * (100vw - 320px) / (2560 - 320));
}
body {
background-color: var(--bg);
color: var(--fg);
font: 1em/1.5 sans-serif;
display: flex;
height: 100vh;
transition:
background-color var(--trans-dur),
color var(--trans-dur);
}
.logo {
--anim-dur: 4s;
display: block;
overflow: visible;
margin: auto;
width: 13.5em;
height: auto;
}
.logo__fill,
.logo__letter,
.logo__letter path {
animation: logoFill var(--anim-dur) cubic-bezier(0.65,0,0.35,1) infinite;
}
.logo__fill {
transform: translateX(-100%);
}
.logo__letter {
animation-name: logoLetter;
animation-timing-function: cubic-bezier(0.37,-0.67,0.63,1.67);
transform: translateY(50%);
}
.logo__letter path {
animation-name: logoStroke1;
stroke-dasharray: 107 107;
stroke-dashoffset: -107;
}
.logo__letter:nth-child(2),
.logo__letter:nth-child(2) path {
animation-delay: calc(var(--anim-dur) * 0.02);
}
.logo__letter:nth-child(2) path {
animation-name: logoStroke2;
stroke-dasharray: 59 59;
stroke-dashoffset: -59;
}
.logo__letter:nth-child(3),
.logo__letter:nth-child(3) path {
animation-delay: calc(var(--anim-dur) * 0.04);
}
.logo__letter:nth-child(3) path {
animation-name: logoStroke3;
stroke-dasharray: 107 107;
stroke-dashoffset: -107;
}
.logo__letter:nth-child(4),
.logo__letter:nth-child(4) path {
animation-delay: calc(var(--anim-dur) * 0.06);
}
.logo__letter:nth-child(4) path {
animation-name: logoStroke4;
stroke-dasharray: 59 59;
stroke-dashoffset: -59;
}
.logo__letter:nth-child(5),
.logo__letter:nth-child(5) path {
animation-delay: calc(var(--anim-dur) * 0.08);
}
.logo__letter:nth-child(5) path {
animation-name: logoStroke5;
stroke-dasharray: 118 118;
stroke-dashoffset: -118;
}
.logo__letter:nth-child(6),
.logo__letter:nth-child(6) path {
animation-delay: calc(var(--anim-dur) * 0.1);
}
.logo__letter:nth-child(6) path {
animation-name: logoStroke6;
stroke-dasharray: 100 100;
stroke-dashoffset: -100;
}
.logo__letter:nth-child(7),
.logo__letter:nth-child(7) path {
animation-delay: calc(var(--anim-dur) * 0.12);
}
.logo__letter:nth-child(7) path {
animation-name: logoStroke7;
stroke-dasharray: 130 130;
stroke-dashoffset: -130;
}
.logo__letter:nth-child(8),
.logo__letter:nth-child(8) path {
animation-delay: calc(var(--anim-dur) * 0.14);
}
.logo__letter:nth-child(8) path {
animation-name: logoStroke8;
stroke-dasharray: 118 118;
stroke-dashoffset: -118;
}
.logo__letter:last-child,
.logo__letter:last-child path {
animation-delay: calc(var(--anim-dur) * 0.16);
}
.logo__letter:last-child path {
animation-name: logoStroke9;
stroke-dasharray: 113 113;
stroke-dashoffset: -113;
}
/* Dark theme */
@media (prefers-color-scheme: dark) {
:root {
--bg: hsl(var(--hue),90%,10%);
--fg: hsl(var(--hue),90%,90%);
}
}
/* Animations */
@keyframes logoFill {
from, 25% { transform: translateX(-100%); }
40%, 65% { transform: translateX(0); }
80%, to { transform: translateX(100%); }
}
@keyframes logoLetter {
from, 85%, to { transform: translateY(50%); }
20%, 70% {
animation-timing-function: cubic-bezier(0.37,0,0.63,1);
transform: translateY(0);
}
}
@keyframes logoStroke1 {
from { stroke-dashoffset: -107; }
20%, 70% { stroke-dashoffset: 0; }
85%, to { stroke-dashoffset: 107; }
}
@keyframes logoStroke2 {
from { stroke-dashoffset: -59; }
20%, 70% { stroke-dashoffset: 0; }
85%, to { stroke-dashoffset: 59; }
}
@keyframes logoStroke3 {
from { stroke-dashoffset: -107; }
20%, 70% { stroke-dashoffset: 0; }
85%, to { stroke-dashoffset: 107; }
}
@keyframes logoStroke4 {
from { stroke-dashoffset: -59; }
20%, 70% { stroke-dashoffset: 0; }
85%, to { stroke-dashoffset: 59; }
}
@keyframes logoStroke5 {
from { stroke-dashoffset: -118; }
20%, 70% { stroke-dashoffset: 0; }
85%, to { stroke-dashoffset: 118; }
}
@keyframes logoStroke6 {
from { stroke-dashoffset: -100; }
20%, 70% { stroke-dashoffset: 0; }
85%, to { stroke-dashoffset: 100; }
}
@keyframes logoStroke7 {
from { stroke-dashoffset: -130; }
20%, 70% { stroke-dashoffset: 0; }
85%, to { stroke-dashoffset: 130; }
}
@keyframes logoStroke8 {
from { stroke-dashoffset: -118; }
20%, 70% { stroke-dashoffset: 0; }
85%, to { stroke-dashoffset: 118; }
}
@keyframes logoStroke9 {
from { stroke-dashoffset: -113; }
20%, 70% { stroke-dashoffset: 0; }
85%, to { stroke-dashoffset: 113; }
}
</style>
</head>
<body >
<svg class="logo" viewBox="0 0 216 48" width="216px" height="48px" role="img" aria-label="vividtype">
<clipPath id="logo-clip">
<path d="M11.2,35.7L2.7,12.5H9L14.8,30l5.9-17.6H27l-8.6,23.2H11.2z"/>
<path d="M34,8.9c-1.1,0-2-0.3-2.7-1c-0.7-0.7-1.1-1.5-1.1-2.5c0-1,0.4-1.8,1.1-2.5c0.7-0.6,1.6-1,2.7-1c1.1,0,2,0.3,2.7,1c0.7,0.6,1.1,1.5,1.1,2.5c0,1-0.4,1.8-1.1,2.5C36,8.6,35.1,8.9,34,8.9z M31,35.7V12.5h6v23.2H31z"/>
<path d="M49.6,35.7l-8.5-23.2h6.3L53.2,30l5.9-17.6h6.3l-8.6,23.2H49.6z"/>
<path d="M72.4,8.9c-1.1,0-2-0.3-2.7-1c-0.7-0.7-1.1-1.5-1.1-2.5c0-1,0.4-1.8,1.1-2.5c0.7-0.6,1.6-1,2.7-1c1.1,0,2,0.3,2.7,1c0.7,0.6,1.1,1.5,1.1,2.5c0,1-0.4,1.8-1.1,2.5C74.4,8.6,73.5,8.9,72.4,8.9z M69.4,35.7V12.5h6v23.2H69.4z"/>
<path d="M92.4,36.3c-2.2,0-4.1-0.5-5.9-1.6c-1.7-1.1-3.1-2.5-4.1-4.4c-1-1.8-1.5-3.9-1.5-6.3c0-2.3,0.5-4.4,1.5-6.2c1-1.8,2.4-3.3,4.1-4.3c1.7-1,3.7-1.6,5.9-1.6c1.7,0,3.3,0.3,4.6,1c1.3,0.7,2.4,1.6,3.2,2.8V2h6v33.7h-5.3l-0.7-3.3c-0.7,1-1.7,1.9-3,2.7C95.9,35.9,94.3,36.3,92.4,36.3z M93.6,31c1.9,0,3.5-0.6,4.8-1.9c1.2-1.3,1.8-3,1.8-5c0-2-0.6-3.7-1.8-5c-1.2-1.3-2.8-1.9-4.8-1.9c-1.9,0-3.5,0.6-4.7,1.9C87.7,20.4,87,22,87,24c0,2,0.6,3.7,1.9,5C90.1,30.4,91.7,31,93.6,31z"/>
<path d="M122.6,35.7c-2.4,0-4.4-0.6-5.9-1.8c-1.5-1.2-2.2-3.3-2.2-6.3V17.5h-4v-5h4l0.7-6.2h5.3v6.2h6.3v5h-6.3v10.2c0,1.1,0.2,1.9,0.7,2.3c0.5,0.4,1.3,0.6,2.5,0.6h2.9v5.1H122.6z"/>
<path d="M134.8,46l5.4-11.8h-1.4l-9-21.7h6.5l6.5,16.3l6.8-16.3h6.4L141.2,46H134.8z"/>
<path d="M159.9,46V12.5h5.3l0.7,3.3c0.7-1,1.7-1.9,3-2.7c1.2-0.8,2.8-1.2,4.8-1.2c2.2,0,4.1,0.5,5.9,1.6c1.7,1.1,3.1,2.5,4.1,4.4c1,1.8,1.5,3.9,1.5,6.3s-0.5,4.4-1.5,6.2c-1,1.8-2.4,3.3-4.1,4.3c-1.7,1-3.7,1.6-5.9,1.6c-1.7,0-3.3-0.3-4.6-1c-1.3-0.7-2.4-1.6-3.2-2.8V46H159.9z M172.4,31c1.9,0,3.5-0.6,4.7-1.9c1.2-1.3,1.9-2.9,1.9-5c0-2-0.6-3.7-1.9-5c-1.2-1.3-2.8-2-4.7-2c-1.9,0-3.5,0.6-4.8,1.9c-1.2,1.3-1.8,3-1.8,5c0,2,0.6,3.7,1.8,5C168.8,30.4,170.4,31,172.4,31z"/>
<path d="M201.7,36.3c-2.3,0-4.4-0.5-6.2-1.5c-1.8-1-3.2-2.4-4.3-4.2c-1-1.8-1.5-3.9-1.5-6.3c0-2.4,0.5-4.5,1.5-6.4c1-1.9,2.4-3.3,4.2-4.4c1.8-1,3.9-1.6,6.3-1.6c2.3,0,4.3,0.5,6,1.5c1.7,1,3.1,2.4,4.1,4.1c1,1.7,1.5,3.7,1.5,5.8c0,0.3,0,0.7,0,1.1c0,0.4,0,0.8-0.1,1.2h-17.6c0.1,1.8,0.8,3.2,1.9,4.3c1.1,1,2.5,1.5,4.1,1.5c1.2,0,2.2-0.3,3.1-0.8c0.8-0.5,1.4-1.3,1.8-2.1h6.1c-0.4,1.5-1.2,2.8-2.2,4c-1,1.2-2.3,2.1-3.7,2.8C205.2,35.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0