爱前端网爱前端网爱前端网

所有文章 第4页

WEB前端

HTML5/CSS3 3D魔方动画

1

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

我们分享过不少基于HTML5和CSS3的3D立方体动画,大部分可以对6个面自由旋转,可以从不同的视角看到立方体的情况。这次我们分享的也是一款基于HTML5和CSS3的立方体,不过准确地说它是一个魔方,这不仅仅是给立方体每个面涂上颜色那么简单,你真的可以转动魔方,同样你可以在空白地...

阅读(3283)赞 (21)

WEB前端

HTML5 Canvas 鼠标滑过3D动画背景

1

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

在网页中我们经常会设置元素的背景,简单点的设置背景颜色,复杂的就设置背景图片。今天给大家分享一个将HTML5 canvas动画作为网页背景的例子,将canvas置于文本底部,canvas上绘制很多3D图形,当我们将鼠标滑过背景时,canvas上的这些3D图形将会翻转,效果很酷。 ...

阅读(2921)赞 (14)

WEB前端

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

1

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

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

阅读(3050)赞 (13)

WEB前端

纯CSS3模拟企鹅走路动画 超级可爱

1

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

CSS3的出现让我们可以更加灵活地在网页上绘制一些图形,甚至是制作一些动画。这次我们要分享的是一款基于纯CSS3实现的企鹅走路模拟动画,企鹅的外观都是通过简单的HTML元素结合CSS绘制出来的,企鹅走路时的动画效果则是通过CSS3的动画属性实现的,非常可爱。类似的纯CSS3动物动...

阅读(2740)赞 (12)

WEB前端

纯CSS3绘制的任天堂Nintendo Switch游戏机

1

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

CSS3真的非常强大,有了它我们的网页不再像以前那样横平竖直那么单调了。之前刚刚分享过一个纯CSS3模拟企鹅走路动画,这次我们分享一个纯CSS3绘制的任天堂Nintendo Switch游戏机,通过CSS3绘制了游戏机的外观,尤其是通过CSS3的阴影属性将游戏机的边角描绘出3D立...

阅读(3763)赞 (13)

WEB前端

CSS3 3D视差人物画像 可跟随鼠标摇头斜眼

1

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

这次我们分享一个非常酷的CSS3动画。它是一个3D的视差人物画像,并且人物的头和眼睛可以跟随鼠标移动,如果在移动设备上的话,用手指移动屏幕也可以实现这个效果。更加厉害的是,这个人物画像在加载时是一幅素描画像,但是会逐渐变成油画的效果,你们可以研究一下这是如何实现的。 在线演示 源...

阅读(2297)赞 (9)

WEB前端

HTML5 Canvas圣诞节雪人球动画

1

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

记得很早以前给大家分享过一个基于纯CSS3的可爱雪人动画,同时还伴随着下雪动画。今天我们来分享一个基于HTML5 Canvas的圣诞节雪人球动画,我们将雪人绘制到一个球中,然后点击鼠标将球抖动一下,球里面就飘起了雪花,非常的浪漫。 在线演示 源码下载

阅读(2347)赞 (9)

WEB前端

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

1

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

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

阅读(2491)赞 (3)

WEB前端

CSS3可自动折叠的垂直手风琴菜单

1

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

我们分享过很多手风琴菜单,大部分是垂直的手风琴菜单,都非常实用,比如这个CSS3深色背景的垂直手风琴菜单。这次我们继续为大家带来一款基于CSS3的垂直手风琴菜单,除了和其他手风琴菜单那样可以自动折叠菜单项以外,它还有一个特点是折叠和展开时代有平滑的淡入淡出效果。 在线演示 源码下...

阅读(2285)赞 (2)

WEB前端

jQuery自定义样式下拉框 支持分组、多选和搜索

1

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

今天给大家分享一个非常实用的jQuery插件,它不仅可以让你自定义浏览器的select下拉框样式,而且支持下拉选项的分组、多选和搜索,同时你可以设置最多选择项的数量,如果数量超出了select预定义的宽度,会自动显示数量信息,隐藏具体选项的值。 在线演示 源码下载

阅读(2048)赞 (3)

WEB前端

基于VueJS的滑块组件 支持级联滑动和渐变色

1

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

