WEB前端 第2页

基于Vue.js的迷你音乐播放器

1

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

这次我给大家带来一个十分不错的音乐播放器,它基于Vue.js,外观十分迷你,可以在手机等移动设备上使用。这个基于vue的音乐播放器的特点是,可以自定义一个播放列表,可以给每一首歌曲指定一个封面图片和分享链接,这让整个播放器看起来非常专业。另外,播放器还支持暂停/播放功能,也支持任...

阅读(82)赞 (1)

16个超酷的CSS3动画按钮

1

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

今天要给大家分享一组十分美妙的CSS3动画按钮集合,一共16个动画按钮,这16个按钮都会在鼠标滑过时生成不同的动画特效,有3D阴影、外框变幻、3D翻转、发光发亮等等。这些按钮最终的实现都是通过CSS3动画属性来完成的,CSS3动画本身并没有太复杂的属性样式,更多的是可以激发设计者...

阅读(105)赞 (1)

纯CSS3 3D乒乓球比赛动画

1

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

这是一个使用CSS3实现的3D乒乓球比赛动画,场面效果令人震撼,最关键的是,这个动画并没有使用一行JS代码,而是全部用HTML和CSS实现。画面中的乒乓球桌、球拍以及乒乓球都是通过CSS3绘制而成,包括球桌的阴影和乒乓球运动时的投影,3D效果表现得非常逼真。唯一不足的是,没有将比...

阅读(87)赞 (1)

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

1

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

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

阅读(75)赞 (1)

可切换的精美CSS3登录注册表单

1

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

这是一个比较实用的CSS3登录注册表单插件,它可以允许用户在同一页完成注册或者登录操作,只要点击登录或者注册按钮即可以快速切换到相应的页面。另外这款CSS3登录注册表单背景非常特别,表单内部的背景和网页整体的背景,在功能切换时显得非常贴切,而且还有3D立体的视觉效果。大家可以修改...

阅读(91)赞 (1)

HTML5 3D 陨石火球动画

1

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

今天要分享的又是一个基于HTML5 Canvas的炫酷动画,这是一个3D的陨石火球动画。从外观上看,这就像一颗正在坠落的陨石火球,还拖着一条长长的火焰尾巴。同时,我们可以通过拖拽鼠标从不同的视角来看这颗火球,并且可以通过鼠标滚轮来放大缩小火球,这便让人产生了不错的3D视觉效果。另...

阅读(115)赞 (1)

一套精美的 CSS3 新拟物风格 UI 元素

1

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

这是一套基于CSS3和HTML5的新拟物风格UI设计元素,大部分以表单元素为主,例如单选/复选框、按钮、Tab菜单、搜索框,另外还有时钟等。什么是新拟物化?它是一种在扁平的基础上呈现真实物体质感的设计风格。目前这种风格在网页上不多用,但在App上却已经广泛使用,特别是从2020年...

阅读(83)赞 (1)

纯 CSS3 模拟开关单选框动画按钮

1

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

这是一个具有创意的开关单选框按钮,是通过纯CSS3实现的,我们可以利用它美化网页上的单选框元素。当开关打开时,开关按钮的背景会呈现发光的动画特效,开关关闭时则停止发光,这就很好地给用户提示了当前按钮的状态。这个按钮无论从外观还是动画特效,都是用CSS3实现,因此在网页中大范围的应...

阅读(84)赞 (1)

纯 CSS3 电风扇动画 可调节转速

1

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

这又是一个用纯CSS3实现的模拟现实物品的动画特效,它是一个可以调节转速的电动风扇,电风扇动画分两部分,一部分是扇叶转动,另一部分是风扇水平摇头,跟现实中的台扇十分相似。另外,我们还可以通过按钮来调节转速,一共分为三档。同时还有一个开关按钮,和我们生活中的风扇控制方式基本一致。而...

阅读(79)赞 (1)

纯 CSS3 3D 卡片翻转动画

1

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

今天分享的是一个基于纯CSS3的价格表卡片翻转动画,点击切换按钮时,卡片就会以翻转的动画效果进行切换,同时卡片上的装饰物也会以淡入淡出和飞入飞出的动画进行切换。这款卡片切换动画呈现的3D效果是通过纯CSS3实现的,整体看上去清新自然,也十分美观,如果你的网站或者App上需要类似的...

阅读(94)赞 (2)

