一款CSS+SVG的弹性笔画特效,可以设置不同大小的文字来分行显示,弹性笔画的颜色也可自由更改,可以做成多彩或者纯色的都行,适用于页面需要动感文字特效的场景,喜欢的童鞋请收下吧。
页面的head部分,需设置好页面元素的样式,代码如下:
html, body {
height: 100%;
}
body {
background: #082330;
background-size: .12em 100%;
font: 12em/1 'Microsoft YaHei','Lantinghei SC','Open Sans',Arial,'Hiragino Sans GB','STHeiti','WenQuanYi Micro Hei','SimSun',sans-serif;
}
.text--line {
font-size: .5em;
}
svg {
position: absolute;
width: 100%;
height: 100%;
}
.text-copy {
fill: none;
stroke: white;
stroke-dasharray: 8% 18%;
stroke-width: 2px;
-webkit-animation: stroke-offset 9s infinite linear;
animation: stroke-offset 9s infinite linear;
}
.text-copy:nth-child(1) {
stroke: #360745;
stroke-dashoffset: 7%;
}
.text-copy:nth-child(2) {
stroke: #D61C59;
stroke-dashoffset: 14%;
}
.text-copy:nth-child(3) {
stroke: #E7D84B;
stroke-dashoffset: 21%;
}
.text-copy:nth-child(4) {
stroke: #EFEAC5;
stroke-dashoffset: 28%;
}
.text-copy:nth-child(5) {
stroke: #1B8798;
stroke-dashoffset: 35%;
}
@-webkit-keyframes stroke-offset {
50% {
stroke-dashoffset: 35%;
stroke-dasharray: 0 87.5%;
}
}
@keyframes stroke-offset {
50% {
stroke-dashoffset: 35%;
stroke-dasharray: 0 87.5%;
}
}
页面的body部分,主要是svg设置好容器大小和文字的位置等,代码如下:
<svg viewBox="0 0 1024 768">
<symbol id="s-text">
<text text-anchor="middle"
x="50%"
y="35%"
class="text--line"
>
www.sucaihuo.com
</text>
<text text-anchor="middle"
x="50%"
y="68%"
class="text--line2"
>
素材火
</text>
</symbol>
<g class="g-ants">
<use xlink:href="#s-text"
class="text-copy"></use>
<use xlink:href="#s-text"
class="text-copy"></use>
<use xlink:href="#s-text"
class="text-copy"></use>
<use xlink:href="#s-text"
class="text-copy"></use>
<use xlink:href="#s-text"
class="text-copy"></use>
</g>
</svg>
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791