作为前端工程师来说，css3的运用无疑是很广泛的，实现的奇妙效果也是丰富多彩。它的优点远不止于能让你的页面酷炫非常，一个好的css3运用能给体验者一种莫名的心旷神怡嘿嘿嘿！

下面来看看百度是怎么使用css3的

这是百度的首页。链接：
http://xuanfengge.com/demo/201406/guide/

下面我们说说这是怎么实现的。

首先箭头是一张图片，然后效果其实就是用2个相同的DOM元素利用缩放动画使这两个箭头交叉闪烁。

代码附上：

//两个箭头的html

<a class="s-xguide-down trans" href="http://www.baidu.com/" onclick="return false;" hidefocus=""></a>

<a class="s-xguide-down arrow-1 trans" href="http://www.baidu.com/" onclick="return false;" hidefocus=""></a>

css代码如下

图片样式css

css3缩放动画

css3缩放动画

效果引用

这个效果主要运用到了@keyframes的生成动画，利用css3的scale对两张图片进行缩放、透明度的交叉，最终得到动画的实现。

一个基础的css3教程希望能给刚入门的小伙伴们带来帮助，快动手试试吧！