基于 TweenMax.js 的图片碎裂切换动画

1

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

这次要分享的是一个基于TweenMax动画库的图片碎裂切换动画,当我们点击图片时,图片就会像玻璃那样碎裂成许多块,然后渐渐地消失,直到下一张图片显示为止。TweenMax是高性能JavaScript动画框架,利用它我们可以轻松实现很多炫酷的网页动画效果。这款图片碎裂动画也可以应用...

阅读(81)赞 (1)

纯 CSS3 3D 卧室动画

1

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

这是一个用纯CSS3实现的3D卧室,卧室中家具齐全,有床、衣柜、书架,还有沙发等等。这些卧室中的元素都是通过CSS绘制而成的,并不是图片。另外,我们还可以通过鼠标移动来和卧室中的元素进行交互,比如将鼠标滑过书架中的书本时,书本会自动弹出,移开鼠标后又会自动藏在书架中。同样,衣柜的...

阅读(76)赞 (1)

HTML5 Canvas人群流动模拟动画

1

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

这是一个基于HTML5 Canvas的动画特效,这个动画主要是模拟了大街上人群流动、熙熙攘攘的景象。首先每一个人物都是在Canvas上绘制而成,大街上男女老少都有,十分逼真。同时,为了让动画更加真实,每个人物的行走速度、行走动作都有一定的差异,这让整个HTML5动画显得更为真实,...

阅读(77)赞 (1)

CSS3 3D飞机飞行动画

1

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

这是一个很酷的CSS3 3D飞机飞行动画,首先飞机模型、天空白云都是通过纯CSS3绘制的,鼠标可以控制飞机飞行的方向。另外鼠标点击天空时,还可以切换白天和黑夜,飞机在黑夜中飞行时会自动点亮机翼上的警示灯并且不断闪烁。更为炫酷的是,飞机还会时不时的做翻滚动作,不论是上下翻滚还是侧面...

阅读(70)赞 (1)

HTML5 Canvas 照片撕裂切换动画

1

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

这是一个很有意思的HTML5 Canvas图片切换动画,我们可以用鼠标或者手指在屏幕上滑动,将照片撕成两半,然后再切换成另外一张新的照片。这个特效不足的地方在于,所有照片的撕裂裂纹都是一样的,这可能会显得不是那么逼真。如果你有一个相册应用,个人认为可以将这个效果添加到你的相册照片...

阅读(77)赞 (1)

HTML5 3D 视差相册画廊

1

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

这是一个基于HTML5和CSS3的3D视差相册画廊,画廊中的图片围成一个圆环,拖拽鼠标可以让图片在环形画廊中滚动切换,并且将鼠标滑过图片时,图片也会产生高亮效果,形成一种3D的视差效果。另外,我们可以在次基础上稍微扩展一下,有兴趣的同学可以自己改造一下,就是鼠标点击图片时,可以展...

阅读(130)赞 (1)

HTML5 3D无限循环图片流

1

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

这是一款基于HTML5的3D无限循环图片流,它模拟了以前Mac Dock菜单栏的设计方式,每一张图片都有倒影,因此给人一种3D立体的视觉效果。另外,我们不仅可以通过鼠标拖拽来滚动切换图片,而且可以通过鼠标滚轮来切换。拖拽可以控制滚动的速度,而且这个图片流是可以无限循环的,不管有多...

阅读(85)赞 (1)

HTML5 3D 神秘游戏场景动画

1

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

今天分享的是一个基于Three.js的HTML5 3D动画,这个动画模拟了游戏中的一个炫酷的3D场景,支持360度视角查看,也支持鼠标滚轮进行缩放。画面中主要展现了一个游戏中传送门的效果,同时还有路两边的围栏、灯笼、石头,以及星光闪闪的萤火虫,整个画面显得十分神秘。不得不说,th...

阅读(92)赞 (2)

HTML5 无限循环滚动图片流

1

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

今天给大家带来一款很实用的HTML5图片播放插件,与一般的焦点图播放形式不同,这款插件是略微带有3D效果的横向无限循环滚动图片流。我们可以通过拖动滚动条、滚动鼠标滚轮、以及点击上一张下一张按钮来滚动图片,其特点是当前图片会放大高亮显示在屏幕中央,其余图片则缩小后在显示在两侧,同时...

阅读(93)赞 (2)

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

1

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

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

阅读(66)赞 (1)