前端是网站和Web应用所呈现给用户最直接的东西，前端的好坏直接影响用户的体验和好感。尽管如此，你也不必为前端设计绞尽脑汁，因为有大量可重用的效果和代码来帮助你完成这一设计。 

本文所介绍的这些效果都已经托管在CodePen网站上，点击下面的标题即可浏览代码和预览效果，并可以根据实际所需直观地进行修改。 

1.  网站提示向导 

2.  文本动画 

3.  控制台UI 

4.  CSS3仿制的Apple官网导航 

5.  纯CSS3加载动画 

6.  CSS另类加载动画 

7.  提交按钮动画 

8.  响应式扁平化UI 

9.  面包屑导航组件 

10.  基于CSS3的文字斑马行效果 

11.  彩虹导航菜单 

12.  CSS3制作的价格表 

13.  平滑折叠菜单效果 

14.  音量调节钮UI 

15.  选项卡式的电子名片 

16.  自定义多选框 & 单选钮 

17.  超酷的文字阴影 

18.  列表/网格视图切换器 

19.  CSS3电子名片 

20.  冬季主题网站布局 

21.  视差滚动布局 

22.  CSS图书动画 

23.  可排序的任务清单 

24.  CSS3绘制的树枝 

25.  简单的博客编辑器 

26.  CSS3开关 

27.  登录表单 

28.  HTML5/CSS3打造的指标滑块 

29.  简单漂亮的CSS3按钮 

30.  动画形式的表单 

CSS3精美前端