1.超简易的SVG/CSS3 Loading加载动画图标
今天我们要为大家分享一组非常简易的SVG/CSS3 Loading加载动画图标,和之前分享的SVG实现的一组超华丽Loading加载动画相比,这组Loading动画更见简单,它主要由圆环形和柱形两种样式组成,可以将这些Loading图标应用在很多种类型的页面中,非常实用。
文章图片
2.jQuery左右切换焦点图插件 3D阴影相框
这是一款相对比较简单而实用的jQuery焦点图应用,它的特点是左右切换按钮悬浮在图片右下角,点击切换按钮即可让图片进行左右平移地切换,效果着实是简单,但是个人觉得很实用。另外还有一个特点是,这款jQuery焦点图插件带有3D阴影的相框,从而简单中稍带一点点华丽。
文章图片
3.jQuery层叠图片细节对比插件
之前我们分享过几款比较实用的图片对比插件,比如这款JavaScript图片拖动对比 实现图片差异定位就非常强大,可以左右滑动。今天我们要介绍的这款jQuery层叠图片细节对比插件功能也比较实用,可以通过鼠标滑动图片上方的滑杆来对比两张图片的细节。
文章图片
4.jQuery自定义美化Select下拉框插件
之前我们分享过很多款非常漂亮而且实用的jQuery美化版Select下拉框插件,比如jQuery Select下拉框美化插件 菜单淡如淡出动画和漂亮实用的Select下拉框美化插件Tether都非常不错。今天我们要给大家介绍另一款基于jQuery的自定义美化Select下拉框插件,它的配置十分简单,引用插件库后用几行jQuery代码初始化即可。
文章图片
5.纯CSS3实现的蒙娜丽莎画像
蒙娜丽莎画像非常著名,如果告诉你这幅画像我们可以使用纯CSS3绘制而成,你是否会觉得非常惊讶。没错,今天我们要分享的就是这个使用纯CSS3,没有使用任何图片的蒙娜丽莎画像,实现原理是利用CSS3的阴影特性,逐层用不同的颜色渲染,从而形成这幅蒙娜丽莎巨作,当然有点模糊是肯定的,毕竟是通过投影渲染的,是不是觉得非常神奇。
文章图片
6.CSS3社交关系网模拟动画
这次我们要给大家分享一款CSS3模拟社交关系网的动画特效,社交网的中心是用户的头像图片,由中心连线展开到各个社交网络的Logo图片,同时每一条连接线上面都会有一个圆点由中心向各个节点移动,形成关系网的模拟动画,利用CSS3,我们可以让点运动,也可以让图片变成圆形,还是比较有趣的。
文章图片
7.CSS3自定义菜单内容的二级下拉菜单
之前我们分享过很多基于jQuery和CSS3的二级下拉菜单,大部分都非常实用,当然也不乏炫酷的动画,比如这款HTML5/CSS3水平二级下拉菜单就比较朴实,这款jQuery/CSS3波浪形弹性下拉菜单就比较富有个性。今天我们要分享的这款CSS3下拉菜单特点在于二级下拉菜单内容可以自定义,可以是简单的多列,也可以是复杂的图文排版。
文章图片
8.HTML5 多维度3D图片切换动画
今天我们要给大家分享一款非常特别的HTML5/CSS3焦点图插件,这款焦点图插件可以实现XY两个维度的图片切换动画,并且图片在排列时有一种3D立体的视觉效果,这样的效果正是使用了CSS3特殊属性改变了图片4条边的倾斜角度。
文章图片
9.纯CSS3乒乓球动画
这是一个比较有意思的纯CSS3乒乓球动画特效,主要是模拟了乒乓球运动动画,画面上用CSS3绘制了一张乒乓球桌,一个乒乓球在球桌上来回运动,就好象两个运动员在打乒乓球一样。当然如果你可以在球桌两端绘制两个运动员那就更加逼真的,有兴趣的同学可以自己研究一下。
【html|html avi 视频插件,程序猿必备的15款web前端动画插件七】
文章图片
10.移动端可拖拽jQuery图片切换插件 带Tooltip缩略图
这是一款很特别的jQuery焦点图插件,它和其他的图片切换插件不同,它主要在移动设备上使用,因此我们并不能像其他焦点图插件那样点击切换按钮来切换图片,而是通过滑动带Tooltip外观的缩略图来切换图片,并且图片显示时采用中心放大扩散的动画特效,效果还是不错。
文章图片
11.CSS3带数字时钟的创意圆盘时钟动画
前几天我们刚刚为大家分享过一款基于SVG和CSS3的复古圆盘时钟,大家可以在这里查看演示和这里下载源码。今天又要给大家带来另外一款CSS3圆盘时钟,它的特点是圆盘对半分,一半显示数字时钟信息,另一半是半个圆盘时钟,样式设计上非常富有创意。
文章图片
12.精美的jQuery视差效果图片轮播插件
今天让我们给大家分享一款基于jQuery的视差效果的图片轮播插件,它与一般的jQuery焦点图插件相比,并不是图片之间的切换,而是各种网页元素悬浮在一张大背景图上,切换时背景逐渐移动,另外背景上的元素也会跟着切换,与之类似的还有一款jQuery视差效果的焦点图插件。
文章图片
13.CSS3鼠标滑过图片覆盖渐变颜色蒙版
今天我们要介绍一款比较实用的CSS3图片特效,它并没有非常华丽的动画效果,但是很多场合都可以用到。当我们将鼠标滑过图片时,图片上方会覆盖一层渐变颜色的蒙版,移开图片蒙版又会以渐变的方式消失,同时这层蒙版由于颜色动态渐变,因此给人一种发光的视觉效果。
文章图片
14.纯CSS3可爱笑脸开关切换按钮
近期我们集中为大家分享过很多基于HTML5和CSS3的开关切换按钮,像这款多组超具创意的CSS3开关切换按钮拥有多套风格的外观,还有这款漂亮的CSS3/SVG个性化开关按钮又非常具有创意。今天要分享的这款同样也富有创意,整个开关按钮由笑脸和哭脸组成,点击按钮后可以在笑脸哭脸之间切换,另外按钮带有阴影,看起来有3D立体的视觉效果。
文章图片
15.纯CSS3/SVG实现的带秒针表盘圆盘复古时钟
现在的网页上圆盘时钟越来越少见了,更多的是数字时钟和数字日历。之前我们分享过一些基于jQuery和CSS3的圆盘时钟动画,比如纯CSS3 3D立体圆盘时钟动画和jQuery实现一个挂在墙上的圆盘时钟动画都非常不错。这次要给大家带来一款比较复古的圆盘时钟,基于纯CSS3,盘面是SVG绘制而成,并没有使用任何图片。时钟整体外观比较怀旧,给人不一样的视觉感受。
文章图片
推荐阅读
- 前端|contenteditable格式化html文本转svg
- 笔记|flex布局入门讲解
- CSS|30分钟学会html+css实现乒乓球快打特效(内附源码)
- css|记录使用@media的尴尬
- 前端|axios在vue中的使用
- java|基于 SpringBoot + Vue 的前后端分离的考试系统
- 前端|H5页面前端开发常见的兼容性问题解决方法
- 前端|idea如何运行Java Web项目(Servlet、JSP)
- Notes|html文字一行时靠右,多行时靠左