網上看到乙個css3動畫，位址
最開始思路是，裡面乙個div方塊，右上角乙個同樣大小的div1,向上,向右平移8px，設div1的border-top,border-right值形成，如圖所示
再用clip擷取一半，形成半折角。
同理左下角建乙個div,向左、向下平移8px,設border-left,border-bottom值，用clip擷取形成
html,body.cont.bb.bb:before.bb:afterview code
然而著手寫動畫css的時候發現問題，線條逆時針旋轉，右上角的線條不能平滑過渡到左下角。
然後看了一下人家寫的**，才發現裡面兩個div其實是比最初div大的，而且樣式一樣！！！
再仔細看看動畫發現，其實就是兩條一樣長的線條在運動，只是一條比另一條塊半圈
所以設定動畫的時候只要乙個延遲1/2時間開始就可以了
dooooo....敲完**
.bb.bb:before,.bb:after.bb:before@keyframes clipani25%50%75%}執行一看，前2s不對，div4週都有邊框，2s後開始正常。想想確實是，div:before設定了邊框動畫延遲2s,前2s保持原有狀態。
但是要進入頁面就開始動畫，且兩個動畫有時間錯開，怎麼辦？
哈哈，想起動畫delay負數的妙用
css:
html,body.cont.bb.bb:before,.bb:after.bb:before@keyframes clipani25%50%75%}view code
成功~！
檢視演示
css3滑鼠懸停動畫線條邊框特效
滑鼠滑過邊框動畫效果，使用css3結合jquery。此效果和 是早些年最早剛接觸c3動畫時寫的，當年寫出它來別有一番成就感呢，所以記憶尤新。哈哈哈哈 早些年從不感興趣這些寫文章 管理部落格之類的，現在拿出來分享給剛接觸動畫的小盆友們參考 先上效果圖 如下 html box images swarov...
css線條伸縮 CSS3載入動畫之線條伸縮
載入動畫之線條伸縮 效果圖思路通過 3 個線條高度的動態變化實現載入動畫，為了突出效果，給線條增加了陰影。對動畫而言，keyframes 和 animation 是必不可少的技巧。同時本例中使用了 first child 和 nth child 選擇器，用於給特定位置的元素新增其特有的動畫屬性。ht...
CSS3之邊框樣式（動畫過渡）
css3中transition屬性定義了過渡，我們可以使用它來輔助我們實現乙個邊框樣式的動畫過渡。實現 transition 屬性是乙個簡寫屬性，用於設定四個過渡屬性 transition property duration timing function delay 值描述 transition ...