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

2024-04-27 14:33:24

字體：大中小

來源：轉載

供稿：網友

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

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

源碼下載在線演示

　　這些精美的效果用到了CSS3border-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; } }

源碼下載在線演示

您可能感興趣的相關文章