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

8,318 人浏览

2018-12-30 13:52:19

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

在线演示源码下载

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

11,484 人浏览

发表回复

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

在线演示源码下载

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

7,822 人浏览

发表回复

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

在线演示源码下载

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

7,889 人浏览

发表回复

2018-12-29 20:15:42

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

在线演示源码下载

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

3,219 人浏览

发表回复

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

在线演示源码下载

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

4,573 人浏览

发表回复

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

在线演示源码下载

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

3,877 人浏览

发表回复

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

在线演示源码下载

CSS3风速切换场景动画

4,848 人浏览

发表回复

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

在线演示源码下载

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

9,208 人浏览

发表回复

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

在线演示源码下载

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

10,581 人浏览

发表回复

2018-12-28 14:52:08

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

在线演示源码下载