乙個簡單的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...