HTML5 SVG滤镜文字特效代码下载


HTML5 SVG滤镜文字特效代码下载
HTML5 SVG滤镜文字特效代码下载以及SVG、滤镜文字等js/jquery网页特效代码下载。

1. 引入CSS

<link type="text/css" href="css/style.css" rel="stylesheet" />

2. 引入JS

<script src="js/TweenMax.min.js" ></script>

3. HTML代码

<div class="text-box">
	<span class="dot"></span>
	<span class="dot"></span>
	<span class="dot"></span>
</div>
<svg height="0" width="0">
	<defs>
		<clipPath id="svgTextPath">
			<!-- textLength 文字的长度 此处对应容器的宽度  x y 为横纵坐标位置 -->
			<text x="50" y="180" textLength="600px">滤镜文字</text>
			<text x="0" y="340" textLength="700px">learning</text>
		</clipPath>
	</defs>
</svg>
<script>
    function move() {
        let box = document.querySelector(".text-box");
        let dt = document.querySelectorAll(".dot");
        window.addEventListener("mousemove", function (e) {
            for (let i = 0; i < dt.length; i++) {
                //圆灯相对于 容器的坐标位置
                let x = e.pageX - box.offsetLeft - dt[i].offsetWidth / 2;
                let y = e.pageY - box.offsetTop - dt[i].offsetHeight / 2;
                TweenLite.to(dt[i], i + 0.2, {
                    x: x,
                    y: y,
                    ease: Back.easeOut.config(1.7)
                });
            }
        });
    }
    move()
</script>

相关推荐

发表评论

相关文章