今天給大家?guī)淼氖俏蹇顗艋冒愕膭赢嫲粹o效果。下面是在線演示，把鼠標放在按鈕上試試，有驚喜哦！CSS3 引入了眾多供功能強大的新特性，讓設(shè)計和開發(fā)人員能夠輕松的創(chuàng)作出各種精美的界面效果。

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

?

?

源碼下載? ? ?在線演示

?

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

section > div {display: inline-block;position: relative;width: 200px;height: 200px;margin: 0px auto;/*對于正方形元素border-radius設(shè)置為50%剛好變成圓形*/border-radius: 50%; /*寬度為10px的、不透明度為0.7的黑色邊框效果*/border: 10px solid hsla(0,0%,0%,.7); /*通過邊框陰影實現(xiàn)立體按鈕效果，inset是內(nèi)陰影效果*/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); /*在失去焦點時根據(jù)自定義的貝塞爾時間曲線做動畫變換效果*/transition: transform .5s cubic-bezier(.32,0,.15,1); }section > div:hover {cursor: none;/*懸停時恢復(fù)原始大小*/transform: scale(1); /*鼠標懸停時根據(jù)自定義的貝塞爾時間曲線做動畫變換效果*/transition: transform .2s cubic-bezier(.32,0,.15,1); }

　　上面的代碼中用到了貝塞爾曲線，在數(shù)學(xué)的數(shù)值分析領(lǐng)域中，貝塞爾曲線又稱貝賽爾曲線（Bézier曲線）是電腦圖形學(xué)中相當重要的參數(shù)曲線。更高維度的廣泛化貝塞爾曲線就稱作貝塞爾曲面，其中貝塞爾三角是一種特殊的實例。

　　貝塞爾曲線于1962年，由法國工程師皮埃爾·貝塞爾（Pierre Bézier）所廣泛發(fā)表，他運用貝塞爾曲線來為汽車的主體進行設(shè)計。貝塞爾曲線最初由Paul de Casteljau于1959年運用de Casteljau算法開發(fā)，以穩(wěn)定數(shù)值的方法求出貝塞爾曲線。想更加深入的了解貝塞爾曲線可以到維基百科了解：貝塞爾曲線。

　　效果一（Praticle）使用了 CSS3 radial-gradient（徑向漸變或者放射性漸變，另外一種是線性漸變）、repeating-radial-gradient（重復(fù)漸變）以及 CSS3 Animation（動畫）。

　　為了便于閱讀和學(xué)習(xí)，效果一的代碼精簡后如下：

.particle {background-size: 12px 12px;background-color: #000;/*前面公共樣式部分box-shadow產(chǎn)生的高亮效果太強，這里重新配置*/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);/*使用徑向漸變和重復(fù)漸變來實現(xiàn)背景圖片效果*/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 {/*鼠標懸停的時候執(zhí)行particle-size和particle-positon兩個動畫效果*/animation: particle-size .24s linear infinite, particle-positon .48s linear infinite alternate; }@keyframes particle-size { /*這個名為particle-size的關(guān)鍵幀用來產(chǎn)生背景尺寸變化動畫效果*/from { background-size: 6px 6px, 12px 12px; } to { background-size: 12px 12px, 24px 24px; } }@keyframes particle-positon { /*這個名為particle-positon的關(guān)鍵幀用來產(chǎn)生背景位置變化動畫效果*/from { background-position: 60px, 60px; } to { background-position: 140px, 140px; } }

?

源碼下載????在線演示

?

您可能感興趣的相關(guān)文章

• Web 開發(fā)中很實用的10個效果【附源碼下載】
• 精心挑選的優(yōu)秀jQuery Ajax分頁插件和教程
• 12個讓人驚嘆的的創(chuàng)意的 404 錯誤頁面設(shè)計
• 讓網(wǎng)站動起來！12款優(yōu)秀的 jQuery 動畫插件
• 8個非常驚艷的 HTML5 和 JavaScript 特效

?

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

編譯來源：夢想天空 ◆ 關(guān)注前端開發(fā)技術(shù) ◆ 分享網(wǎng)頁設(shè)計資源

總結(jié)

以上是生活随笔為你收集整理的美妙的 CSS3 动画！一组梦幻般的按钮效果的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。