我们很久没有写文本效果了，今天就来写一个文本的霓虹灯效果，具体效果如下：
HTML代码：
<!DOCTYPE html>
<html lang=”en” >
<head>
<meta charset=”UTF-8″>
<title>【每日一练】172—实现一款霓虹灯文本效果</title>
<link rel=”stylesheet” href=”./style.css”></head>
<body>
<img class=”bottom” src=”https://s3-us-west-2.amazonaws.com/s.cdpn.io/756881/Artboard%201.svg” />
<svg class=”top” xmlns=”http://www.w3.org/2000/svg” xmlns:xlink=”http://www.w3.org/1999/xlink” preserveAspectRatio=”none” viewBox=”0 0 970 250″>
<defs>
<mask id=”mask”>
<g class=”right”>
<rect fill=”#fff” class=”1″ x=”0″ y=”-0.1″ width=”51″ height=”251″ />
<rect fill=”#fff” class=”1″ x=”487.1″ y=”0″ width=”51″ height=”251″ />
</g>
<g class=”right”>
<rect fill=”#fff” class=”2″ x=”45.1″ y=”0″ width=”51″ height=”251″ />
<rect fill=”#fff” class=”2″ x=”533.3″ y=”0″ width=”51″ height=”251″ />
</g>
<g class=”right”>
<rect fill=”#fff” class=”3″ x=”94.6″ y=”0″ width=”51″ height=”251″ />
<rect fill=”#fff” class=”3″ x=”583.9″ y=”0″ width=”51″ height=”251″ />
</g>
<g class=”right”>
<rect fill=”#fff” class=”4″ x=”634.4″ y=”0″ width=”51″ height=”251″ />
<rect fill=”#fff” class=”4″ x=”143.9″ y=”0″ width=”51″ height=”251″ />
<rect fill=”#fff” class=”4″ x=”671.9″ y=”0″ width=”49.5″ height=”250″ />
</g>
<g class=”left”>
<rect fill=”#fff” class=”9″ x=”422.4″ y=”0″ width=”51″ height=”251″ />
<rect fill=”#fff” class=”9″ x=”919.4″ y=”0.1″ width=”51″ height=”251″ />
</g>
<g class=”left”>
<rect fill=”#fff” class=”5″ x=”224.8″ y=”0″ width=”51″ height=”251″ />
<rect fill=”#fff” class=”5″ x=”717.2″ y=”0″ width=”51″ height=”251″ />
<rect fill=”#fff” class=”5″ x=”448.5″ y=”-0.1″ width=”49.5″ height=”250″/>
</g>
<g class=”left”>
<rect fill=”#fff” class=”6″ x=”274.3″ y=”0″ width=”51″ height=”251″ />
<rect fill=”#fff” class=”8″ x=”373.1″ y=”0″ width=”51″ height=”251″ />
<rect fill=”#fff” class=”6″ x=”767.8″ y=”0″ width=”51″ height=”251″ />
<rect fill=”#fff” class=”8″ x=”868.9″ y=”0.1″ width=”51″ height=”251″ />
</g>
<g class=”left”>
<rect fill=”#fff” class=”7″ x=”323.6″ y=”0″ width=”51″ height=”251″ />
<rect fill=”#fff” class=”7″ x=”818.3″ y=”0″ width=”51″ height=”251″ />
<rect fill=”#fff” class=”7″ x=”179.9″ y=”-0.1″ width=”49.5″ height=”250″/>
</g>
</mask>
</defs>
<g mask=”url(#mask)”><g>
<path class=”text-fill” d=”M26,199.8c-6.9-7.2-10.3-17.1-10.3-29.6V97.7c0-15.6,3.1-27.4,9.3-35.3c6.2-7.9,16-11.9,29.3-11.9
c11.6,0,20.9,3.2,28,9.5c7.1,6.3,10.6,15.5,10.6,27.5v27.1H61.6V91.3c0-4.5-0.5-7.6-1.6-9.3c-1.1-1.7-3-2.6-5.7-2.6
c-2.8,0-4.7,1-5.8,2.9c-1,2-1.6,4.8-1.6,8.6v78.9c0,4.1,0.6,7.2,1.8,9.1c1.2,1.9,3,2.8,5.5,2.8c4.9,0,7.3-4,7.3-11.9v-28.4h31.7
V171c0,26.4-13.2,39.5-39.7,39.5C42.1,210.6,32.9,207,26,199.8z”/>
<path class=”text-fill” d=”M112.3,199c-6.6-7.7-9.9-18.6-9.9-32.7V91.4c0-13.5,3.3-23.8,9.9-30.7c6.6-6.9,16.2-10.3,28.9-10.3
c12.7,0,22.3,3.4,28.9,10.3c6.6,6.9,9.9,17.1,9.9,30.7v74.8c0,14.2-3.3,25.1-9.9,32.8c-6.6,7.7-16.2,11.5-28.9,11.5
C128.5,210.6,118.9,206.7,112.3,199z M146.9,178c1-2.4,1.5-5.9,1.5-10.2V90.9c0-3.4-0.5-6.2-1.4-8.3c-0.9-2.1-2.8-3.2-5.6-3.2
c-5.2,0-7.9,4-7.9,11.9v76.7c0,4.5,0.5,7.9,1.6,10.2c1.1,2.3,3.1,3.5,6,3.5C144,181.7,145.9,180.4,146.9,178z”/>
<path class=”text-fill” d=”M201.2,199c-6.6-7.7-9.9-18.6-9.9-32.7V91.4c0-13.5,3.3-23.8,9.9-30.7c6.6-6.9,16.2-10.3,28.9-10.3
c12.7,0,22.3,3.4,28.9,10.3c6.6,6.9,9.9,17.1,9.9,30.7v74.8c0,14.2-3.3,25.1-9.9,32.8c-6.6,7.7-16.2,11.5-28.9,11.5
C217.5,210.6,207.8,206.7,201.2,199z M235.8,178c1-2.4,1.5-5.9,1.5-10.2V90.9c0-3.4-0.5-6.2-1.4-8.3c-0.9-2.1-2.8-3.2-5.6-3.2
c-5.2,0-7.9,4-7.9,11.9v76.7c0,4.5,0.5,7.9,1.6,10.2c1.1,2.3,3.1,3.5,6,3.5C233,181.7,234.8,180.4,235.8,178z”/>
<path class=”text-fill” d=”M281.6,209.1V51.9H313v130.5h32.4v26.7H281.6z”/>
<path class=”text-fill” d=”M392.8,209.1L408,51.9h53.3l15,157.2h-29.8l-2.2-25.4h-19l-1.8,25.4H392.8z M427.6,158.6h14.3l-7-80h-1.5
L427.6,158.6z”/>
<path class=”text-fill” d=”M492.2,200c-6.3-7.1-9.5-18.5-9.5-34.2v-15.4h30.9v19.6c0,7.8,2.5,11.7,7.5,11.7c2.8,0,4.8-0.8,5.9-2.5
c1.1-1.6,1.6-4.4,1.6-8.3c0-5.1-0.6-9.4-1.8-12.7c-1.2-3.4-2.8-6.2-4.7-8.4c-1.9-2.3-5.3-5.8-10.2-10.5l-13.5-13.5
c-10.5-10.2-15.7-21.6-15.7-34c0-13.4,3.1-23.6,9.2-30.7c6.2-7,15.2-10.5,27-10.5c14.2,0,24.3,3.8,30.6,11.3
c6.2,7.5,9.3,19.2,9.3,35.2h-32l-0.2-10.8c0-2.1-0.6-3.7-1.7-4.9c-1.2-1.2-2.8-1.8-4.8-1.8c-2.4,0-4.3,0.7-5.5,2
c-1.2,1.3-1.8,3.2-1.8,5.5c0,5.1,2.9,10.4,8.8,15.9l18.3,17.6c4.3,4.1,7.8,8.1,10.6,11.8c2.8,3.7,5.1,8.1,6.8,13.2
c1.7,5.1,2.6,11.1,2.6,18c0,15.5-2.8,27.2-8.5,35.2c-5.7,8-15,12-28.1,12C508.8,210.6,498.5,207,492.2,200z”/>
<path class=”text-fill” d=”M613,209.1V51.9h31.3v56.2h14.8V51.9h31.3v157.2h-31.3v-71.4h-14.8v71.4H613z”/>
<path class=”text-fill” d=”M704.3,209.1V51.9h63v30.4h-30.9v30.6H766v29.6h-29.6v36.1h32.9v30.6H704.3z”/>
<path class=”text-fill” d=”M788.7,199.8c-6.9-7.2-10.3-17.1-10.3-29.6V97.7c0-15.6,3.1-27.4,9.3-35.3c6.2-7.9,16-11.9,29.3-11.9
c11.6,0,20.9,3.2,28,9.5c7.1,6.3,10.6,15.5,10.6,27.5v27.1h-31.3V91.3c0-4.5-0.5-7.6-1.6-9.3c-1.1-1.7-3-2.6-5.7-2.6
c-2.8,0-4.7,1-5.8,2.9c-1,2-1.6,4.8-1.6,8.6v78.9c0,4.1,0.6,7.2,1.8,9.1c1.2,1.9,3,2.8,5.5,2.8c4.9,0,7.3-4,7.3-11.9v-28.4H856V171
c0,26.4-13.2,39.5-39.7,39.5C804.8,210.6,795.6,207,788.7,199.8z”/>
<path class=”text-fill” d=”M866.4,209.1V51.9h31.1v63l14.6-63h31.7l-17.6,71.9l21.2,85.3h-32.6L897.7,133v76.1H866.4z”/>
</g>
</g>
</svg><script src=’https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TweenMax.min.js’></script><script src=”./script.js”></script>
</body>
</html>
CSS代码：
body{
height: 100vh;
background-color: #14151d;
}
.top, .bottom {
position: absolute;
width: 80vw;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}.text-fill {
fill: #fff;
}
JS代码：
function glitchRight() {
var tl = new TimelineMax();
tl.staggerFrom(“.right”, 3, { xPercent: 102, ease: Sine.easeInOut }, 0.1);
return tl;
}function glitchLeft() {
var tl = new TimelineMax();
tl.staggerFrom(“.left”, 3, { xPercent: -102, ease: Sine.easeInOut }, 0.1);
return tl;
}var timeline = new TimelineMax({ repeat: -1, yoyo: true })
.addLabel(‘start’, 0)
.add([glitchLeft(), glitchRight()])
写在最后
以上就是【每日一练】的全部内容，希望今天的小练习对你有用，如果你觉得有帮助的话，请点赞我，关注我，并将它分享给你身边做开发的朋友，也许能够帮助到他。
我是杨小爱，我们明天见。
相关文章
