乙個簡單的CSS圓形縮放動畫

2021-09-11 14:18:03 字數 765 閱讀 3713

網易新聞的分享按鈕hover效果(新聞頁面):

看了一下這兩個頁面的原始碼,主要是用了transform:scale()transition,自己的最終的實現效果如下:

實現思路大體是模仿網易新聞的,布局如下:

"" class="third-party third-party-weixin">

複製**

外層的a標籤用於整體容器和跳轉,內層的i標籤使用偽元素::before和::after分別作為背景色和前景色,這兩個偽元素均絕對定位,垂直水平居中,::after設定縮放屬性transform:scale(0),過渡動畫屬性transition: all .3s,正常情況下::before可見,當hover的時候::after設定縮放屬性transform:scale(1),兩個相鄰絕對定位元素在不設定z-index的情況下,文件流在後的元素在上,並且在有過渡動畫屬性transition的情況下實現了縮放動畫效果。

.third-party 

&:hover }}

span

i &::after

}&.third-party-weixin

i &::after }}

}複製**

這樣這個簡單的圓形縮放動畫就完成啦。

ps: screentogif錄gif真好用,推薦一下。

乙個簡單的CSS3重複動畫

隨著手機效能越來越好css3動畫在移動端中運用也越來越多,各種技術大牛寫出來各種炫酷的效果 本著不想被行業所淘汰的心態,最近也在看關於css3動畫方面的東西 然後也想去寫點東西,下面貼 吧 html 如下 css 如下 color box color box span color box span ...

JQuery 寫乙個圓形動畫載入進度條

drawprocess 這個方法主要是畫圓的大小 上面所寫到的 setinterval addnum 90,100 20 分別指的是 1.這裡的三個引數分別是90 在90 處 2.100 圓的寬度 而標籤設定的高寬是不起作用的 3.20 2秒之後執行這個addnum方法 createlineargr...

乙個簡單css例子

lang en charset utf 8 css講解title rel stylesheet href style.css body div dd xddaa hover abc ulli first child ulli last child ulli nth child 3 ulli only...