标签:SVG

WEB前端

SVG带小图标的Checkbox美化插件

1

爱前端网 - Yang 发布于 2022-03-27

今天要给大家分享一款非常实用的checkbox复选框美化插件,这款复选框带有自定义小图标,小图标的绘制是通过SVG实现的,因此理论上你可以定义任意的图标。这款SVG复选框插件的另一个特点是,当图标没有选中时,复选框是隐藏的,鼠标滑过图标时,显示复选框,选中图片时,复选框悬浮在图标...

阅读(1639)赞 (3)

WEB前端

SVG超酷动画Tab菜单栏

1

爱前端网 - Yang 发布于 2021-11-09

这是一款基于SVG和CSS3的动画Tab菜单插件,菜单图标使用SVG绘制而成,菜单切换时还会产生不错的动画效果。菜单项小图标使用svg的好处,不仅在于灵活绘制,更方便制作菜单项切换时图标的动画特效。另外,Tab菜单项切换时,还同时会渐变地更新页面的背景颜色,当然如果你觉得太花里胡...

阅读(1958)赞 (8)

WEB前端

基于 D3.js 的 SVG化学元素周期表动画

1

爱前端网 - Yang 发布于 2021-11-09

这是一个使用SVG和基于D3.js脚本库实现的化学元素周期表动画,这张表中列出了所有的化学元素简称及其分子量大小,并按分子量大小和元素类型排序。这张元素周期表和你在中学化学学到的相比,元素列的更为全面,并且他的特点是按照元素的状态,使用不同的颜色或者动画区分出来,比如气态元素会有...

阅读(1302)赞 (1)

WEB前端

SVG路径遮罩实现图片颜色任意替换

1

爱前端网 - Yang 发布于 2021-11-09

我们知道Svg可以构造任意的路径,绘制出任意的平面图形甚至是类3D的图形画面。今天我们要介绍的就是一款利用SVG路径遮罩实现图片颜色的任意替换功能。这里我们以沙发图片为例,我们可以任意更改沙发的颜色及其背景颜色。原理是利用SVG绘制沙发的路径结构,然后用选择的颜色填充路径即可。如...

阅读(1084)赞 (1)

WEB前端

CSS3和SVG实现的水中映月的动画效果

1

爱前端网 - Yang 发布于 2019-08-09

今天给大家分享一个宁静而又温馨的CSS3动画,是一个水中映月的场景,用CSS3和SVG实现。首先我们用CSS3在页面上画一个圆月,以及圆月周围的月晕,然后用SVG动画模拟水波,这样一轮圆月就倒映在水波荡漾的水面上了,个人以为还是挺逼真的。 在线演示 源码下载

阅读(3036)赞 (13)

WEB前端

HTML5/SVG图片切换马赛克过渡动画

1

爱前端网 - Yang 发布于 2019-08-09

早些时候我们给大家分享过一款基于HTML5 Canvas的图片马赛克模糊效果,并且文章中对其实现原理进行了简单解说。今天我们要介绍的也是关于图片马赛克效果的,它是一个基于HTML5和SVG的图片切换马赛克过渡动画,与普通的淡入淡出切换效果不同,它在图片切换时渲染马赛克的滤镜效果,...

阅读(2483)赞 (3)

WEB前端

CSS3和SVG实现的圆环菜单动画

1

爱前端网 - Yang 发布于 2019-08-09

网页菜单的样式真实多种多样,特别是HTML5和CSS3的流行,让网页菜单的外观更加丰富多彩了。今天我们要给大家分享一个基于CSS3和SVG的圆环形状的菜单,在圆环上一共有7个节点,表示菜单项,当鼠标滑过或者点击其中一个节点时,就会弹出文字菜单项,圆环形状和节点都是采用SVG绘制而...

阅读(2418)赞 (2)

WEB前端

CSS3 SVG实现带表情的投票打分插件

1

爱前端网 - Yang 发布于 2019-08-09

记得很早的时候给大家分享过一些简单实用的投票插件,大部分都是基于jQuery的,比如这款jQuery评论打分插件 支持多种打分按钮。今天要介绍的这款投票打分插件是基于CSS3和SVG的,它的特点是对于不同的评级会有不同的表情,比如1星是失落的表情,5分是帅酷的表情。 在线演示 源...

阅读(2019)赞 (1)

WEB前端

程序猿必备的10款web前端动画插件十五

10

爱前端网 - Yang 发布于 2018-12-18

1.基于jQuery的瀑布流图片筛选插件 瀑布流的展现方式在目前的网页中用得越来越广泛,特别是图片和首页文章的动态加载。今天分享的这款就是基于jQuery的瀑布流图片筛选插件,我们可以点击图片分类名称,即可将对应分类下的图片以瀑布流的方式展示出来,这款插件在筛选图片上使用还是比较...

阅读(4524)赞 (11)

WEB前端

程序猿必备的10款web前端动画插件十四

10

爱前端网 - Yang 发布于 2018-11-14

