【CSS】少年，你想拥有写轮眼么？
最近笔者在公司内部开展了一次CSS讲座，由于授课经验不太足，授课效果自我感觉并不太好，不过课中有一个笔者用CSS写的一个小效果，其中还是包含了蛮多CSS的常见知识点的，正好也有部分同学很感兴趣如何实现，于是便有了此文。
先来看看最终效果：（动画需要依靠hover事件来触发，请把鼠标放上去）如果看不到请点击这里
如果你耐心的看完了，最终效果如下图：
那么，效果看完了，让我们先来整理下上面的效果总共用了哪些css3效果呢？（可能有些火影迷已经按捺不住了XD）
可能在继续之前有同学会问：这里面用了多少图片呢？答案当然是没有，不信的同学可以查看下dom，那么我们继续
因为整个效果还比较复杂，我们得一步步分解开来看：
首先是最简单的眼球：
<div class='eye'></div> <style> .eye{ width: 100px; height: 100px; border-radius: 100px; box-sizing: border-box; border: 2px solid #000; position: relative; background: radial-gradient(at center center, #fd2312, #920205); } .eye:before, .eye:after{ content: ''; position: absolute; border-radius: 100%; box-sizing: border-box; } .eye:before{ width: 60%; height: 60%; border: 2px solid #000; left: 50%; top: 50%; margin: -30% 0 0 -30%; } .eye:after{ border: 10px solid #000; left: 50%; top: 50%; transform: translate3d(-50%, -50%, 0); z-index: 1; } </style>
眼球的代码很简单，就一个div标签，然后利用伪元素，就能画出瞳孔，再使用径向渐变，就能画出红色的眼球背景色，效果如下图：
接着我们来看看那个动来动去的勾玉应该怎么画呢？参加过去年CSS conf的同学可能还记得会上有一位同学分享了画“八字胡”的方法，其实笔者也借鉴了该方法，主要利用border来实现的：
<span class='jewel-container'> <i class="jewel"></i> </span> <style> //勾玉圆头的部分，其实它就是个圆 .jewel{ width: 100px; height: 100px; border-radius: 100%; position: absolute; left: 0; top: 0; -webkit-transform: rotate(-150deg); transform: rotate(-150deg); background-color: currentColor; } //勾玉的尾巴，请注意border的width和riadus的取值 .jewel:before{ content: ''; position: absolute; width: 100px; top: 50px; left: 0px; height: 120px; border-color: currentColor; border-style: solid; border-width: 0 0 0 100px; border-radius: 0 0 0 100%; } </style>
如上图所示，蓝色的部分就是i标签，而半透明的红色部分则是伪元素。当设置他们为同色的时候就形成了之前demo中转动的勾玉，至于转动，稍微设置一下transform-origin属性，再旋转就可以了。
接着是3个小勾玉合并变大成一个万花筒勾玉的过程，这就只是一个纯粹的css animation了，本身就没什么技巧性了。
最后是那个视觉上从远到近飞来的“乌鸦”：
<div class='crow eg'> <i></i> </div> <style> .crow{ position: relative; width: 0; height: 0; opacity: 0; z-index: 3; left: -30px; top: 0; -webkit-transition: all 6s; transition: all 6s; -webkit-transition-delay: 19s; transition-delay: 19s; } .crow > i{ position: absolute; left: -20px; top: -20px; border: 20px solid transparent; border-bottom-color: #000; -webkit-transform: rotateX(80deg); transform: rotateX(80deg); -webkit-transition: transform 3s ease; transition: transform 3s ease; } .crow:before, .crow:after{ content: ''; position: absolute; width: 0; height: 0; left: -20px; top: -20px; border: 20px solid transparent; border-bottom-color: #000; } .crow:before{ border-bottom-color: #000; -webkit-transition: transform 3s ease; transition: transform 3s ease; transform: rotateX(130deg) rotateY(0deg) rotateZ(40deg) translateX(-2px); -webkit-animation: fly 1s linear infinite; animation: fly 1s linear infinite; } .crow:after{ border-bottom-color: #000; -webkit-transition: transform 3s ease; transition: transform 3s ease; transform: rotateX(130deg) rotateY(0deg) rotateZ(-40deg) translateX(2px); -webkit-animation: fly2 1s linear infinite; animation: fly2 1s linear infinite; } .crow.eg:hover > i{ -webkit-transform: rotateX(0); transform: rotateX(0); } .crow.eg:before{ -webkit-animation: fly 1s linear 3; animation: fly 1s linear 3; } .crow.eg:hover:before{ -webkit-transform: rotateX(0) rotateY(0) rotateZ(90deg) translateX(-10px) translateY(10px); transform: rotateX(0) rotateY(0) rotateZ(90deg) translateX(-10px) translateY(10px); } .crow.eg:after{ -webkit-animation: fly2 1s linear 3; animation: fly2 1s linear 3; } .crow.eg:hover:after{ -webkit-transform: rotateX(0) rotateY(0) rotateZ(-90deg) translateX(10px) translateY(10px); transform: rotateX(0) rotateY(0) rotateZ(-90deg) translateX(10px) translateY(10px); } </style>
仍然只用了一个标签来实现“乌鸦”（不过这个乌鸦的完成度确实不怎么高...）的，利用了一下CSS3 中的rotate3d来进行了一些简单的3d旋转。
最后，加上一些动画把之前的东西串起来，就做好了一只“开瞳”的写轮眼了。
P.S.其实就CSS目前的发展状况而言，它对新手是有一定的门槛的，特别是CSS3增加了太多的灵活性和可操作性，给了我们特别多的能力，但是不到时候，可能我们的不知道“前端”已经具备这样一种能力，虽然未来可能会逐渐成型的web animation API会解决这一问题，但是在目前阶段，想要在css上有所提升，还是需要大家在日常生活中，多想多练，时不时把自己的一些构想尝试着实现以下，说不定，能有一些意外的收获。
