WEB前端

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

今天给大家分享一款很不错的CSS3文字动画特效，它主要给用户在选择下拉框时呈现一种比较魔幻可怕的动画场景。这个动画使用了Splitting.js将单词拆分成一个个字母，然后通过CSS给字符添加背景图片，然文本拥有背景渲染的视觉效果。同时当我们下拉选项时，下拉框中的文本将会出现闪烁...

阅读(208)赞 (3)标签：Splitting.js / 文字特效

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

今天给大家分享一个相当实用的React插件，我们可以利用这个插件制作一个3D视觉效果的CSS3层叠卡片切换动画，切换的内容可以是tab内容页，也可以是图片。这个插件允许我们将轮播的内容卡片分别排列在两侧，当前激活的内容则高亮居中显示，被隐藏起来的卡片大小逐渐变小，有一种3D立体的...

阅读(263)赞 (3)标签：3D / React

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

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

阅读(135)赞 (2)标签：Checkbox / SVG

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

这是一个非常实用的颜色编辑拾取工具，它基于vue框架实现，可以很好的生成CSS3中常用的渐变色代码。我们在CSS3代码中经常会用到一些颜色渐变的特效，但是大部分人都对颜色代码值非常不敏感，尤其是渐变色的颜色值。这款vue圆形CSS3渐变色拾取器用一种可视化的方式帮助开发者生成渐变...

阅读(591)赞 (11)标签：Vue.js / 渐变色

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

今天给大家带来一款基于HTML5 Canvas的刻度尺动画，我们可以通过在屏幕上滑动刻度尺来改变刻度值，你也可以通过设置初始值来决定是否在移动刻度尺时显示当前刻度值。这款插件还有一个特点是可以通过配置来设置刻度尺的多种主题样式。 在线演示 源码下载

阅读(489)赞 (7)标签：HTML5 Canvas / 刻度尺

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

今天给大家带来一款基于vue.js的任务列表插件，也就是我们常说的todo list。我们可以在输入框中输入任务名称，点击“add”按钮后就可以将任务添加到任务列表，并且通过点击任务名称改变任务完成状态。同时你也可以删除任务。你还可以按照任务状态进行筛选，方便查询和统计。这个vu...

阅读(400)赞 (6)标签：Vue.js / 本地存储

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

今天给大家带来一款基于VueJS的流程图插件，我们可以用这个插件来定义一些对象的生命周期、项目工作的流程等等，非常方便。这个实例中，我们用这个插件定义了一个vue对象的生命周期，这也可以让你大致了解vue框架的工作过程。每一个流程节点也都可以定义前后节点之间的事件触发规则，同时也...

阅读(720)赞 (6)标签：Vue.js / 流程图

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

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

阅读(521)赞 (8)标签：SVG / Tab菜单

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

今天给大家带来一款基于HTML5的圣诞礼物大炮发射动画，这个动画主要是构造了一个3D的卧室场景，我们通过点击鼠标让一门大炮可以源源不断地发射各种各样的圣诞礼物，并且伴随大炮发射的声音，显得非常逼真有趣。这个HTML5动画主要算法是一些物体的碰撞检测，以及物体碰撞时的运动方向计算，...

阅读(634)赞 (15)标签：HTML5动画 / Three.js

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

今天给大家带来一款基于VueJS的3D Tab菜单，它跟我们之前分享的许多CSS3 Tab菜单不同的是，它可以随着鼠标移动呈现出3D立体的视觉效果，每个tab页面还可以通过CSS自定义封面照片。它的核心是基于vue和bootstrap实现，因此扩展起来非常方便，你可以任意添加或者...

阅读(437)赞 (7)标签：Tab菜单 / Vue.js

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

这是一个基于vue.js的折线图表插件，它拥有折线图应该有的全部功能，包括数据更新、数据分组统计以及图表自适应等功能，使用起来十分方便。在插件使用方面，我们只需要在配置选项中设置x轴和y轴的数据范围定义，以及各自的单位。然后再定义每组数据，vue会帮你完成后续的图表生成，以及生成...

阅读(373)赞 (7)标签：Vue.js / 图表插件

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

