實現同心圓遮罩漸變顯示 隱藏特效

2021-09-08 06:43:05 字數 660 閱讀 2268

今天在做**過程中,發現了一種新的特效,在這裡記錄分享一下。

給圖示加上遮罩,滑鼠浮動到圖示所在圓時藍色遮罩從圓心逐漸顯現,移出滑鼠時遮罩從圓周逐漸收縮到圓心消失。

實現原理:css3中,transform:scale(x,y)可以實現2d 縮放轉換,而當x=y時,它們的橫縱方向縮放比例一致。

當x=y=0時,即transform:scale(0)可實現影象隱藏效果

當x=y=1時,即transform:scale(1)可實現影象顯示效果:

遮罩顯現時,部分css**如下:

.service-box:hover .icon:before 

.service-box .icon:before

總結:可以通過transform:scale(0);transform:scale(1);實現同心圓遮罩顯示、隱藏特效。

9個同心圓(Python turtle)

這個程式用來繪製9個同心圓,程式很簡單。運用到的庫 turtle python version 3.7 說到turtle是乙個很實用的庫,實用python來畫圖,這個庫就是乙個好幫手了。import turtle turtle.setup 400,400,300,300 turtle.pensize...

在osgEarth上畫同心圓

二.樣式表建立部分 申明樣式 osgearth style style 海拔符號設定,即貼地設定 style.getorcreate clamping osgearth symbology altitudesymbol clamp absolute style.getorcreate techniq...

乙個div實現同心圓方式

二.非常規方法 1.1 box shadow可以無限套 具體參考位址 box shadow 0 0 0 10px red,0 0 0 20px black,0 0 0 30px red,0 0 0 40px black,0 0 0 50px red 1.2 重複徑向漸變屬性background re...