tml的css3實現帶漸變的炫酷按鈕
用到的技術有CSS3的漸變,CSS3動畫等
效果圖:
實現代碼
html:
css:
何使用css實現漸變跟隨鼠標光標的懸停效果。如下圖:
實現思路:
html:
<button class="mouse-cursor-gradient-tracking">
<span>Hover me</span>
</button>
css:
/*按鈕基本樣式*/
.mouse-cursor-gradient-tracking {
position: relative;
background: #7983ff;
padding: 0.5rem 1rem;
font-size: 1.2rem;
border: none;
color: white;
cursor: pointer;
outline: none;
overflow: hidden;
}
.mouse-cursor-gradient-tracking span {
position: relative;
}
/*按鈕漸變背景,這里使用偽類實現,并且使用transform動畫*/
.mouse-cursor-gradient-tracking:before {
--size: 0; /*漸變背景尺寸*/
content: '';
position: absolute;
left: var(--x);
top: var(--y);
width: var(--size);
height: var(--size);
/*背景漸變*/
background: radial-gradient(circle closest-side, pink, transparent);
/*動畫效果*/
transform: translate(-50%, -50%);
transition: width 0.2s ease, height 0.2s ease;
}
/*鼠標經過按鈕時*/
.mouse-cursor-gradient-tracking:hover:before {
--size: 200px;
}
javascript:
次來看一個帶特殊圓角導航欄布局,如下谷歌瀏覽器的標簽欄:
這樣一個布局如何實現呢?
CSS 漸變幾乎是無所不能的,什么的圖形都能繪制,這里可以拆分一下,兩個矩形,兩個圓形,還有兩個反向圓角,也就是 2 個 線性漸變,4 個徑向漸變,示意如下:
最終實時效果如下(上面是原理圖)
完整代碼如下:
*請認真填寫需求信息,我們會在24小時內與您取得聯系。