之前我们介绍过基于HTML5的中国象棋和五子棋，它们都可以实现人机对战，而且“机器智商”都还算可以。这次我们要给大家带来一个基于HTML5的国际象棋，它也提供人机对战，不过智商相对较低，我们称它为“Cheap AI”，像我一个国际象棋初级入门的人都可以轻轻松松赢得比赛。如果你对人...

阅读(474)赞 (7)标签：HTML5游戏 / 国际象棋

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

这是一款基于Tailwind CSS3的后台管理系统菜单，提供3组漂亮的风格主题，非常适合为网站或者App的后台系统提供主菜单导航。这款CSS菜单结构是垂直的，提供“仅图标”和“图标文本”两种模式，所以我们可以为菜单设计一个响应式的方案，选择性地使用菜单显示模式。菜单的3组风格主...

阅读(444)赞 (9)标签：CSS3菜单

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

今天给大家分享一款基于React.js的相册画廊，它同时也是一个不错的焦点图播放动画插件。这款焦点图插件的特点是图片以淡入淡出和扭曲的动画方式切换，虽然并没有华丽的动画效果，但是简单明了，又不乏创意，非常不错。另外一个特点是，这款焦点图可以适应不同的屏幕尺寸，在手机上也同样可以有...

阅读(340)赞 (7)标签：React.js

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

这是一个使用纯CSS实现的垂直手风琴菜单，菜单一共两种模式，一种是可以同时打开多个菜单项，另一种是只能同时打开一个菜单项。而且，简单的CSS样式，不仅实现简单，而且样式扩展起来也比较灵活。你可以给菜单面板添加背景，也可以给菜单项添加小图标，提升整个手风琴菜单的美观度。 在线演示 ...

阅读(363)赞 (7)标签：CSS3菜单 / 手风琴菜单

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

今天要给大家分享一个非常炫酷的HTML5 3D樱花飘落动画，基于WebGL技术。每一片樱花落叶都是在canvas上绘制而成，而且樱花叶片也会随着不同的角度发出不同的色泽光芒，总体呈现出3D立体的视觉效果。整个樱花飘落动画非常大气，如花雨一般，让人倍感震撼。另外，整个动画还可以通过...

阅读(506)赞 (10)标签：HTML5动画 / WebGL

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

今天要给大家分享一个基于HTML5的3D地球仪动画，地球仪不仅可以自动自西向东旋转，而且还可以旋转到指定经纬度坐标。另外，还有一个控制面板，可以控制地球是否自转、光晕是否显示，以及地理缩放。你也可以通过拖拽鼠标来改变地球仪的视角，可以将它移至南北极的视角，也可以移至赤道的视角，非...

阅读(661)赞 (10)标签：3D动画 / HTML5 / 地球仪

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

今天给大家分享一组还不错的CSS3鼠标滑过按钮动画，一共有5种不同的动画效果。当我们将鼠标滑过按钮时，就分别会出现外框线条的渐变、外框的嵌入阴影以及发光背景的动画特效，按钮看起来十分清新简单，但是却都很大方，而且都只使用了<a>超链接和CSS代码实现，因此使用和扩展都非常简...

阅读(349)赞 (9)标签：CSS3按钮

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

今天给大家带来一款比较简单清新的JavaScript动画折线图，折线图的数据区域带有阴影效果，因此整个图表看起来有着一点3D立体的视觉效果。另外，这个JS折线图并没有采用第三方的图表插件，这也各有利弊，好处在于不受庞大框架的束缚，修改灵活，但缺点也在于开发者如果想要其他类型的图表...

阅读(398)赞 (7)标签：3D立体 / Javascript / 图表插件

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

今天要给大家带来一款简单实用的无限级垂直手风琴菜单，它的特点是菜单项支持无限级展开，同时还在菜单底部设计了分享按钮，整体比较协调。这款手风琴菜单是由纯CSS3实现而成，因此无论是完善还是使用，都比其他菜单插件简单，非常适合在小型的后台管理系统中使用。 在线演示 源码下载

阅读(369)赞 (6)标签：CSS3 / 手风琴菜单