HTML5 Canvas圣诞节雪人球动画

493 人浏览

2018-12-27 11:52:53

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

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

935 人浏览

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

在线演示源码下载

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

871 人浏览

发表回复

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

在线演示源码下载

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

1,095 人浏览

发表回复

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

在线演示源码下载

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

821 人浏览

发表回复

2018-12-25 14:09:12

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

在线演示源码下载

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

1,004 人浏览

发表回复

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

在线演示源码下载

HTML5/CSS3 3D魔方动画

1,538 人浏览

发表回复

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

在线演示源码下载

jQuery事件循环滚动的时间轴插件

1,295 人浏览

发表回复

2018-12-23 10:31:42

今天给大家分享一款基于jQuery的时间轴插件，它的功能就像是扩展版的jQuery焦点图那样，不仅可以像时间轴那样沿着轴向前翻滚，而且可以点击按钮向前或者向后翻滚，这有点类似传统的焦点图插件，并且这些在时间轴上的事件可以循环滚动。

在线演示源码下载

纯CSS自适应响应式Table数据表格

2,346 人浏览

发表回复

2018-12-22 17:17:20

今天给大家分享一个用纯HTML和CSS实现的table表格，非常实用。首先，表格的头部采用了隔列换色的形式，表格的行也采用斑马式的交替颜色，这些都是通过CSS定义的，因此表格的外观看起来还不错。其次表格是自适应响应式的，当页面缩小到一定范围时，表头将以行的形式固定，数据可以水平拖动。整体来说，这个自定义表格用起来还是很不错的，你也可以定义自己喜欢的颜色风格。