css3 實現禮品獲取光暈效果

2021-09-11 15:33:02 字數 839 閱讀 8156

1.星星的動畫，其中每個星星為乙個dom元素,然後設定相應的動畫：

html**：

class="star star1">


div>


複製**
css**：

.popup-board


.animate


.star1 


@keyframes star-move1


85% 


100% 


}複製**
在動畫過程中，如果去掉85%幀動畫的會導致這個星星在動畫過程中透明度太低，導致星星太暗，效果不好。但是在加入85%幀的動畫情況下使用常用的 animation-timing-function: ease|ease-in 會導致85%到100%的動畫銜接不流暢，所以將的 animation-timing-function 設定為 cubic-bezier(0.25,0.1,0.25,0.25)。 關於cubic-bezier函式的原理可以參考：實用的 css — 貝塞爾曲線(cubic-bezier)

####2.光暈效果

class="circle circle1">


div>


複製**
css**：

.popup-board


.circle 


.popup-board


.animate


.circle1 


@keyframes circle-move1


to }複製**
這裡要注意設定 .circle 的 opacity: 0；不設定時，會導致動畫開始瞬間背景突然亮一下的感覺。

CSS3實現載入效果

預期實現的效果如下如所示 首先基本的html布局如下 對於的css 如下 首先設定一下基本的樣式 wrap wrap div 完成上面的css樣式定義後，頁面上就會有五個排列整齊的小細條了。然後我們來新增動畫效果 在 wrap div加入如下 webkit animation fadeout 1s ...

css3實現網格效果

利用background image裡的liner gradient屬性可以實現一些簡單的css網格背景，能自適應背景，挺實用的，下面就簡單的介紹兩款網格背景 1.桌布花紋 紅.png 塊height 300px width 300px background white background ima...

css3實現動畫效果

transition property 指定對 html 元素的哪個 css 屬性進行平滑漸變處理。該屬性 可以指定 background color width height 等各種標準的 css 屬性。all代表所有屬性 transition duration 指定屬性平滑漸變的持續時間。tra...