【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上有所提高，仍是須要你們在平常生活中，多想多練，時不時把本身的一些構想嘗試着實現如下，說不定，能有一些意外的收穫。