SVG 动画
2021年7月24日大约 16 分钟
SVG 动画
描边动画
描边动画原理
SVG 描边动画主要与以下 3 个属性相关。
stroke="<paint>": 定义图形元素的外轮廓的颜色。它的默认值是none。stroke-dasharray="<dasharray>": 控制用来描边的点划线的图案范式。<dasharray>: 它是一个<length>和<percentage>数列，数与数之间用逗号或者空白隔开，指定短划线和缺口的长度。如果提供了奇数个值，则这个值的数列重复一次，从而变成偶数个值。因此，5,3,2等同于5,3,2,5,3,2。
stroke-dashoffset="<percentage> | <length> | inherit": 指定了 dash 模式到路径开始的距离。如果使用了一个百分比值，那么这个值就代表了当前 viewport(视口) 的一个百分比。
SVG 描边动画通过 stroke-dashoffset 和 stroke-dasharray 来实现。
- 通过
stroke-dasharray将实线部分增加至全长。 - 通过
stroke-dashoffset来移动新增的实线部分，造成线段移动的效果。
示例如下：
stroke-dasharray 和 stroke-dashoffset 的值都为 300 ， dash 模式开始的距离(stroke-dashoffset)为 300 ，正好对应描边的点划线(stroke-dasharray)的缺口，则该线段为不可见的状态。当将 stroke-dashoffset 设置为 0 的时候，该线段则可以显示出来。
<svg x="0px" y="0px" width="300px" height="100px" viewBox="0 0 300 100" class="svg">
<line x1="20" y1="50" x2="200" y2="50" stroke="#000" stroke-width="1"></line>
</svg>
<style type="text/css">
.svg line {
stroke-dasharray: 300, 300;
stroke-dashoffset: 300;
transition: all 2s linear;
}
.svg.active line {
visibility: visible;
stroke-dashoffset: 0;
transition: all 2s linear;
}
</style>
<script type="text/javascript">
window.onload = function () {
var svgDOM = document.getElementsByClassName('svg')[0]
svgDOM.classList.add('active')
}
</script>实例
<button class="stroke-edge-btn">开始动画</button>
<svg class="checkmark" style="display: none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">
<circle class="checkmark__circle" cx="26" cy="26" r="25" fill="none" />
<path class="checkmark__check" fill="none" stroke="#fff" d="M 14.1 27.2 l 7.1 7.2 16.7 -16.8" />
</svg>.stroke-edge-btn {
display: block;
margin: 5% auto;
padding: 5px 10px;
color: #fff;
background: #7ac142;
font-weight: bold;
}
.checkmark {
width: 56px;
height: 56px;
margin: 10% auto;
border-radius: 50%;
box-shadow: inset 0px 0px 0px #7ac142;
stroke-width: 2;
stroke: #fff;
/* animation: name duration timing-function delay iteration-count direction fill-mode play-state; */
/* >>> name : animation-name , 规定需要绑定到选择器的 keyframe 名称 */
/* >>> duration : animation-duration , 规定完成动画所花费的时间，以秒或毫秒计 */
/* >>> timing-function : animation-timing-function , 规定动画的速度曲线 */
/* >>> delay : animation-delay , 规定在动画开始之前的延迟 */
/* >>> iteration-count : animation-iteration-count , 规定动画应该播放的次数 */
/* >>> direction : animation-direction , 规定是否应该轮流反向播放动画 */
/* >>> fill-mode : animation-fill-mode , 规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式 */
/* >>> play-state : animation-play-state , 指定动画是否正在运行或已暂停 */
/* animation-fill-mode : 规定动画在播放之前或之后，其动画效果是否可见 */
/* >>> forwards : 当动画完成后，保持最后一帧的状态 */
/* >>> backwards : 在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义） */
/* >>> both : 向前和向后填充模式都被应用 */
animation: fill 0.4s ease-in-out 0.4s forwards, scale 0.3s ease-in-out 0.9s
both;
}
.checkmark__circle {
stroke-dasharray: 166;
stroke-dashoffset: 166;
stroke-width: 2;
stroke: #7ac142;
fill: none;
animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}
.checkmark__check {
transform-origin: 50% 50%;
stroke-dasharray: 48;
stroke-dashoffset: 48;
animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}
@keyframes stroke {
100% {
stroke-dashoffset: 0;
}
}
@keyframes scale {
0%,
100% {
transform: none;
}
50% {
transform: scale3d(1.1, 1.1, 1);
}
}
@keyframes fill {
100% {
box-shadow: inset 0px 0px 0px 30px #7ac142;
}
}window.onload = function () {
var strokeEdgeBtnDOM = document.querySelector('.stroke-edge-btn')
console.log('strokeEdgeBtnDOM: ', strokeEdgeBtnDOM)
var checkmarkDOM = document.querySelector('.checkmark')
strokeEdgeBtnDOM.addEventListener('click', function () {
var checkmarkDOMDisplay = checkmarkDOM.style.display
console.log('checkmarkDOMDisplay: ', checkmarkDOMDisplay)
if (checkmarkDOMDisplay === 'block') {
checkmarkDOM.style.display = 'none'
} else {
checkmarkDOM.style.display = 'block'
}
})
}裁剪动画
<div class="svg-crop-wrapper">
<svg viewBox="0 0 700 400">
<title>Animated clip-path SVG</title>
<defs>
<clipPath id="crop-clipPath-image">
<circle id="crop-circle-image" cx="100" cy="200" r="60"></circle>
</clipPath>
</defs>
<image
height="400px"
width="700px"
clip-path="url(#crop-clipPath-image)"
xlink:href="https://cn.bing.com/th?id=OHR.CityPalaceUdaipur_ZH-CN2773121437_1920x1080.jpg&rf=LaDigue_1920x1080.jpg&pid=hp"
></image>
</svg>
</div>.svg-crop-wrapper {
position: relative;
width: 100%;
max-width: 700px;
overflow: hidden;
}
.svg-crop-visible #crop-clipPath-image #crop-circle-image {
animation: visible-clippath 1s linear forwards;
}
@keyframes visible-clippath {
to {
r: 1364;
}
}window.onload = function () {
var script = document.createElement('script')
script.setAttribute('type', 'text/javascript')
script.setAttribute(
'src',
'https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js'
)
var heads = document.getElementsByTagName('head')
if (heads.length) {
heads[0].appendChild(script)
} else {
document.documentElement.appendChild(script)
}
script.onload = function () {
$('.svg-crop-wrapper').click(function () {
$(this).toggleClass('svg-crop-visible')
})
}
}手写文字动画效果
<svg
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
x="0px"
y="0px"
width="500"
height="100"
viewBox="0 0 500 100"
style="enable-background: new 0 0 500 100"
xml:space="preserve"
>
<defs>
<mask id="mymask">
<g id="mask_2_">
<path
class="st1"
d="M133.24,26.817c0,0-4.865,7.558-5.49,8.308s-6.141,8.875-6.82,10.5
s-4.305,7.125-5.055,8.625s-7.625,9.875-7.625,9.875s-3.161,3.162-4.476,3.76s-6.818,1.444-8.167,1.632s-7.583,0.237-7.952,0.197
s-3.1-0.247-5.193-1.089s-5.862-1.798-6.047-2.7s-1.68-2.077-2.579-3.765S71.25,59.625,70.875,57S69.768,52.148,72,47.625
s3.035-5.758,5.412-7.318s7.4-2.432,7.775-2.432s4.688-0.563,5.75-0.25s6,0.875,6.563,1.313s2.125,1.49,2.875,2.651
s2.813,3.911,2.5,6.099s-1.125,5.813-2.188,7.063s-3.125,4.375-4.125,4.75s-3,1.5-4,1.5s-6.625,0.063-7.375-0.563
s-3.063-2.688-3.25-3.813s0.084-5.354,0.855-6.408s5.457-4.467,6.52-4.654s7.438-1.688,8.063-1.5s2.938-0.063,3.438,0.063
S104.188,44,105,44.563s2.563,1.625,3.188,2.438s1.563,2.563,1.688,3.563s-0.604,4.392-0.875,5.213s-2.063,3.436-2.75,3.424"
/>
<path
class="st2"
d="M174.375,21.125c-1.512,1.255-8.625,2.167-8.792,2.25
s-11.709,0.958-12.167,0.833s-10.25-0.917-10.708-1.458s-13.292-2.667-14.792-4S112,15.083,111.083,14.833
s-13.417-1.084-16.417-1.167S79.833,17,78.917,17.5s-12.833,9-13,9.917s-3.539,4.529-3.292,5.667s-1.734,3.719-1.292,5.125
s0.75,5.833,1.833,7.042s2.875,2.669,3.5,3.022s3.167,1.52,3.458,1.52"
/>
<path
class="st2"
d="M137.417,50c0,0-7.583,2.999-7.667,3.833s-4.583,3.708-5.25,6.188
s-2.65,6.729-1.825,8.063s4.397,1.793,4.528,1.772s3.872-0.821,4.42-1.242s4.062-3.822,4.41-4.24s2.968-4.039,3.301-4.956
s1.714-3.501,1.978-4.4s-0.871-2.732-1.276-2.788s-2.202,1.604-2.119,2.271s-0.5,2.333-0.083,3.333s2.403,4.493,2.799,3.833
s2.609,0.123,3.235-0.153S148.578,57.867,149,57s2.5-3.084,2.917-3.667s3-3,3.333-3s1.833-0.5,2.417,0s0.917,1.666,0.917,2.75
s-1,2.5-1.417,3.167s-4,4.334-4.167,4.667s-1.75,2.667-2.417,3.5s-3.084,3.083-3.417,3.833s-0.75,1.463-0.333,1.606
s1.844-0.773,2.588-1.523s3.828-5.5,3.828-5.5s2.583-2.833,3.333-3.583s3.134-3.117,3.134-3.117S165.5,50.5,166,50.583
s3.417-0.167,3.417,1.083s-0.667,2.666-0.917,3.416s-2.667,3.417-2.833,3.667s-1.667,2.084-1.917,2.667s-1.75,2.25-1.917,2.833
s-0.833,2.417-0.75,2.917s-0.167,1.499,0.417,1.916s1.833,0.788,1.833,0.788s3.583,0.212,4.167-0.538s3.083-2.416,4.167-3.583
s3-2.751,3.417-3.417s2.685-3.848,3.426-4.257s3.074-3.91,3.407-4.243s2.643-2.25,2.643-2.25s3.532-1.333,3.778-1
s1.496,1.416,1.496,2s-0.583,1-1.083,2.167s-1.417,3.001-2.167,3.667s-4.084,3.75-4.417,4.5s-2.298,3.584-1.857,4
s1.274,2.869,1.524,2.81s0.538,0.298,1.25,0.172s3.528-0.911,4.139-2.113s3.61-2.202,4.194-2.785s3.5-3.917,3.833-4.5
s2.75-3.501,3.25-4.167s2-2.083,2.167-2.583s1.5-1.5,1.75-2s1,1.333,0.333,2.25s-3.417,4.167-3.667,4.667s-2.917,3.082-3.5,3.916
s-2.167,2.75-2.583,3.5s-2.083,4.666-2.417,5.25s-5.965,7.334-6.024,7.834s-1.726,3.167-2.393,4.25s-3.667,3.916-3.917,4.333
s-3.583,3.417-3.833,3.75s-3.417,2.001-4.167,2.167s-2.417,0.834-3,0s-1.75-2.168-1.75-2.584s1.167-2.749,1.333-3.166
s2.409-4.801,3.371-4.942s4.462-3.058,4.712-3.225s2.583-2.001,3.333-2.167s3.083-1.667,3.667-2s3.661-2.258,4.243-2.443
s2.858-0.983,3.424-1.101s4.841-0.881,6.012-1.539s4.181-2.454,4.977-3s2.001-2.161,3.424-3.5s6.837-8.583,7.004-9.083
s5.25-7.167,5.333-7.583s3-3.75,3.5-4.333s1.417-2.833,1.917-3.417s2.333-3.833,2.583-4s1.25,0,1.25,0.583s-0.917,2.917-1.25,3.25
s-2.917,4.083-3.167,4.333s-3.916,4.583-4.083,5s-2.5,4.583-2.75,4.833s-3.833,5.75-4.25,6s-2.917,3.75-3.167,4.167
s-1.583,3.25-1.583,3.75s0.083,1.953,0.583,2.227s3.236,0.979,3.611,0.857s3.93-2.018,4.255-2.256s4.05-3.995,4.383-4.495
s4.167-4.583,4.417-5.083"
/>
<path
class="st2"
d="M224.589,57.068c0.161-0.235-2.41,2.213-2.41,2.213
s4.403-4.323,4.612-4.573s1.542-1.624,2.167-2.041s2.291-1.417,2.583-1.625c0.292-0.208,1.875-0.917,2.083-1.042
s-2.625,2.708-2.792,2.875s-4.667,5.209-4.958,5.417s-1.75,1.249-2.167,1.729s-2.625,3.73-2.792,4.396s-0.916,2.084-0.833,2.75
s0.083,2.082,0.458,2.291s1.542,0.418,1.833,0.584s2.167,0.208,2.375,0.208s3.208-1.041,3.417-1.208s2.266-1.684,2.614-2.048
s2.803-2.702,3.094-2.952s1.583-1.916,1.708-2.25s1-1.708,1.333-2.125s1.333-2.541,1.375-2.875s0.833-1.833,0.833-2.25
s-0.083-1.418-0.292-1.459s-1.542-0.792-1.708-0.625s-1.375,1.376-1.375,1.709s-0.333,1.75-0.125,2.375s0.375,1.917,0.542,2.25
s1,1.959,1.208,2s3.87,0.866,4.542,0.166s3.409-2.4,3.746-2.888s2.42-2.778,2.712-3.278s1.167-1.25,1.625-1.75s1.333-1,1.583-1.292
s3.959-2.333,4.292-1.75s0.417,1.959,0.417,2.417s-1.333,2.416-1.625,2.958s-1.709,2.333-1.834,2.708s-1.374,2.833-1.791,3.25
s-2.542,2.916-2.75,3.125s-1.583,2.209-2.083,2.709s-1.208,1-1.5,1.458s-0.667,1.124-0.5,1.333s3.076-0.457,3.205-0.916
s2.546-3.083,2.837-3.5s1.834-2.667,1.917-2.792s1.207-1.708,1.541-2.083s1.626-2.209,2.084-2.584s2.478-2.659,2.478-2.659
s2.897-2.995,3.355-3.251s2.291-1.673,2.833-1.673s1.334-0.166,1.584,0.208s0.458,0.47,0.458,1.464S266.542,54,266,55
s-2.126,3.874-2.542,4.458s-1.334,1.626-2,2.709s-1.999,3-2.291,3.625s-0.5,2.041-0.25,2.416S260.875,70,260.875,70
s5.291-0.167,6.333-1.667s4.501-4.208,4.709-4.583s2.459-2.583,2.625-2.833s2.124-2.432,2.291-2.841s1.019-1.617,1.468-2.284
s3.282-3.917,3.532-3.792s2.167-1.125,2.417-1.125s3.583,0.001,3.625,0.667s0.083,1.875-0.542,3s-1.582,2.249-2.416,3.416
s-2.917,3.334-3.292,3.959s-1.458,1.959-1.708,2.875s-1.125,2.125-0.875,2.875s0.292,2,0.75,2.333s2.381,0.287,2.791,0.25
s3.291-2.375,4-2.875s4.166-3.249,4.375-3.583s2.793-3.537,3.084-3.706s2.249-2.753,2.291-2.961s0.791-1.376,1.125-1.792
s2.584-2.958,2.584-3.208s0.75-0.832,1-1.083c0.25-0.25,1.166,0.291,0.833,0.958s-1.042,2.042-1.542,2.75s-5.042,6.458-5.25,6.75
s-4.249,5.458-4.416,5.833s-1.625,2.5-1.917,3.25s-2.416,4.083-2.708,4.5s-3.75,4.541-4.042,4.958s-1.833,2.917-2.375,3.542
s-1.916,2.5-2.333,3s-4.043,4.209-4.334,4.417s-3.666,2.458-3.958,2.458s-3.292,0.708-3.625,0.375s-1.417-1.876-1.417-2.417
s0.292-2.625,0.542-3.083s2.251-3.292,2.542-3.542s3.959-3.999,4.375-4.166s4.375-2.625,4.875-2.875s5.917-3.293,6.5-3.584
s2.334-0.832,3-1.041s4.874-1.75,5.041-1.875s6.75-3.625,7.042-3.875s4.292-3.375,4.667-4s4.332-3.708,4.416-3.875
s0.917-0.958,1.042-1.25s1.25-1.311,1.375-1.75"
/>
<path
class="st2"
d="M308.583,67.583c0.25,0.083,2.208,0.833,2.375,1.75
s0.208,1.208,0,1.625"
/>
<path
class="st2"
d="M343.375,52.938c0,0,1.695-1.938,1.379-2.375
s-2.316-0.459-2.504-0.667s-3.34-0.125-3.795,0.333s-4.893,3.396-5.205,4.208s-3.688,3.813-4.063,4.938s-1.125,3.813-1.125,4.5
s-0.625,2.375,0,3.313s2.563,2.188,2.938,2.375s4.256,0.382,5.289-0.292s5.898-3.396,6.336-3.958s5.219-4.959,5.703-5.292
s4.734-4.958,5.109-5.396s7.438-6.625,7.938-7.125s4.5-4.313,4.813-4.813s1.313-1.875,2-2.75s5.188-6.5,5.5-6.875
s2.875-6.125,2.938-6.938s-0.607-3.365-1.116-3.183s-3.009,0.308-3.634,0.683s-4.438,3-4.688,3.5s-4.063,5.063-4.313,5.5
s-3.125,3.875-3.688,4.688s-3.438,6.625-4,8s-3.375,6.125-3.688,7.063s-2.75,5.195-2.875,6.313s-1,2.5-1.563,4.438
s-0.875,4.813-0.875,5.188s1.688,1.875,1.938,1.875s3.125,0.041,4.563-0.917s5.942-4.54,6.375-4.833s6.188-4.75,6.563-5.125
s2.375-3,3.063-3.75s1.188-2,1.563-2.688s0.5-1.438,0.625-1.688s-3.625,1.188-3.75,1.75s-2,2.875-2.125,3.375
s-1.438,2.5-1.875,3.313s-1.852,4.188-2.207,5.688s-0.855,3.104-0.543,3.958s1.688,0.917,1.875,0.917S366,69,366.625,68.313
s6.938-6.75,7.313-7.438s4.938-5.5,5.063-5.938s1.375-2,1.875-2.563s1.563-1.688,1.688-1.313s0.813,1.125,0.313,1.813
s-4.375,5.938-4.563,6.375s-2.846,3.25-3.392,4.188s-1.733,2.25-2.421,3.063s-1.125,1.906-0.813,2.484s1.313,1.016,2,1.203
s2.789-0.125,3.395-0.438s3.105-1.896,3.23-2.167S383.688,64.375,384,64s3.438-3.389,3.688-3.476s4.375-3.712,4.5-3.899
s4.688-4.125,4.938-4.313s7.125-7.063,7.563-7.625s4.188-3.938,4.375-4.313s3.625-4.938,4.063-5.688s3.313-5.188,3.563-5.688
s0.571-3.556,0.75-4.125s-2.125-2.259-2.875-1.942s-4,1.817-4.188,2.254s-2.938,2.938-3.25,3.688s-2.5,2.75-3.313,4.188
s-3.125,4.438-3.438,5.25s-2.313,4.438-2.813,5.625s-2.125,3.438-3,4.813s-2.438,4-2.75,4.625s-1.563,3.438-1.625,3.938
s-1.5,3.313-1.563,4s-1.563,5.313-1.5,6.125s0.1,2.305,0.625,2.807s3.688-0.119,3.875-0.369s4-3.125,4.563-3.625
s2.563-3,2.875-3.375s2.148-2.5,2.605-3.125s1.77-3.125,2.207-3.75s1.25-3.75,1.25-4.125s-0.794-1.571-1.175-1.601
s-3.444,0.894-3.229,1.435s-0.968,3.042-0.659,3.979s0.25,3.438,0.563,3.688s3.5,1.875,4,1.688s3.063-0.709,3.25-1.042
s1.563-1.708,1.938-2.271s0.75-1.061,0.813-1.375"
/>
</g>
</mask>
</defs>
<g id="text" mask="url(#mymask)">
<path
d="M184.559,14.301c-2.498,2.641-4.684,4.561-6.556,5.76c-2.258,1.44-4.947,2.448-8.069,3.024
c-7.156,1.296-12.367,1.944-15.633,1.944c-4.611,0-11.095-0.983-19.452-2.952l-20.532-4.824
c-5.524-1.296-11.046-1.944-16.569-1.944c-11.239,0-20.989,3.553-29.249,10.656l-4.828,5.904
c-1.297,3.697-1.945,5.953-1.945,6.768c0,2.641,0.96,4.921,2.884,6.84c0.817,1.584,2.763,2.88,5.84,3.888
c0.865-3.359,3.485-6.599,7.86-9.72c2.788-1.968,6.682-2.952,11.681-2.952c6.633,0,10.864,2.28,12.691,6.84
c5.191,1.057,7.787,3.648,7.787,7.776l-1.944,5.904c-0.912,1.92-1.872,2.88-2.88,2.88l1.944-2.88l1.944-5.904l-1.944-3.888
l-3.96-2.88v3.888c0,3.937-1.285,7.188-3.852,9.756c-2.568,2.569-5.821,3.853-9.756,3.853c-2.689,0-4.633-0.648-5.832-1.944
c-1.969-0.96-2.952-2.903-2.952-5.832c0.191-1.919,1.176-3.863,2.952-5.832c-5.376,1.249-8.64,1.872-9.792,1.872h-2.88v2.901
c0,5.562,1.944,9.815,5.832,12.766c3.456,2.612,8.016,3.917,13.68,3.917c6.432,0,11.652-1.982,15.66-5.949
c4.007-3.967,7.211-8.81,9.612-14.531c4.08-6.49,6.36-10.096,6.84-10.818c2.448-3.653,4.727-6.537,6.84-8.653
c1.533-1.535,2.774-2.71,3.725-3.524c1.074-0.919,1.776-1.379,2.107-1.379l-8.784,13.608l-5.832,10.728
c-1.104,2.016-3.384,5.592-6.84,10.728c-7.056,7.153-14.832,10.728-23.328,10.728c-5.425,0-10.296-1.631-14.616-4.896
c-4.561-2.688-6.84-6.912-6.84-12.672l0.936-2.88c-2.064-0.72-3.432-1.248-4.104-1.584c-1.344-0.671-2.232-1.44-2.664-2.304
c-1.969-1.968-2.952-4.583-2.952-7.848l1.944-7.776l4.896-6.84c8.784-7.776,19.487-11.664,32.112-11.664
c2.832,0,9.672,0.648,20.52,1.944l20.448,5.832c6.912,1.969,13.727,2.952,20.448,2.952c6.239,0,11.111-1.296,14.616-3.888
c2.016-0.671,3.479-1.248,4.392-1.728C181.798,16.653,183.263,15.597,184.559,14.301z M100.751,43.533
c-2.16-3.312-5.736-4.943-10.728-4.896c-3.36,0.048-6.937,0.696-10.728,1.944c-3.409,2.592-5.688,5.521-6.84,8.784h1.944
c4.799,0,9.36-1.296,13.68-3.888l10.728-2.88L100.751,43.533z M101.687,46.485v-1.944h-2.89l-9.829,1.944
c-4.529,1.825-6.793,4.417-6.793,7.776c0,3.888,1.951,5.832,5.854,5.832c3.228,0,6.48-1.632,9.756-4.896
C100.385,52.605,101.687,49.701,101.687,46.485z"
/>
<path
d="M149.422,57.068l-0.936,1.008c-2.4,2.593-4.705,3.889-6.912,3.889l-2.952-0.936c-4.656,6.527-8.904,9.791-12.744,9.791
c-1.969-0.239-3.265-0.576-3.888-1.008c-0.864-0.911-1.199-2.207-1.008-3.888c0-4.271,1.968-7.872,5.904-10.8
c3.888-3.936,7.488-5.904,10.8-5.904l1.944,1.008h-1.008c-2.016,0-4.968,2.277-8.856,6.829c-3.888,4.553-5.832,7.864-5.832,9.937
c0,1.928,0.983,2.891,2.952,2.891c1.008,0,2.976-0.963,5.904-2.891c1.343-1.398,2.279-2.436,2.808-3.109
c0.959-1.253,1.656-2.529,2.088-3.832l-1.008-3.904c0-2.65,0.983-3.976,2.952-3.976c0.479,0,0.924,0.204,1.332,0.612
c0.407,0.408,0.612,0.853,0.612,1.332c0,0.144-0.648,2.112-1.944,5.904c0,0.672,0.648,1.008,1.944,1.008
c2.304,0,3.96-0.984,4.968-2.953l1.944-1.943h0.936V57.068z M140.638,54.117l-1.008-0.937l-1.008,2.952v2.88L140.638,54.117z"
/>
<path
d="M180.309,57.068c-0.96,1.345-2.928,3.648-5.903,6.912l-5.904,5.832l-4.896,1.008l-2.952-1.008l-0.937-1.943
c0-2.448,1.308-5.412,3.924-8.893c2.616-3.479,3.925-5.748,3.925-6.804l-1.009-1.008c-1.632,0-4.248,2.304-7.848,6.911
l-6.912,8.856c-2.016,2.593-3.96,3.888-5.832,3.888h-1.008c0-0.959,1.968-3.911,5.904-8.855c3.935-4.943,5.904-8.208,5.904-9.792
l-1.008-1.008c-0.624,0-2.257,1.32-4.896,3.96l-1.944,2.951h-1.008c-0.48,0-0.72-0.047-0.72-0.144c0-0.095,0.24-0.384,0.72-0.864
l1.944-2.951c3.263-3.264,5.568-4.896,6.912-4.896c1.968,0,2.952,1.321,2.952,3.96v2.952c3.601-4.607,6.216-6.912,7.849-6.912
c1.967,0,2.951,1.321,2.951,3.96c0,1.728-1.32,4.345-3.96,7.849s-3.96,5.784-3.96,6.84c0,0.48,0.204,0.924,0.612,1.332
c0.407,0.408,0.875,0.611,1.404,0.611c0.863,0,2.111-0.695,3.744-2.088c0.959-0.815,2.976-2.736,6.048-5.76l5.903-5.832V57.068z"
/>
<path
d="M211.917,57.068c-0.385,0.77-1.296,1.801-2.736,3.097c-2.641,2.4-4.032,3.672-4.176,3.815
c-2.592,2.592-7.177,5.521-13.752,8.785l-6.84,8.855c-1.296,1.729-2.617,3.42-3.96,5.076c-1.345,1.656-2.641,2.916-3.889,3.779
c-2.592,2.592-5.207,3.889-7.848,3.889c-1.487,0-2.52-0.277-3.096-0.828c-0.576-0.553-0.864-1.572-0.864-3.061
c0-2.305,1.969-4.92,5.904-7.848c4.607-4.656,10.176-7.945,16.704-9.863l3.888-6.841c-4.32,3.265-6.937,4.896-7.848,4.896
c-1.489,0-2.509-0.287-3.061-0.863c-0.553-0.576-0.828-1.607-0.828-3.096c0-1.775,1.296-4.393,3.889-7.849
c1.199-1.487,2.376-2.999,3.527-4.536c0.911-1.152,1.368-1.919,1.368-2.304l-0.936-1.008c-0.721,0-1.705,0.673-2.952,2.016
l-2.952,1.944l-1.944,2.951h-1.008c-0.48,0-0.72-0.047-0.72-0.144c0-0.095,0.239-0.384,0.72-0.864l1.008-1.008l3.889-4.896
l4.896-0.936c1.968,0,2.952,0.988,2.952,2.962c0,1.783-1.296,4.408-3.888,7.877c-0.145,0.145-1.345,1.662-3.601,4.553
c-0.912,1.156-1.368,1.928-1.368,2.313c0,0.482,0.204,0.928,0.612,1.337c0.407,0.409,0.875,0.614,1.404,0.614
c0.623,0,3.552-2.625,8.784-7.875l6.911-9.826l3.889-2.963l2.016,1.008l-1.008,1.944L192.261,70.82
c5.808-2.304,10.056-5.256,12.744-8.855l5.904-5.904h1.008V57.068z M186.357,73.773l-11.808,6.84
c-5.231,4.223-7.848,7.512-7.848,9.863c0,1.969,0.673,2.953,2.016,2.953c3.6,0,7.848-3.938,12.744-11.809L186.357,73.773z"
/>
<path
d="M227.541,34.539c0,0.918-0.984,2.872-2.951,5.864l-3.889,5.938h5.904c0,0.445-0.036,0.713-0.108,0.802
c-0.071,0.09-0.372,0.134-0.899,0.134h-5.904l-9.792,14.735c-1.969,2.938-2.952,4.912-2.952,5.922
c0,0.482,0.204,0.929,0.612,1.338c0.407,0.41,0.852,0.613,1.332,0.613c2.16,0,5.447-2.629,9.864-7.89l4.896-5.862h0.937v0.936
c-0.961,1.345-2.905,3.648-5.832,6.912c-4.562,4.561-8.161,6.84-10.801,6.84c-2.639,0-3.96-0.982-3.96-2.951
c0-2.352,1.321-5.616,3.96-9.793l6.841-10.799h-4.896v-0.936h5.904l7.848-11.802l2.952-1.014L227.541,34.539z"
/>
<path
d="M247.413,57.068l-0.936,1.008c-2.401,2.593-4.705,3.889-6.912,3.889l-2.952-0.936c-4.656,6.527-8.904,9.791-12.744,9.791
c-1.969-0.239-3.265-0.576-3.888-1.008c-0.864-0.911-1.199-2.207-1.008-3.888c0-4.271,1.967-7.872,5.903-10.8
c3.889-3.936,7.488-5.904,10.8-5.904l1.944,1.008h-1.008c-2.016,0-4.968,2.277-8.856,6.829c-3.888,4.553-5.832,7.864-5.832,9.937
c0,1.928,0.983,2.891,2.952,2.891c1.008,0,2.976-0.963,5.904-2.891c1.343-1.398,2.279-2.436,2.808-3.109
c0.96-1.253,1.656-2.529,2.088-3.832l-1.008-3.904c0-2.65,0.983-3.976,2.952-3.976c0.479,0,0.924,0.204,1.332,0.612
c0.407,0.408,0.612,0.853,0.612,1.332c0,0.144-0.648,2.112-1.944,5.904c0,0.672,0.648,1.008,1.944,1.008
c2.304,0,3.96-0.984,4.968-2.953l1.944-1.943h0.936V57.068z M238.628,54.117l-1.008-0.937l-1.008,2.952v2.88L238.628,54.117z"
/>
<path
d="M278.301,57.068c-0.961,1.345-2.93,3.648-5.904,6.912l-5.904,5.832l-4.896,1.008l-2.951-1.008l-0.936-1.943
c0-2.448,1.307-5.412,3.924-8.893c2.615-3.479,3.924-5.748,3.924-6.804l-1.008-1.008c-1.633,0-4.248,2.304-7.848,6.911
l-6.913,8.856c-2.017,2.593-3.96,3.888-5.832,3.888h-1.009c0-0.959,1.968-3.911,5.904-8.855c3.935-4.943,5.904-8.208,5.904-9.792
l-1.008-1.008c-0.625,0-2.256,1.32-4.896,3.96l-1.943,2.951H245.9c-0.48,0-0.72-0.047-0.72-0.144c0-0.095,0.239-0.384,0.72-0.864
l1.944-2.951c3.263-3.264,5.568-4.896,6.912-4.896c1.969,0,2.953,1.321,2.953,3.96v2.952c3.6-4.607,6.215-6.912,7.848-6.912
c1.967,0,2.951,1.321,2.951,3.96c0,1.728-1.32,4.345-3.959,7.849c-2.641,3.504-3.961,5.784-3.961,6.84
c0,0.48,0.203,0.924,0.613,1.332c0.406,0.408,0.875,0.611,1.402,0.611c0.865,0,2.113-0.695,3.744-2.088
c0.961-0.815,2.977-2.736,6.049-5.76l5.904-5.832V57.068z"
/>
<path
d="M309.908,57.068c-0.385,0.77-1.297,1.801-2.736,3.097c-2.641,2.4-4.033,3.672-4.176,3.815
c-2.592,2.592-7.178,5.521-13.752,8.785l-6.84,8.855c-1.297,1.729-2.617,3.42-3.961,5.076s-2.641,2.916-3.889,3.779
c-2.592,2.592-5.207,3.889-7.848,3.889c-1.486,0-2.52-0.277-3.096-0.828c-0.576-0.553-0.863-1.572-0.863-3.061
c0-2.305,1.969-4.92,5.904-7.848c4.607-4.656,10.176-7.945,16.703-9.863l3.889-6.841c-4.32,3.265-6.938,4.896-7.848,4.896
c-1.49,0-2.51-0.287-3.061-0.863c-0.553-0.576-0.828-1.607-0.828-3.096c0-1.775,1.295-4.393,3.889-7.849
c1.199-1.487,2.375-2.999,3.527-4.536c0.91-1.152,1.367-1.919,1.367-2.304l-0.936-1.008c-0.721,0-1.705,0.673-2.951,2.016
l-2.953,1.944l-1.943,2.951H276.5c-0.48,0-0.721-0.047-0.721-0.144c0-0.095,0.24-0.384,0.721-0.864l1.008-1.008l3.889-4.896
l4.895-0.936c1.969,0,2.953,0.988,2.953,2.962c0,1.783-1.297,4.408-3.889,7.877c-0.145,0.145-1.344,1.662-3.6,4.553
c-0.912,1.156-1.369,1.928-1.369,2.313c0,0.482,0.205,0.928,0.613,1.337c0.406,0.409,0.875,0.614,1.404,0.614
c0.623,0,3.551-2.625,8.783-7.875l6.912-9.826l3.889-2.963l2.016,1.008l-1.008,1.944L290.252,70.82
c5.807-2.304,10.055-5.256,12.744-8.855l5.904-5.904h1.008V57.068z M284.348,73.773l-11.809,6.84
c-5.23,4.223-7.848,7.512-7.848,9.863c0,1.969,0.674,2.953,2.016,2.953c3.6,0,7.848-3.938,12.744-11.809L284.348,73.773z"
/>
<path
d="M306.309,68.949v0.072c0-0.816,0.324-1.513,0.971-2.089c0.648-0.575,1.428-0.864,2.34-0.864s1.703,0.277,2.377,0.828
c0.672,0.553,1.008,1.236,1.008,2.053s-0.324,1.512-0.973,2.088c-0.646,0.576-1.428,0.863-2.34,0.863
c-0.961,0-1.764-0.287-2.412-0.863C306.633,70.461,306.309,69.766,306.309,68.949z"
/>
<path
d="M350.73,57.068c-0.191,0.193-0.936,1.105-2.23,2.736c-1.297,1.633-2.521,3.023-3.672,4.176
c-4.563,4.561-8.496,6.84-11.809,6.84l-4.896-1.943c-1.295-1.392-1.943-3.023-1.943-4.896c0-3.312,1.631-6.6,4.896-9.863
c4.367-3.264,7.967-4.896,10.799-4.896c2.639,0,3.961,0.984,3.961,2.952l-1.008,1.008c0,0.48-0.037,0.757-0.109,0.828
s-0.371,0.108-0.9,0.108c-1.295,0-1.943-0.318-1.943-0.953l1.008-2.055l-1.008-0.953c-1.439,0-2.725,0.506-3.852,1.517
c-1.129,1.014-2.461,2.795-3.996,5.348c-2.592,2.602-3.889,5.565-3.889,8.889c0,2.602,0.961,3.902,2.881,3.902
c3.455,0,7.391-2.615,11.809-7.848l4.895-5.832h1.008V57.068z"
/>
<path
d="M377.082,25.681c0,3.558-3.258,9.134-9.77,16.73c-5.842,6.779-10.75,11.346-14.723,13.7l-2.945,5.913
c-0.238,0.674-0.67,1.899-1.291,3.678c-0.434,1.106-0.648,1.852-0.648,2.235c0,0.481,0.205,0.926,0.613,1.334
c0.406,0.41,0.852,0.613,1.332,0.613c1.967,0,5.566-2.629,10.799-7.89l4.896-5.935h1.008v1.008
c-0.191,0.193-0.936,1.105-2.232,2.736c-1.295,1.633-2.52,3.023-3.672,4.176l-5.904,4.896c-1.488,1.008-3.432,1.656-5.832,1.943
c-1.488,0-2.52-0.287-3.096-0.863s-0.863-1.607-0.863-3.096c0-3.504,1.963-9.048,5.891-16.632
c9.482-18.335,17.314-27.504,23.492-27.504C376.1,22.725,377.082,23.71,377.082,25.681z M376.146,25.677
c0-0.527-0.205-0.996-0.613-1.404c-0.408-0.407-0.852-0.612-1.332-0.612c-4.225,0-10.775,9.84-19.656,29.52
c6.576-6.576,11.496-11.832,14.762-15.768C373.865,32.853,376.146,28.941,376.146,25.677z"
/>
<path
d="M391.121,57.068c-0.193,0.193-0.938,1.105-2.232,2.736c-1.297,1.633-2.52,3.023-3.672,4.176s-2.545,2.377-4.176,3.672
c-1.633,1.297-2.52,2.017-2.664,2.16l-3.961,1.008c-2.592,0-3.887-0.982-3.887-2.951l1.943-3.889
c-4.561,4.561-8.16,6.84-10.801,6.84c-1.967,0-2.951-0.982-2.951-2.951c0-1.873,0.984-4.824,2.951-8.856l4.896-6.84l3.961-1.944
h1.943c0,0.675-1.633,3.3-4.896,7.876l-4.896,6.865l-1.008,2.963l1.008,1.951c2.4,0,7.633-5.564,15.697-16.693
c1.918-1.975,3.551-2.962,4.896-2.962l1.943,0.939c-0.912,1.013-1.943,2.434-3.096,4.264c-0.961,1.541-1.896,3.084-2.809,4.625
c-0.721,1.061-2.137,3.084-4.248,6.07c-1.057,1.494-1.584,2.434-1.584,2.818c0,0.627,0.648,0.939,1.943,0.939
c0.623,0,1.824-0.651,3.602-1.954c2.111-1.592,4.176-3.571,6.191-5.936l4.896-5.862h1.008V57.068z"
/>
<path
d="M417.832,25.681c0,4.086-3.258,9.663-9.768,16.73c-5.557,6.01-10.463,10.576-14.725,13.7l-2.943,5.913
c-0.24,0.674-0.672,1.899-1.293,3.678c-0.432,1.106-0.648,1.852-0.648,2.235l1.01,1.947c2.447,0,6.047-3.275,10.799-9.828
l-1.008-3.975l1.008-3.902c0.816-0.914,1.775-1.565,2.881-1.951c1.967,0,2.951,0.648,2.951,1.944c0,2.64-1.295,5.256-3.887,7.849
h1.943l4.896-1.945l1.008-2.016h1.008v1.008l-1.008,1.008c-1.729,2.593-4.033,3.889-6.912,3.889l-1.945-0.936
c-4.656,6.527-8.566,9.791-11.734,9.791c-1.488,0-2.521-0.287-3.098-0.863c-0.574-0.576-0.863-1.607-0.863-3.096
c0-3.264,1.963-8.809,5.891-16.632c2.971-4.608,6.873-10.824,11.711-18.648c4.98-5.904,8.906-8.856,11.781-8.856
C416.85,22.725,417.832,23.71,417.832,25.681z M416.896,25.677c0-0.527-0.205-0.996-0.613-1.404
c-0.408-0.407-0.852-0.612-1.332-0.612c-4.223,0-10.775,9.84-19.654,29.52c4.318-3.215,8.254-7.488,11.807-12.816
C413.631,33.262,416.896,28.366,416.896,25.677z M404.152,53.181c0-1.343-0.336-2.016-1.008-2.016
c-0.961,0.624-1.609,1.296-1.945,2.016l-0.936,3.888l0.936,1.944C403.168,56.037,404.152,54.094,404.152,53.181z"
/>
</g>
</svg>.st0 {
fill: none;
}
.st1 {
fill: none;
stroke: #ffffff;
stroke-width: 7;
stroke-miterlimit: 10;
}
.st2 {
fill: none;
stroke: #ffffff;
stroke-width: 8;
stroke-miterlimit: 10;
}
@keyframes draw {
to {
stroke-dashoffset: 0;
}
}
#mymask path {
stroke-dasharray: 2000px;
stroke-dashoffset: 2000px;
animation-name: draw;
animation-duration: 3s;
animation-fill-mode: forwards;
animation-iteration-count: 1;
animation-timing-function: linear;
fill: none;
}
/* #mymask path:nth-child(1) {
animation-delay: .2s;
} */
#mymask path:nth-child(2) {
animation-delay: 0.2s;
}
#mymask path:nth-child(3) {
animation-delay: 0.4s;
}
#mymask path:nth-child(4) {
animation-delay: 0.6s;
}
#mymask path:nth-child(5) {
animation-delay: 0.8s;
}
#mymask path:nth-child(6) {
animation-delay: 1s;
}
/* #mymask path:nth-child(7) {
animation-delay: 1.2s;
}
#mymask path:nth-child(8) {
animation-delay: 1.4s;
}
#mymask path:nth-child(9) {
animation-delay: 1.6s;
}
#mymask path:nth-child(10) {
animation-delay: 1.8s;
}
#mymask path:nth-child(11) {
animation-delay: 2s;
} */渐变显示文字动画效果
<button class="gradient-text-btn">开始动画</button>
<div class="gradient-text-wrapper">
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 800 300"
version="1.1"
>
<defs>
<linearGradient id="gradient" gradientUnits="userSpaceOnUse" gradientTransform="rotate(0)" x2="800" y2="0">
<stop offset="0" stop-color="#FFFFFF" stop-opacity="0" />
<stop offset="0.25" stop-color="#FFFFFF" stop-opacity="0.25" />
<stop offset="1" stop-color="#FFFFFF" stop-opacity="1" />
</linearGradient>
<mask id="mask" maskUnits="userSpaceOnUse">
<rect width="800" height="300" fill="url(#gradient)" />
</mask>
<text id="txt" x="400" y="150" font-family="Arial Black" font-size="60" text-anchor="middle">ISUX AWESOME</text>
</defs>
<use xlink:href="#txt" fill="#FFDD00" mask="url(#mask)" />
</svg>
</div>.gradient-text-btn {
display: block;
margin: 5% auto;
padding: 5px 10px;
color: #fff;
background: #7ac142;
font-weight: bold;
}
.gradient-text-wrapper {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
width: 100%;
background: #261632;
}window.onload = function () {
var script = document.createElement('script')
script.setAttribute('type', 'text/javascript')
script.setAttribute(
'src',
'https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TweenMax.min.js'
)
var heads = document.getElementsByTagName('head')
if (heads.length) {
heads[0].appendChild(script)
} else {
document.documentElement.appendChild(script)
}
script.onload = function () {
document
.querySelector('.gradient-text-btn')
.addEventListener('click', function () {
gradientTextAnimation()
})
}
}
function gradientTextAnimation() {
// 循环播放动画
var tl = new TimelineMax({
repeat: -1,
})
// 获取svg中渐变的transform属性
var gradient = document.getElementById('gradient'),
gradient_attr = gradient.getAttribute('gradientTransform')
// 改变渐变transform的rotate属性
for (var i = 0, l = 360; i <= l; i++) {
tl.to(gradient, 0.01, {
attr: {
gradientTransform: 'rotate(' + -i + ')',
},
ease: Linear.easeInOut,
})
}
}