TSYBLOG.COM

给网站添加波浪滚动特效

jssvg滚动特效/ripro svg滚动特效

为网站添加SVG滚动特效,让网站更炫酷吧!首先将以下代码添加到 要加载的位置,,, RIPRO添加到 主题文件下

%title插图%num
<!--svg滚动特效开始-->
<script src="https://www.okmg.cn/cdn/jquery/jquery-1.10.2.js"></script>
<div class="awaves">
		        <svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
		            <defs>
		                <path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z"></path>
		            </defs>
		            <g class="parallax">
		                <use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(255,255,255,0.7"></use>
		                <use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(255,255,255,0.5)"></use>
		                <use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(255,255,255,0.3)"></use>
		                <use xlink:href="#gentle-wave" x="48" y="7" fill="#fff"></use>
		            </g>
		        </svg>
		    </div>
<!--svg滚动特效结束-->

然后把CSS引入 即可 RIPRO添加到 div.css里

此区域内容需评论后可见

版权声明
喜欢本文?
文章阅读
常见问题
免费下载或者VIP会员专享资源能否直接商用?
提示下载完成但无法解压?
投稿及掉连解决方法:

本站均测试后上架,保证所提供下载的资源的准确性、安全性和完整性。

如有链接无法下载、失效或广告,下方评论区留言,或联系客服处理,看到处理!

如果您也有好的资源或教程,您可以投稿发布,所得成本报酬归发布方所有!

8条回应

  1. clw2020-7-7 19:28

    学习看看~

  2. lixidada2021-3-25 22:06

    学习学习

  3. 12312315612022-5-7 3:59

    123123奥术大师多

  4. zengxuanbin2022-5-8 5:15

    123123121奥术大师多

  5. abo2022-5-9 18:41

    学习

  6. 1有2有2022-6-7 22:09

    看看可以不

  7. 唐大帅2022-6-27 4:55

    感谢大佬

  8. 34870951862022-9-12 8:19

    看看