作为前端开发者，相信大家对 CodePen 不是很陌生。它是一个非常了不起的网站，在上面大家不仅可以分享自己的 Web 作品，而且可以欣赏到世界各地的优秀开发者实现的各种酷炫效果。当然，你也可以从这里获取一些小灵感。

在本文中，小狮将与大家分享一些超炫的 CSS 动画效果。当然，除了欣赏外，有些Demo的作者也给出了具体实现的方法，值得我们去学习与借鉴。那么，一起来Enjoy吧！

点击右上方红色按钮关注“web秀”，让你真正秀起来

前言

好雨知时节，当春乃发生。 随风潜入夜，润物细无声。

春节已经过去，新的一年刚刚开始，小伙伴们，今年你的目标是什么？定个小目标，挣它一个亿？分享一下我的目标，是让大家的web前端能力，更上一层楼。

利用 HTML 和 CSS 制作 LOGO 动画要比以前更容易，通过使用最新的 JavaScript 库也能够使网页动画制作的更加精良。

在本文中，我们将与大家分享 10 个让人印象深刻的世界知名品牌与未知实体的自定义 LOGO 动画示例。一起来 Enjoy 吧！

点击右上方红色按钮关注“web秀”，让你真正秀起来

前言

以前说页面是动态，基本都是说数据是从数据库查询的，不是写死在html代码里面的。现在的说页面动态，一般会问：你是说数据，还是效果动态？

CSS3导航栏展开动画效果,实现不一样的手风琴菜单展开收缩动画效果！效果如下：

实现代码

html：

css：

javascript：

loading动画图标的做法有很多。一般不想麻烦的人直接嵌入一张gif的动态图标即可实现！虽然该方法方便快捷，但是对网站的加载速度优化方面还不是最好，制作的GIF图片很难控制它们的大小！今天我就来说说如何用CSS来制作一个loading动画效果，供大家参考，感兴趣的小伙伴可以看看！

常见的加载动画有以下2中：

内容导读

然而，，看到css3 动画就停不下来，哎，总是经不起诱惑，大概就是自己拿不到想要的offer的原因吧哭泣。加载条 之前呢，在做公司项目的时候，为了显示进度，需要有回调来显示进度，所以用js控制了这个css3， 今天看到一个加载的， 觉得实在是太简单了！嘿嘿，其实也不难， 主要是要分析，仔细观察第一个球球， 什么动画效果呢？然后接下来的两个球球跟第一个就是一个延时的区别而已了。之前不用css3属性的时候，直接是写一个span标签绝对定位，jq实现动画效果的。这里主要就是用到了伪元素， ::after ， transition , :hover ，嗯，就是这么简单的。

前言

在CSS3中新增了很多的新特性，其中使用频率比较高的应该是动画效果了，它可以帮助我们实现以前使用Javascript才能实现的效果，极大的提高网页的性能。今天这篇文章我们就来一起看一个使用CSS3新特性完成的翻书效果吧。

本文的源码已经放在了Github上，感兴趣的可以clone到本地试试，地址如下。