1.CSS3 3D倾斜视差图片特效 CSS3有一些属性能够实现3D的视觉效果,将这些3D特性应用到图片上时就可以让图片呈现出立体的效果。今天给大家带来的这款基于CSS3的3D倾斜视差图片特效非常不错,图片上方悬浮文字标题,并且在图片周围添加合适的投影,同时会随着鼠标的移动形成3D...

阅读(4646)赞 (11)

WEB前端

程序猿必备的9款web前端动画插件十二

9

爱前端网 - Yang 发布于 2018-04-16

1.jQuery大屏图文切换时间轴 可循环播放 今天要给大家带来一款比较特别的jQuery图片切换播放器,它的特点在于切换的不仅仅是图片,而是图文,另外每一幅图文关联时间轴上的一个节点,时间轴跟随图文切换而移动。同时,这款图文时间轴播放器还可以无缝循环播放。如果你的网站上需要介绍...

阅读(6136)赞 (18)

WEB前端

程序猿必备的9款web前端动画插件十一

9

爱前端网 - Yang 发布于 2018-03-13

1.HTML Canvas火焰画笔动画 之前我们为大家分享过很多关于火焰的HTML5动画,像这个HTML5 Canvas火焰文字动画特效和这个HTML5动感的火焰燃烧动画特效就非常炫酷。这次我们要介绍的这款基于HTML5 Canvas火焰动画非常特别,它是带火焰动画的画笔,画笔笔...

阅读(5627)赞 (15)

WEB前端

程序猿必备的14款web前端动画插件十

14

爱前端网 - Yang 发布于 2018-02-08

1.SVG选项切换开关按钮 可提供3个选项切换 这是一款比较特别的开关切换按钮,与之前分享的很多CSS3开关切换按钮不同,这款是基于SVG和HTML5的,它的最大特点在于可以提供3个选项切换动画,不像前面的这款漂亮的纯CSS3开关切换按钮动画那样虽然外观漂亮,但只能提供“是”或者...

阅读(5503)赞 (13)

WEB前端

程序猿必备的8款web前端动画插件九

8

爱前端网 - Yang 发布于 2018-01-25

1.HTML5/CSS3实现四季更替过渡动画 采用HTML5和CSS3技术我们可以实现很多色彩变幻和情景过渡动画效果,之前分享的这款HTML5 SVG天气预报动画卡片就是一个很不错的例子。这次我们带来的是一款基于HTML5和CSS3的四季更替过渡动画特效,一副简单的森林景象伴随着...

阅读(5024)赞 (2425)

WEB前端

程序猿必备的12款web前端动画插件八

12

爱前端网 - Yang 发布于 2018-01-14

1.一组精美的SVG自定义单选框按钮美化插件 之前我们介绍过很多利用CSS3渲染的自定义美化单选框和复选框,比如这款jQuery超级个性化的单线框和复选框就非常不错。这次我们要分享的是一组基于SVG的自定义单选框按钮美化插件,它非常适合做一些精美的评分插件。 在线演示 源码下载 ...

阅读(4702)赞 (9)

WEB前端

15个超强悍的CSS3圆盘时钟动画赏析

15

爱前端网 - Yang 发布于 2018-01-08

在网页上,特别是个人博客中经常会用到时钟插件,一款个性化的时钟插件不仅可以让页面显得美观,而且可以让访客看到当前的日期和时间。今天我们给大家收集了15个超强悍的圆盘时钟动画,很多都是基于CSS3,也有一部分利用jQuery和SVG,让我们一起来看看吧。 1、纯CSS3/SVG实现...

阅读(4526)赞 (10)

WEB前端

程序猿必备的10款web前端动画插件六

10

爱前端网 - Yang 发布于 2017-12-25

1.SVG/HTML5超富创意的环形颜色拾取器 记得很早以前我们分享过一款功能很强大的jQuery颜色选取插件 支持透明度选择,确实很不错。今天我们要介绍另外一款基于SVG和HTML5的环形颜色拾取器,非常具有创意。20种颜色组成一个圆环,每一种颜色都有相近的5种颜色可以选取,唯...

阅读(3872)赞 (11)

WEB前端

程序猿必备的10款web前端动画插件五

10

爱前端网 - Yang 发布于 2017-12-19

1.CSS3 Material 设计样式的按钮 带点击波纹特效 今天我们要给大家带来一组很漂亮的CSS3按钮,按钮的整体风格采用Material设计样式,非常简洁和清新。在这组CSS3按钮中,样式各种各样,有圆形按钮,也有带小图标的按钮,当然颜色也有很多。另外这组按钮还有一个特点...

阅读(3772)赞 (11)

WEB前端

程序猿必备的10款web前端动画插件三

10

爱前端网 - Yang 发布于 2017-12-09

1.一些想法预览或只是在悬停的文件夹上播放 这个想法是在悬停文件夹图标时显示一些动画,并显示某种内容的预览。我们想与你分享一些有趣的小悬停效果。这个想法是显示文件夹的预览动画。动画旨在作为一个有趣的微观互动,给用户一些暗示内部文件夹内的暗示。 在线演示 源码下载 2.观看者似乎穿...

阅读(4108)赞 (7)