anime+svg实现文字字幕彩色渐变动画效果代码
代码语言：html
所属分类：动画
代码描述：anime+svg实现文字字幕彩色渐变动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style>
*, *::after, *::before { -webkit-box-sizing: border-box; box-sizing: border-box; }
body {
font-family: 'Avenir Next', Avenir, 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, sans-serif;
color: #fff;
background: #27272d;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
a {
outline: none;
color: #fdf7b5;
text-decoration: none;
}
a:hover, a:focus {
color: #fff;
}
.hidden {
position: absolute;
overflow: hidden;
width: 0;
height: 0;
pointer-events: none;
}
/* Icons */
.icon {
display: block;
width: 1.5em;
height: 1.5em;
margin: 0 auto;
fill: currentColor;
}
/* Buttons */
.btn {
display: block;
margin: 0;
padding: 0;
cursor: pointer;
pointer-events: auto;
color: #fdf7b5;
border: none;
background: none;
}
.btn:focus {
outline: none;
}
.btn:hover {
color: #fff;
}
.btn--start {
border: 2px solid;
border-radius: 1.85em;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 0.95em;
padding: 1em 2em;
margin: 0 auto;
-webkit-transition: color 0.2s;
transition: color 0.2s;
}
.btn--github {
position: absolute;
right: 1em;
top: 0.75em;
font-size: 1.5em;
margin: 0.15em 0 0 0;
}
.btn--github .icon {
stroke: #fdf7b5;
fill: none;
}
.btn--github:hover .icon,
.btn--github:focus .icon {
stroke: #fff;
}
/* Codrops header */
.codrops-header {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
padding: 1.25em 2em 3em 1.25em;
position: relative;
}
.codrops-header__title {
font-size: 1.15em;
font-weight: 500;
margin: 0;
padding: 0 0.75em;
}
.codrops-header__tagline {
font-size: 0.85em;
margin: 0 0 0 1em;
max-width: 505px;
text-align: left;
font-weight: 600;
padding: 0 4.75em 0 2em;
position: relative;
border-left: 1px solid rgba(255,255,255,0.3);
}
/* Top Navigation Style */
.codrops-links {
position: relative;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
text-align: center;
white-space: nowrap;
}
.codrops-links::after {
content: '';
position: absolute;
top: 10%;
left: 50%;
width: 1px;
height: 80%;
opacity: 0.2;
background: currentColor;
-webkit-transform: rotate3d(0, 0, 1, 22.5deg);
transform: rotate3d(0, 0, 1, 22.5deg);
}
.codrops-icon {
display: inline-block;
margin: 0.25em;
padding: 0.25em;
}
/* Content */
.content {
position: relative;
max-height: 85vh;
min-height: 300px;
margin: 0 auto 5em;
}
.content__meta {
position: relative;
text-align: center;
}
/* Related demos */
.content--related {
text-align: center;
font-weight: bold;
padding: 7em 0 12em;
margin: 10em 0 0 0;
background: #1c1c21;
position: relative;
z-index: 1000;
max-height: none;
}
.media-item {
display: inline-block;
padding: 1em;
vertical-align: top;
-webkit-transition: color 0.3s;
transition: color 0.3s;
}
.media-item__img {
max-width: 100%;
opacity: 0.5;
-webkit-transition: opacity 0.3s;
transition: opacity 0.3s;
}
.media-item:hover .media-item__img,
.media-item:focus .media-item__img {
opacity: 1;
}
.media-item__title {
margin: 0;
padding: 0.5em;
font-size: 1em;
}
@media screen and (max-width: 50em) {
.codrops-header {
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
padding: 1em 3em 0 1em;
}
.codrops-header__title {
-webkit-flex: none;
flex: none;
width: 100%;
padding: 0.25em 0 0 0;
}
.codrops-header__tagline {
padding: 1em 0 0 0;
border: none;
margin: 0;
}
}/* Sponsor */
.letters {
position: relative;
display: block;
min-height: 400px;
max-height: 70vh;
margin: 0 auto;
}
/* Letter path */
.letter__layer {
fill: none;
stroke-miterlimit: 3;
stroke-linecap: butt;
stroke-linejoin: bevel;
}
/* Individual effects/styles */
/* Effect 1 */
.letters--effect-1 .letter__layer:first-child {
stroke-width: 9px;
}
.letters--effect-1 .letter__layer:nth-child(2) {
stroke-width: 9.5px;
}
.letters--effect-1 .letter__layer:nth-child(3) {
stroke-width: 10px;
}
/* Effect 1 colors */
.color-1 { stroke: #dea521; }
.color-2 { stroke: #f84242; }
.color-3 { stroke: #3758a7; }
.color-4 { stroke: #f79c8c; }
.color-5 { stroke: #84b5bd; }
.color-6 { stroke: #feefde; }
/* Effect 2 */
.letters--effect-2 .letter__layer:first-child {
stroke: #4caf50;
stroke-width: 1px;
}
.letters--effect-2 .letter__layer:nth-child(2) {
stroke: #ffeb3b;
stroke-width: 4px;
}
.letters--effect-2 .letter__layer:nth-child(3) {
stroke: #e6437b;
stroke-width: 10px;
}
/* Effect 3 */
.letters--effect-3 .letter__layer:first-child {
-webkit-transform: translate3d(-2px, -2px, 0);
transform: translate3d(-2px, -2px, 0);
stroke: #dddde6;
stroke-width: 10px;
}
.letters--effect-3 .letter__layer:nth-child(2) {
stroke: #eca80e;
stroke-width: 6px;
}
.letters--effect-3 .letter__layer:nth-child(3) {
stroke: #607d8b;
stroke-width: 8px;
}
/* Effect 4 */
.letters--effect-4 .letter__layer:first-child {
stroke: #00966c;
stroke-width: 10px;
}
.letters--effect-4 .letter__layer:nth-child(2) {
stroke: #27272d;
stroke-width: 4px;
}
.letters--effect-4 .letter__layer:nth-child(3) {
stroke: #fcec9b;
stroke-width: 1px;
}
</style>
</head>
<body>
<svg class="hidden">
<defs>
<symbol id="icon-arrow" viewBox="0 0 24 24">
<title>arrow</title>
<polygon points="6.3,12.8 20.9,12.8 20.9,11.2 6.3,11.2 10.2,7.2 9,6 3.1,12 9,18 10.2,16.8 " />
</symbol>
<symbol id="icon-drop" viewBox="0 0 24 24">
<title>drop</title>
<path d="M12,21c-3.6,0-6.6-3-6.6-6.6C5.4,11,10.8,4,11.4,3.2C11.6,3.1,11.8,3,12,3s0.4,0.1,0.6,0.3c0.6,0.8,6.1,7.8,6.1,11.2C18.6,18.1,15.6,21,12,21zM12,4.8c-1.8,2.4-5.2,7.4-5.2,9.6c0,2.9,2.3,5.2,5.2,5.2s5.2-2.3,5.2-5.2C17.2,12.2,13.8,7.3,12,4.8z" />
<path d="M12,18.2c-0.4,0-0.7-0.3-0.7-0.7s0.3-0.7,0.7-0.7c1.3,0,2.4-1.1,2.4-2.4c0-0.4,0.3-0.7,0.7-0.7c0.4,0,0.7,0.3,0.7,0.7C15.8,16.5,14.1,18.2,12,18.2z" />
</symbol>
<symbol id="icon-octicon" viewBox="0 0 24 24">
<title>octicon</title>
<path d="M12,2.2C6.4,2.2,1.9,6.7,1.9,12.2c0,4.4,2.9,8.2,6.9,9.6c0.5,0.1,0.7-0.2,0.7-0.5c0-0.2,0-0.9,0-1.7c-2.8,0.6-3.4-1.4-3.4-1.4C5.6,17.1,5,16.8,5,16.8C4.1,16.2,5,16.2,5,16.2c1,0.1,1.5,1,1.5,1c0.9,1.5,2.4,1.1,2.9,0.8c0.1-0.7,0.4-1.1,0.6-1.3c-2.2-0.3-4.6-1.1-4.6-5c0-1.1,0.4-2,1-2.7C6.5,8.8,6.2,7.7,6.7,6.4c0,0,0.8-0.3,2.8,1C10.3,7.2,11.1,7.1,12,7c0.9,0,1.7,0.1,2.5,0.3c1.9-1.3,2.8-1,2.8-1c0.5,1.4,0.2,2.4,0.1,2.7c0.6,0.7,1,1.6,1,2.7c0,3.9-2.4,4.7-4.6,5c0.4,0.3,0.7,0.9,0.7,1.9c0,1.3,0,2.4,0,2.8c0,0.3,0.2,0.6,0.7,0.5c4-1.3,6.9-5.1,6.9-9.6C22.1,6.7,17.6,2.2,12,2.2z" />
</symbol>
</defs>
</svg>
<main>
<header class="codrops-header">
<h1 class="codrops-header__title">Fancy SVG Letter Animation</h1>
</header>
<div class="content content--1">
<svg width="100%" height="100%" viewBox="0 0 320 180" class="letters letters--effect-1">
<!--W-->
<g class="letter letter--1">
<g class="letter__part">
<path class="letter__layer color-6" d="M25,39.7l22.4,51l7.9-32.2L76.2,84l1.3-61.2" />
<path class="letter__layer color-1" d="M25,39.7l22.4,51l7.9-32.2L76.2,84l1.3-61.2" />
<path class="letter__layer color-2" d="M25,39.7l22.4,51l7.9-32.2L76.2,84l1.3-61.2" />
</g>
</g>
<!--I-->
<g class="letter letter--2">
<g class="letter__part">
<path class="letter__layer color-6" d="M100,20.3l8.4,58.4" />
<path class="letter__layer color-2" d="M100,20.3l8.4,58.4" />
<path class="letter__layer color-3" d="M100,20.3l8.4,58.4" />
</g>
</g>
<!--L-->
<g class="letter letter--3">
<g class="letter__part">
<path class="letter__layer color-6" d="M126.4,70.8l27.6,0.5" />
<path class="letter__layer color-3" d="M126.4,70.8l27.6,0.5" />
<path class="letter__layer color-4" d="M126.4,70.8l27.6,0.5" />
</g>
<g class="letter__part">
<path class="letter__layer color-6" d="M128.9,15.6l-2.3,60.2" />
<path class="letter__layer color-3" d="M128.9,15.6l-2.3,60.2" />
<path class="letter__layer color-4" d="M128.9,15.6l-2.3,60.2" />
</g>
</g>
<!--D-->
<g class="letter letter--4">
<g class="letter__part">
<path class="letter__layer color-6" d="M167.4,27.6l3.7,49.1" />
<path class="letter__layer color-4" d="M167.4,27.6l3.7,49.1" />
<path class="letter__layer color-5" d="M167.4,27.6l3.7,49.1" />
</g>
<g class="letter__part">
<path class="letter__layer color-6" d="M157.8,30.9c0,0,31.2-10.9,40.3,6.8c8.9,17-23.5,38.4-35,42.6" />
<path class="letter__layer color-4" d="M157.8,30.9c0,0,31.2-10.9,40.3,6.8c8.9,17-23.5,38.4-35,42.6" />
<path class="letter__layer color-5" d="M157.8,30.9c0,0,31.2-10.9,40.3,6.8c8.9,17-23.5,38.4-35,42.6" />
</g>
</g>
<!--E-->
<g class="letter letter--5">
<g class="letter__part">
<path class="letter__layer color-6" d="M215,52l25.6,2.8" />
<path class="letter__layer color-5" d="M215,52l25.6,2.8" />
<path class="letter__layer color-1" d="M215,52l25.6,2.8" />
</g>
<g class="letter__part">
<path class="letter__layer color-6" d="M211.8,76.9l30.6,3.4" />
<path class="letter__layer color-5" d="M211.8,76.9l30.6,3.4" />
<path class="letter__layer color-1" d="M211.8,76.9l30.6,3.4" />
</g>
<g class="letter__part">
<path class="letter__layer color-6" d="M218.6,27.4l30.9,2.9" />
<path class="letter__layer color-5" d="M218.6,27.4l30.9,2.9" />
<path class="letter__layer color-1" d="M218.6,27.4l30.9,2.9" />
</g>
<g class="letter__part">
<path class="letter__layer color-6" d="M218.4,22.4l-6.9,59.6" />
<path class="letter__layer color-5" d="M218.4,22.4l-6.9,59.6" />
<path class="letter__layer color-1" d="M218.4,22.4l-6.9,59.6" />
</g>
</g>
<!--R-->
<g class="letter letter--6">
<g class="letter__part">
<path class="letter__layer color-6" d="M264.2,29.8l24.1,8c12,4.2,12,11,9.4,18.5c-2.6,7.5-6.7,12.9-18.7,8.8l-14.2-4.8" />
<path class="letter__layer color-4" d="M264.2,29.8l24.1,8c12,4.2,12,11,9.4,18.5c-2.6,7.5-6.7,12.9-18.7,8.8l-14.2-4.8" />
<path class="letter__layer color-2" d="M264.2,29.8l24.1,8c12,4.2,12,11,9.4,18.5c-2.6,7.5-6.7,12.9-18.7,8.8l-14.2-4.8" />
</g>
<g class="letter__part">
<path class="letter__layer color-6" d="M284.9,96.2l-20.4-35.1" />
<path class="letter__layer color-4" d="M284.9,96.2l-20.4-35.1" />
<path class="letter__layer color-2" d="M284.9,96.2l-20.4-35.1" />
</g>
<g class="letter__part">
<path class="letter__layer color-6" d="M275.2,29.4l-20.5,60.6" />
<path class="letter__layer color-4" d="M275.2,29.4l-20.5,60.6" />
<path class="letter__layer color-2" d="M275.2,29.4l-20.5,60.6" />
</g>
</g>
<!--M-->
<g class="letter letter--7">
<g class="letter__part">
<path class="letter__layer color-6" d="M72.9,156.9l-7.1-56.5L91.7,127l18.8-29.8l7.1,56.5" />
<path class="letter__layer color-3" d="M72.9,156.9l-7.1-56.5L91.7,127l18.8-29.8l7.1,56.5" />
<path class="letter__layer color-1" d="M72.9,156.9l-7.1-56.5L91.7,127l18.8-29.8l7.1,56.5" />
</g>
</g>
<!--I-->
<g class="letter letter--8">
<g class="letter__part">
<path class="letter__layer color-6" d="M144.9,99.5l-6,61.3" />
<path class="letter__layer color-4" d="M144.9,99.5l-6,61.3" />
<path class="letter__layer color-2" d="M144.9,99.5l-6,61.3" />
</g>
</g>
<!--N-->
<g class="letter letter--9">
<g class="letter__part">
<path class="letter__layer color-6" d="M170.4,161.9l-3.2-61.8l43.4,58.1l-7.2-62.6" />
<path class="letter__layer color-1" d="M170.4,161.9l-3.2-61.8l43.4,58.1l-7.2-62.6" />
<path class="letter__layer color-3" d="M170.4,161.9l-3.2-61.8l43.4,58.1l-7.2-62.6" />
</g>
</g>
<!--D-->
<g class="letter letter--10">
<g class="letter__part">
<path class="letter__layer color-6" d="M233.8,107.9l3.9,51.7" />
<path class="letter__layer color-5" d="M233.8,107.9l3.9,51.7" />
<path class="letter__layer color-4" d="M233.8,107.9l3.9,51.7" />
</g>
<g class="letter__part">
<path class="letter__layer color-6" d="M222.4,109.4c0,0,33.9-11.8,43.8,7.4c10.9,20.9-23.6,43.4-34.8,47.5" />
<path class="letter__layer color-5" d="M222.4,109.4c0,0,33.9-11.8,43.8,7.4c10.9,20.9-23.6,43.4-34.8,47.5" />
<path class="letter__layer color-4" d="M222.4,109.4c0,0,33.9-11.8,43.8,7.4c10.9,20.9-23.6,43.4-34.8,47.5" />
</g>
</g>
</svg>
<div class="content__meta"><button class="btn btn--start" aria-label="Start animation">Start</button></div>
</div>
<div class="content content--2">
<svg width="100%" height="100%" viewBox="0 0 320 180" class="letters letters--effect-2">
<!--O-->
<g class="letter letter--1">
<g class="letter__part">
<path class="letter__layer" d="M92.8,80.4C64.5,87.7,64,42.1,83.4,31.3C109.2,30.3,117.6,74.1,92.8,80.4z" />
<path class="letter__layer" d="M92.8,80.4C64.5,87.7,64,42.1,83.4,31.3C109.2,30.3,117.6,74.1,92.8,80.4z" />
<path class="letter__layer" d="M92.8,80.4C64.5,87.7,64,42.1,83.4,31.3C109.2,30.3,117.6,74.1,92.8,80.4z" />
</g>
</g>
<!--N-->
<g class="letter letter--1">
<g class="letter__part">
<path class="letter__layer" d="M162.1,27.1v57.4l-38.3-57.4v57.4" />
<path class="letter__layer" d="M162.1,27.1v57.4l-38.3-57.4v57.4" />
<path class="letter__layer" d="M162.1,27.1v57.4l-38.3-57.4v57.4" />
</g>
</g>
<!--L-->
<g class="letter letter--1">
<g class="letter__part">
<path class="letter__layer" d="M183.9,27.1v57.4" />
<path class="letter__layer" d="M183.9,27.1v57.4" />
<path class="letter__layer" d="M183.9,27.1v57.4" />
</g>
<g class="letter__part">
<path class="letter__layer" d="M183.9,79.5h32.8" />
<path class="letter__layer" d="M183.9,79.5h32.8" />
<path class="letter__layer" d="M183.9,79.5h32.8" />
</g>
</g>
<!--Y-->
<g class="letter letter--1">
<g class="letter__part">
<path class="letter__layer" d="M250,27.1l-21.9,27.3" />
<path class="letter__layer" d="M250,27.1l-21.9,27.3" />
<path class="letter__layer" d="M250,27.1l-21.9,27.3" />
</g>
<g class="letter__part">
<path class="letter__layer" d="M206.2,27.1c17.4,14.3,27.6,34.9,21.9,57.4" />
<path class="letter__layer" d="M206.2,27.1c17.4,14.3,27.6,34.9,21.9,57.4" />
<path class="letter__layer" d="M206.2,27.1c17.4,14.3,27.6,34.9,21.9,57.4" />
</g>
</g>
<!--L-->
<g class="letter letter--1">
<g class="letter__part">
<path class="letter__layer" d="M71.3,91.9v57.4" />
<path class="letter__layer" d="M71.3,91.9v57.4" />
<path class="letter__layer" d="M71.3,91.9v57.4" />
</g>
<g class="letter__part">
<path class="letter__layer" d="M71.3,144.4h32.8" />
<path class="letter__layer" d="M71.3,144.4h32.8" />
<path class="letter__layer" d="M71.3,144.4h32.8" />
</g>
</g>
<!--O-->
<g class="letter letter--1">
<g class="letter__part">
<path class="letter__layer" d="M132.8,147.1c-28.2,7.2-28.8-38.3-9.4-49.1C149.2,96.9,157.6,140.7,132.8,147.1z" />
<path class="letter__layer" d="M132.8,147.1c-28.2,7.2-28.8-38.3-9.4-49.1C149.2,96.9,157.6,140.7,132.8,147.1z" />
<path class="letter__layer" d="M132.8,147.1c-28.2,7.2-28.8-38.3-9.4-49.1C149.2,96.9,157.6,140.7,132.8,147.1z" />
</g>
</g>
<!--V-->
<g class="letter letter--1">
<g class="letter__part">
<path class="letter__layer" d="M202,93.7l-21.9,57.4l-21.9-57.4" />
<path class="letter__layer" d="M202,93.7l-21.9,57.4l-21.9-57.4" />
<path class="letter__layer" d="M202,93.7l-21.9,57.4l-21.9-57.4" />
</g>
</g>
<!--E-->
<g class="letter letter--1">
<g class="letter__part">
<path class="letter__layer" d="M217,95.5v57.4" />
<path class="letter__layer" d="M217,95.5v57.4" />
<path class="letter__layer" d="M217,95.5v57.4" />
</g>
<g class="letter__part">
<path class="letter__layer" d="M217,100.5h32.5" />
<path class="letter__layer" d="M217,100.5h32.5" />
<path class="letter__layer" d="M217,100.5h32.5" />
</g>
<g class="letter__part">
<path class="letter__layer" d="M217,122.8h20" />
<path class="letter__layer" d="M217,122.8h20" />
<path class="letter__layer" d="M217,122.8h20" />
</g>
<g class="letter__part">
<path class="letter__layer" d="M217,147.9h32.5" />
<path class="letter__layer" d="M217,147.9h32.5" />
<path class="letter__layer" d="M217,147.9h32.5" />
</g>
</g>
</svg>
<div class="content__meta"><button class="btn btn--start" aria-label="Start animation">Start</button></div>
</div>
<div class="content content--3">
<svg width="100%" height="100%" viewBox="0 0 400 300" class="letters letters--effect-3">
<!--J-->
<g class="letter letter--1">
<g class="letter__part">
<path class="letter__layer" d="M20.4,52.1c17.9,0.2,46.3,1.2,63.3-4.4C73,72.5,68.1,114.4,66.3,141.3c-0.2,3-0.6,6.3-2.7,8.4c-3,3-8,2.2-11.9,0.7c-5.4-2.2-10.3-5.7-13.4-10.6c-3.1-4.9-4.2-11.2-2.1-16.7c1.7-4.5,5.4-8.1,9.6-10.5s8.9-3.8,13.6-5.1c16-4.4,32.2-7.9,48.6-10.4" />
<path class="letter__layer" d="M20.4,52.1c17.9,0.2,46.3,1.2,63.3-4.4C73,72.5,68.1,114.4,66.3,141.3c-0.2,3-0.6,6.3-2.7,8.4c-3,3-8,2.2-11.9,0.7c-5.4-2.2-10.3-5.7-13.4-10.6c-3.1-4.9-4.2-11.2-2.1-16.7c1.7-4.5,5.4-8.1,9.6-10.5s8.9-3.8,13.6-5.1c16-4.4,32.2-7.9,48.6-10.4" />
<path class="letter__layer" d="M20.4,52.1c17.9,0.2,46.3,1.2,63.3-4.4C73,72.5,68.1,114.4,66.3,141.3c-0.2,3-0.6,6.3-2.7,8.4c-3,3-8,2.2-11.9,0.7c-5.4-2.2-10.3-5.7-13.4-10.6c-3.1-4.9-4.2-11.2-2.1-16.7c1.7-4.5,5.4-8.1,9.6-10.5s8.9-3.8,13.6-5.1c16-4.4,32.2-7.9,48.6-10.4" />
</g>
</g>
<!--u-->
<g class="letter letter--2">
<g class="letter__part">
<path class="letter__layer" d="M93.2,83.7c8.8-6.2,17.5-12.4,26.3-18.6c-0.2,11.9-0.1,23.7,0.1,35.6c0.1,2.5,0.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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