美妙的 CSS3 動畫！一組夢幻般的按鈕效果

標籤：style   blog   http   color   java   使用   os   io   

　　今天給大家帶來的是五款夢幻般的動畫按鈕效果。下面是線上示範，把滑鼠放在按鈕上試試，有驚喜哦！CSS3 引入了眾多供功能強大的新特性，讓設計和開發人員能夠輕鬆的創作出各種精美的介面效果。

　　溫馨提示：為保證最佳的效果，請在 IE10+、Chrome、Firefox 和 Safari 等現代瀏覽器中瀏覽。

 

 

源碼下載     線上示範

 

　　這些精美的效果用到了 CSS3 border-radius（圓角）、box-shadow（陰影）、transition（變形）、transform（轉換）和 animation（動畫）等特性，公用部分的代碼精簡以後如下：

section > div {    display: inline-block;    position: relative;    width: 200px;    height: 200px;    margin: 0px auto;    /*對於正方形元素border-radius設定為50%剛好變成圓形*/    border-radius: 50%;     /*寬度為10px的、不透明度為0.7的黑色邊框效果*/    border: 10px solid hsla(0,0%,0%,.7);     /*通過邊框陰影實現立體按鈕效果，inset是內陰影製作效果*/    box-shadow: inset 0 15px 15px -5px hsla(0,0%,100%,.7),                 inset 0 -5px 10px 3px hsla(0,0%,0%,.6),                 0 8px 10px 2px hsla(0,0%,0%,.3);    background-position: center;    /*初始縮放0.66倍*/    transform: scale(.66);     /*在失去焦點時根據自訂的貝塞爾時間曲線做動畫變換效果*/    transition: transform .5s cubic-bezier(.32,0,.15,1); } section > div:hover {    cursor: none;    /*懸停時恢複原始大小*/    transform: scale(1);     /*滑鼠移至上方時根據自訂的貝塞爾時間曲線做動畫變換效果*/    transition: transform .2s cubic-bezier(.32,0,.15,1); }

　　上面的代碼中用到了貝茲路徑，在數學的數值分析領域中，貝茲路徑又稱貝賽爾曲線（Bézier曲線）是電腦圖形學中相當重要的參數曲線。更高維度廣泛化貝茲路徑就稱作貝塞爾曲面，其中貝塞爾三角是一種特殊的執行個體。

　　貝茲路徑於1962年，由法國工程師皮埃爾·貝塞爾（Pierre Bézier）所廣泛發表，他運用貝茲路徑來為汽車的主體進行設計。貝茲路徑最初由Paul de Casteljau於1959年運用de Casteljau演算法開發，以穩定數值的方法求出貝茲路徑。想更加深入的瞭解貝茲路徑可以到維基百科瞭解：貝茲路徑。

　　效果一（Praticle）使用了 CSS3 radial-gradient（放射狀漸層或者放射性漸層，另外一種是線性漸層）、repeating-radial-gradient（重複漸層）以及 CSS3 Animation（動畫）。

　　為了便於閱讀和學習，效果一的代碼精簡後如下：

.particle {    background-size: 12px 12px;    background-color: #000;    /*前面公用樣式部分box-shadow產生的高亮效果太強，這裡重新設定*/    box-shadow: inset 0 15px 15px -5px hsla(0,0%,100%,.25),                inset 0 -5px 10px 3px hsla(0,0%,0%,.6),                0 8px 10px 2px hsla(0,0%,0%,.3);    /*使用放射狀漸層和重複漸層來實現背景圖片效果*/    background-image: radial-gradient( #555 0px, hsla(0,0%,0%,0) 2px, hsla(0,0%,0%,0) 24px),                      repeating-radial-gradient( white 0px, black 2px, black 48px);}.particle:hover {    /*滑鼠移至上方的時候執行particle-size和particle-positon兩個動畫效果*/    animation: particle-size .24s linear infinite,         particle-positon .48s linear infinite alternate;}    @keyframes particle-size {     /*這個名為particle-size的主要畫面格用來產生背景尺寸變化動畫效果*/    from { background-size: 6px 6px, 12px 12px; }     to { background-size: 12px 12px, 24px 24px; } }@keyframes particle-positon {     /*這個名為particle-positon的主要畫面格用來產生背景位置變化動畫效果*/    from { background-position: 60px, 60px; }     to { background-position: 140px, 140px; } }

 

源碼下載    線上示範

 

您可能感興趣的相關文章

• Web 開發中很實用的10個效果【附源碼下載】
• 精心挑選的優秀jQuery Ajax分頁外掛程式和教程
• 12個讓人驚歎的的創意的 404 錯誤頁面設計
• 讓網站動起來！12款優秀的 jQuery 動畫外掛程式
• 8個非常驚豔的 HTML5 和 JavaScript 特效

 

本文連結：神奇的 CSS3 動畫！一組夢幻般的按鈕效果

編譯來源：夢想天空 ◆ 關注前端開發技術 ◆ 分享網頁設計資源

本文來自【夢想天空（http://www.cnblogs.com/lhb25/）】