首页 建站教程 WEB前端 正文

用SVG给页面按钮添加个性点击效果

首先,GitHub的右上方的“Download Zip”zip文件下载。然后将zip文件解压,将解压后js文件夹中的「TweenMax.min.js」和「main.js」加在网页的</body>前面并加载按钮样式表main.css; <script src="js/TweenMax.min....

用SVG给页面按钮添加个性点击效果 前端 按钮特效 GitHub  图1

首先,GitHub的右上方的“Download Zip”zip文件下载。然后将zip文件解压,将解压后js文件夹中的「TweenMax.min.js」和「main.js」加在网页的</body>前面并加载按钮样式表main.css

<script src="js/TweenMax.min.js"></script>
<script src="js/main.js"></script>
<link href="css/main.css"/ rel="stylesheet">

html代码示例:

<button id="component-1" class="button button--1">
    点击按钮
    <span class="button__container">
        <span class="circle top-left"></span>
        <span class="circle top-left"></span>
        <span class="circle top-left"></span>
        <span class="button__bg"></span>
        <span class="circle bottom-right"></span>
        <span class="circle bottom-right"></span>
        <span class="circle bottom-right"></span>
    </span>
</button>

将SVG代码添加在页面的body标签中,位置没有限制:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="svg-filters">
   <defs>
     <filter id="filter-goo-1">
       <feGaussianBlur in="SourceGraphic" stdDeviation="7" result="blur" />
        <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 19 -9"
         result="goo" />
        <feComposite in="SourceGraphic" in2="goo" />
     </filter>
   </defs>
</svg>

从GitHub中下载的代码中还有更多的按钮点击效果,具体的使用方法可以参考文件中的demo。

官方演示:Distorted Button Effects - Codrops

GitHub:GitHub – codrops/DistortedButtonEffects

打赏
海报

本文由优美主题原创或收集发布

转载请注明本文地址:http://www.umtheme.com/web/17.html

相关推荐

如何在html页面中通过css隐藏元素

在平常的页面布局中,我们经常会遇到将某个模块隐藏,而实现不同的页面布局或js交互效果,尤其是在响应式布局中比较常见,下面我们整理了一些关于实现隐藏页面元素的多种方法以及各种方法不同的特点(如:是否占据...

WEB前端 2020.09.18 0 25

web前端写html页面div+css命名规范

web前端写html页面div+css命名规范

使用良好的CSS书写规范来写CSS代码,既能最大化优化前端代码,提升代码阅读体验,更重要的是为以后维护带来方便。常用的CSS命名一般由小...

WEB前端 2020.09.08 0 70

给网页增加WOW插件滚动触发css动效

随着浏览器的兼容性增强,css3动画特效运用也越来越广,通过css3动画库加js可以实现很多炫酷的效果。比如在滚动页面时会触发展示各式各样的动画效果,通过设置调整可以改变动画的风格、延迟、偏移量等。优...

WEB前端 2018.07.04 0 3666

发布评论

ainiaobaibaibaibaobaobeishangbishibizuichiguachijingchongjingdahaqiandaliandangaodw_dogedw_erhadw_miaodw_tuzidw_xiongmaodw_zhutouganbeigeiliguiguolaiguzhanghahahahashoushihaixiuhanheixianhenghorse2huaixiaohuatonghuaxinhufenjiayoujiyankeaikeliankouzhaokukuloukunkuxiaolandelinileimuliwulxhainiolxhlikelxhqiuguanzhulxhtouxiaolxhwahahalxhzanningwennonuokpinganqianqiaoqinqinquantouruoshayanshengbingshiwangshuaishuijiaosikaostar0star2star3taikaixintanshoutianpingtouxiaotuwabiweifengweiquweiwuweixiaowenhaowoshouwuxiangjixianhuaxiaoerbuyuxiaokuxiaoxinxinxinxinsuixixixuyeyinxianyinyueyouhenghengyuebingyueliangyunzanzhajizhongguozanzhoumazhuakuangzuohenghengzuoyi

感谢您的支持