纯html5+css能写出什么惊人的效果？

看到很多人说没有js，永远都只是静态的，我想那是你真的对CSS3的强大之处还不了解吧。

下面我们来看看那些使用纯的CSS3+HTML实现的惊人效果吧。

随风飘荡的树

• HTML代码
  

这个效果中使用的是一系列的div，每个div内部包含两个子div，表示树的分支，一层层往下，每层都比上一层分支更细。

• CSS代码
  

在css代码中通过@keyframes定义动画，动画中通过scale属性值来缩小每个div，所以可以让每个树枝都比茎要小。

同时通过rotate属性去控制div旋转一定的角度，依次模仿树枝的飘动。

当然所有的代码不可能只有这么多，这里只截取了部分重点代码。

loading效果

很多前端coder在开发的时候如果遇到loading效果，第一反应肯定是使用gif图吧。

这个用CSS3完全可以实现。

上图中的loading效果都是通过CSS3实现的，完全不借助于js。

飞机

不要以为飞机只能通过图片形式的呈现在我们眼前，通过CSS完全可以自己画一个飞机出来。

• HTML代码
  

我们来看看整个的HTML部分的代码。

通过每个class的名字我们就能区分出div对应的飞机的部分，像引擎，机翼等等。

• CSS代码

这里我们通过机翼部分的CSS代码来看。

设置了一系列CSS3的属性。

总结

这些效果说不上特别惊艳，但是也绝不能说CSS一无是处，CSS正在变得越来越强大，那些看似复杂的效果，也慢慢的可以被CSS实现。

目前我已经在头条上发表了大概两百多篇前端相关的文章，得到了很多的好评，想要学习前端开发的童鞋可以关注下噢~