有一天逛 codepen 的時候，看到這麼乙個效果：將文字上下切開兩半。
點進去看了一下**，發現原理很簡單，大概就是通過偽類使用attr()函式獲取內容，然後進行定位。
gd4ark.github.io/blog_demos/…
先讓兩個偽元素獲取到屬性的值，並且將位置調好。
data-content="i love css">i love cssh1>
複製**
h1
h1::before,
h1::after
/* 切割部分 */
h1::before
/* 剩餘部分 */
h1::after
複製**
這裡使用flex布局對齊，剩餘部分改為：
/* 剩餘部分 */
h1::after
複製**
到現在，就已經做好，只要在切割部分上應用動畫，即可實現炫酷的切割效果：
/* 切割部分 */
h1::before
@keyframes action
30%60%
100%
}複製**
不得不說那些大神們的腦洞真是大，如果沒見過這個效果之前，我是無論如何都想不到可以如此簡單的實現這麼炫酷的切割效果。
CSS3 animation實現逐幀動畫效果
css3裡面的animation屬性非常強大，但是自己用的比較少，最近有次面試就剛好被問到了，趁現在有時間就對animation做乙個小總結。同時實現乙個逐幀動畫的demo作為練習 animation屬性一覽 因為animation屬性比較多，然後在w3c上看有點蛋疼，乾脆也做了乙份導圖，以後想檢視...
用css3和canvas實現的蜂窩動畫效果
近期工作時研究了一下css3動畫和js動畫。主要是工作中為了增強頁面的趣味性，大家都有意無意的加入了非常多動畫效果。當然大部分都是css3動畫效果。能夠gpu加速，這會降低移動端的效能需求。今天主要說的是蜂窩效果。詳細效果大家等下能夠執行源 這裡就不放gif圖了。css3的原理非常easy，就是通過...
純CSS3實現的8種Loading動畫效果
效果如圖 html 部分 所有效果共用 複製 如下 載入中.我們從左到右從上到下列出效果對應的css 1 效果css 複製 如下 load1 loader,load1 loader before,load1 loader after load1 loader before,load1 loader ...