我一直在玩VueJS,并想尝试一个实验,看看将这个基于jQuery UI的的滑块插件用VueJS实现是多么容易。对于这个插件,我并非将所有功能都翻译过来了,因为jQuery UI的滑块组件提供了许多额外的功能, 但这个基于Vue的滑块也比较接近基于jQuery UI的了,它支持多...

阅读(2319)赞 (1)

WEB前端

基于Three.js的碰撞检测穿马路动画

1

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

Three.js是JavaScript编写的WebGL第三方库,提供了非常多的3D显示功能。今天要给大家分享的就是一款基于Three.js的穿马路游戏动画,主要使用了Three.js的碰撞检测功能,马路上穿梭着很多车辆,你可以通过方向键控制小方块的行进方向,顺利通过马路,如果方块...

阅读(2079)赞 (4)

WEB前端

CSS3风速切换场景动画

1

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

今天给大家分享一个基于CSS3的风速切换场景动画,首先页面上的场景画面是通过CSS绘制而成,总体来说是一个刮风天气场景,风车会转动,树叶也会随风飘摇。此时你可以通过一个开关来切换风速,风速变化的同时,风车的转速和树叶飘动的幅度也会随之变化,反应一个真实的刮风天气,而这一切都是通过...

阅读(2170)赞 (2)

WEB前端

jQuery颜色选择插件 可通过色系选择

1

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

我们分享过一些jQuery颜色选择插件,比如这个jQuery实现的一个颜色选择器 实时输出RGB值就非常实用,再比如可自定义色块的JavaScript颜色选择器也相当不错。这次我们分享另外一个jQuery颜色选择插件,与前面几个相比,这个并不能算是颜色拾取,只能说是通过色系来选择...

阅读(1951)赞 (3)

WEB前端

基于Flexbox的响应式蜂巢样式布局

1

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

Flex布局方式目前使用非常广泛,它比传统的盒子模型相比更加灵活方便。这次我们给大家带来一个基于Flex布局的典型例子,它是一个基于Flexbox的响应式蜂巢样式布局,我们可以将图片放置到这个蜂巢样式的布局中,这样就可以制作一个富有创意的照片墙。 在线演示 源码下载

阅读(2366)赞 (3)

WEB前端

CSS3可调节并实时预览的阴影效果

1

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

在现代网页中,阴影效果是使用最为广泛的效果之一,同时实现起来也是最为方便的,一行CSS3代码即可。但是我们可能对CSS3阴影属性的值很难把控,你可能不是很清楚到底shadow值要设置多少才会达到你要的效果。今天这款应用就可以帮助你解决这个问题,通过滑杆滑动即可动态改变shadow...

阅读(1583)赞 (2)

WEB前端

样式独特的纯CSS3自定义下拉菜单

1

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

我们给大家分享过一个jQuery自定义样式下拉框 支持分组、多选和搜索,应该说还是挺实用的。这次我们要介绍的也是一个下拉菜单,基于CSS3实现,它的特点是主菜单有一层阴影,这样整个下拉菜单看起来就会有3D立体的视觉效果,是不是很棒? 在线演示 源码下载

阅读(1810)赞 (1)

WEB前端

纯CSS3超逼真的风车旋转动画

1

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

很早以前,我们给大家分享过一款基于HTML5和CSS3的风车动画,效果还是不错的。这次我们介绍的同样是一个基于CSS3的风车旋转动画,只不过这个风车的元素更丰富,更像是在一个美丽的村庄中,一个风车在日落的渲染下不停的旋转工作。 在线演示 源码下载

阅读(1958)赞 (3)

WEB前端

CSS3个性化自定义样式的Radiobox单选框

1

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

单选框Radiobox是网页表单中比较常用的元素,有时候为了统一网页风格,让页面变得更加协调,我们通常需要重写浏览器单选框的默认样式。今天我们要分享的是一款基于CSS3的个性化自定义样式Radiobox单选框,它不仅有着扁平化的样式外观,而且在选中项切换的时候伴随动画效果。 在线...

阅读(1773)赞 (2)

WEB前端

WebGL和Canvas可视化3D飞机模型结构 可360度预览

1

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

今天给大家分享一个基于HTML5 Canavs和WebGL的3D模型结构,它是一个可360度预览的可视化3D飞机模型结构。我们可以通过鼠标拖拽自定义不同的角度对飞机模型进行观察,也可以点击按钮对飞机的具体部位进行详细观察。同时,我们也可以通过鼠标滚轮来缩放飞机的大小。 在线演示 ...

阅读(2542)赞 (1)