網易新聞的分享按鈕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...