html5 svg和css3炫酷鼠标点击按钮特效怎么用

方法/步骤

HTML结构

该鼠标点击按钮特效中每一个可点击的元素都是一个<button>按钮

CSS样式

以下是该css3点击按钮特效的通用CSS样式：

插件中通过在点击按钮时使用javascript来为它添加相应的动画CLASS来执行动画效果：

上面的CSS代码可以生成如下图的动画效果：

在“Stana”效果中，使用了html5 SVG clipPath，在它上面添加了一个transition。这个效果只能在Chrome浏览器中才能看到效果。

在“Stoja”效果中使用了CSS clip-path属性，这个效果也需要浏览器的支持才能看得到的。

点击一个按钮要实现按F11全屏的效果。 在HTML5中,W3C制定了关于全屏的API，就可以实现全屏幕的效果

项目中需要将后台浏览器的窗口全屏，也就是我们点击一个按钮要实现按F11全屏的效果。

在HTML5中,W3C制定了关于全屏的API，就可以实现全屏幕的效果，也可以让页面中的图片，视频等全屏目前只有google chrome 15 +,

safri5.1+,firfox10+,IE11支持

用CSS代码设定按钮的圆角样式，这个在css3中才能实现，通过使用border-radius来实现这个效果，不过有浏览器的兼容性问题，-moz(例如-moz-border-radius)用于Firefox；-webkit(例如：-webkit-border-radius)用于Safari和Chrome；border-radius:5px15px20px25px它的意思就是上的圆角5px，右的圆角15px，下的圆角20px，左的圆角25px，通过例子来实际看下：#round{padding:10pxwidth:300pxheight:50pxborder:5pxsolid#dedede-moz-border-radius:15px/*Geckobrowsers*/-webkit-border-radius:15px/*Webkitbrowsers*/border-radius:15px/*W3Csyntax*/}

---