CSS3自定义样式超链接按钮 鼠标滑过带动画特效

超链接和按钮在网页中是最为基本的元素了,我们可以通过设置CSS样式将链接外观做一些简单的调整,比如文本大小、颜色和下划线。今天我们分享的一个基于CSS3的自定义样式超链接按钮,并且鼠标滑过链接后带有各种各样的动画特效。

css3-hyperlink-animation

在线演示源码下载

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

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

webgl-svg-3d-plain

在线演示源码下载

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

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

css3-personalise-radiobox

在线演示源码下载

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

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

pure-css3-windmill

在线演示源码下载

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

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

css3-styled-dropdown-menu

在线演示源码下载

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

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

css3-visible-shadow

在线演示源码下载

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

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

flexbox-responsive-honeycomb

在线演示源码下载

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

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

jquery-color-picker-by-colors

在线演示源码下载

CSS3风速切换场景动画

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

css3-windy-switch

在线演示源码下载

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

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

threejs-impact-checking

在线演示源码下载