web-demo-css

对《Web开发实战》这本书中的css相关示例进行了完善和补充，欢迎大家购买这本书，支持作者！

《Web开发实战》

这是一本目前为止我看过的最棒的前端实战书籍，其中包含了很多非常实用的例子，同时作者对每一个示例都进行了详尽的解释

• 在线试看地址
• 购买地址
• 作者个人博客

其他示例

由于示例比较多，放在一个工程中打开的时候加载很慢，所以我将web-demo分成了多个repo，具体列表如下：

• web-demo-js
• web-demo-css
• web-demo-mobile
• web-demo-canvas
• web-demo-svg

目录

我在这里只会给出代码，并不会给出解释，如果想要了解其中的原理，欢迎购买原书电子版（才￥5，强烈推荐购买！而且如果不购买原书的话，下面的有些原文地址打开是看不到作者的讲解的）

白光划过效果

原文地址 在线演示

3D立方体

原文地址 在线演示

水中倒影

原文地址 在线演示

工具提示

原文地址 在线演示

单选复选

原文地址 在线演示

Loading加载

原文地址 在线演示

图片滤镜

原文地址 在线演示

阴影

原文地址 在线演示

3D按钮

在线演示(普通按钮)

在线演示(3D按钮)

原文地址

自定义滚动条

原文地址 在线演示

文字效果

原文地址 在线演示

多彩的渐变

原文地址 在线演示

进度条

原文地址 在线演示

遮罩条

原文地址 在线演示

切角

原文地址 在线演示

表单

原文地址 在线演示

溢出省略号

原文地址 在线演示

自定义选择文本样式

原文地址 在线演示

表格

原文地址 在线演示

导航菜单

原文地址 在线演示

动态的边框

原文地址 在线演示

文件上传组件美化

原文地址 在线演示

打字机效果

原文地址 在线演示

多形状图像

原文地址 在线演示

心跳灯和呼吸灯

在线演示(心跳灯)

在线演示(呼吸灯)

原文地址

竖着排的文字

原文地址 在线演示

面包屑导航

原文地址 在线演示

首字母下沉

原文地址 在线演示

美化有序列表

原文地址 在线演示

缎带效果

原文地址 在线演示

webpack盒子动画

在线演示

花瓣动画

出处 在线演示

导航栏光标下划线跟随

出处 在线演示

Twitter点赞动效

出处 在线演示

3D滚动字幕

出处 在线演示

CSS3地球仪

出处 在线演示

小雨打在窗户上的特效

出处 在线演示

蝴蝶飞舞

出处 在线演示

旋转魔方

出处 在线演示

光束和波浪

出处 在线演示

径向菜单

出处 在线演示

仿淘宝手风琴效果

在线演示

css3 Hover效果

在线演示

图片阴影效果

在线演示

CSS瀑布流

在线演示