css3 新知識(張鑫旭學)

2022-06-23 21:03:10 字數 663 閱讀 4157

1.新增濾鏡

給新增濾鏡,背景圖是加的,然後給mix-blend-mode: screen;就可以實現濾鏡;

給新增filter: hue-rotate(180deg);可以使變色

2.切換轉場動畫

.in 

@keyframes clipcirclein

100%

}使用的是clip-path中的circle方法,語法是:

circle(半徑 at 圓心座標)

圓心預設是50% 50%也就是元素的中心,因此,這裡的css**也可以簡化成

原理很簡單:動畫0%開始時候圓的剪裁半徑是0,於是整個影象元素都不可見;動畫100%結束的時候,圓的剪裁半徑是200畫素,於是整個影象元素就可見了。clip-path屬性是支援cssanimation動畫的,因此可以看到一個元素從0到有,圓形呈現的效果。

使用也很簡單,在需要呈現的元素上新增類名.in就可以了,不僅可以寫在元素上,任意的, 甚至整個頁面都可以。

根據形狀來實現文字排版;

.infos