6种炫酷的CSS3按钮边框动画特效Button border animate 用鼠标滑过下面的按钮看看效果! Draw Draw Meet Center Spin Spin Circle Spin Thick     http://***/demo/201509/2015-09-23-six-button-border-animate/index.html…

插件介绍: jQuery-smoove是一款jQuery和CSS3炫酷滚动页面内容元素动画特效插件.该内容元素动画插件在页面滚动到指定位置时,该位置的HTML元素会执行指定的CSS3动画特效,如旋转.翻转.放大缩小等动画特效.使用Smoove页面滚动元素动画特效插件可以很轻松的制作出各种华丽的CSS3动画效果. 基本用法 $('.smoove').smoove(options); 上面的代码会在class为 smoove 的元素上使用默认参数初始化 jQuery Smoove. 你可以通过dat…

这是一组使用HTML5 SVG过滤器制作的炫酷液态水滴融合分解动画特效.这些SVG动画特效使一些HTML元素.如菜单.分页button.APP.选择框等元素的过渡动画像几粒水滴一样融合分解.效果很的酷. 通过SVG Filters能够改动一个给定的图形,创建我们须要的结果.SVG中包括了一组能够运行各种操作的filter元素. 最常见的SVG filter效果是通过feGaussianBlur来制作模糊效果. <svg xmlns="http://www.w3.org/2000/svg&q…

1.CSS3飘带状3D菜单 菜单带小图标 这次我们要来分享一款很特别的CSS3菜单,菜单的外观是飘带状的,并且每一个菜单项有一个精美的小图标,鼠标滑过菜单项时,菜单项就会向上凸起,像是飘带飘动一样,形成非常酷的3D视觉效果.这款CSS3飘带状3D菜单非常适合作一些活动页面的菜单导航. 在线演示 源码下载 2.HTML5/CSS3 3D纸片折叠动画 今天我们再来分享一款非常华丽的HTML5/CSS3 3D动画特效,尽管它目前很少能在项目中应用,但从源码中我们可以学到很多HTML5 3D动画的制作知…

简要教程 flipside是一款使用CSS3和js制作的炫酷点击按钮无缝过渡到确认面板的过渡动画特效.该点击按钮特效在按钮不同方向的边部点击时,产生的过渡动画特效是不一样的. 在线预览   源码下载 使用方法 使用该按钮过渡动画特效需要引入它提供的按钮样式表style.css和用于触发按钮点击事件的js文件script.js. HTML结构 该点击按钮过渡动画特效使用一个嵌套div的HTML结构: <div class="btn"> <div class="…

CSS Shake是一个使用CSS3实现的动画样式,使用SASS编写,利用它我们可以实现多种不同样式的抖动效果(如下面的GIF图像): 炫酷的CSS3抖动样式:CSS Shake 这是一个很微小的动画,但使用得当也是挺不错的,比如用在广告.图像.按钮上,这样可以用来吸引用户眼球从而促使去点击它. 这个Csshake有9个抖动样式,三个状态,如鼠标经过拉动.无限抖动.鼠标悬停拉动. CSS Shake 使用方法: 首先引入css shake的样式表文件.css3按钮:​http://www.hui…

原文:炫酷的CSS3发光搜索表单,附演示和源码 昨天在国外的论坛上逛的时候,看到一篇帖子是求助如何利用CSS3实现发光效果的,网友回复中有一个推荐了一款CSS3发光搜索表单,利用CSS3的动画属性,设置0%和100%时的颜色样式,让其渐变,再配合有明显对比的背景,就能模拟出发光的效果了,我把那个CSS3发光表单下载了下来,先来看一下效果图: 图上的搜索框在被激活的时候会出现闪闪发光的特效. 我们可以在这里查看CSS3发光搜索表单的DEMO演示. 下面我们来一起看看源代码. HTML代码非常简单,…

纯CSS3文字Loading动画特效是一款个性的loading文字加载动画. 在线演示本地下载…

这是一组效果非常炫酷的HTML5 SVG和CSS3表单浮动标签特效.这组浮动标签特效共12种效果,使用SVG和CSS3来制作完成.这些浮动标签效果部分在元素的伪元素上使用CSS transitions和CSS animations完成,一部分则使用SVG来制作变形动画. 在线预览   源码下载 HTML结构 这一组浮动标签特效最大的特点就是引入了SVG,使用SVG来制作各种图形变形动画,其中“SHOKO”的效果如下图所示: 这个效果的HTML结构如下: <span class="input…

现在HTML5技术可以让网页上的图片变得非常神奇,各种各样的HTML5图片动画特效让你眼花缭乱.今天要分享的这款HTML5图片网格动画特效就非常炫酷.图片缩略图按网格的布局一行行排列,你只需点击按钮即可让这些图片出现不可思议的动画效果,值得一看.效果图如下: 在线预览   源码下载 实现的代码: <div class="grid"> </div> <span class="animate">开始动画</span> &l…