CSS常用動畫效果

2021-10-04 22:03:33 字數 1993 閱讀 9515

1.標題兩邊的小橫槓

標題


title


&:before


&:after


}
2.滑鼠手型(cursor屬性)

a[href],


input[type="submit"],


input[type="image"],


input[type="button"],


label[for],


select,


button
3.小三角

.********


/*下*/


.********.bottom


/*上*/


.********.top


/*左*/


.********.top


/*右*/


.********.top
3.flutter除錯模式上面的小便籤（頂角貼紙效果）

class


="wrap"


>


class


="ribbon"


>


href


="#"


>


fork me on githuba


>


div>


div>


/* 外層容器幾本設定  */


.wrap


.ribbon


.ribbon a
4.用 border 屬性繪製元素

border 除了作為簡單的繪製邊框以外，還可以繪製三角形，梯形，星形等任意的多邊形，以下為繪製的兩個三角形和梯形



.********1


.********2


.trapezoid
5.用 border-radius 繪製元素,border-radius主要用於繪製圓點、圓形、橢圓、圓角矩形等形狀，以下為簡單繪製的兩個圖形。



.circle,


.ellipse


.ellipse
6.使用 css 漸變來繪製圖示



.gradient
7.杯子

.cup


cup:before
8.心型

.heart


.heart:before,


.heart:after


.heart:before


.:after
9.相機

.camera


.camera:before


.camera:after
10.月亮

.moon
11.月亮

.moon
12.陰影效果

.shadow-text-xs


/*智慧型相容ie10以上 暫不考慮*/


.shadow-xs


.shadow-sm


.shadow-md


.shadow-lg

常用的CSS動畫效果

在實際運用中，經常需要用到旋轉 放大等動畫效果。以下列舉了一些常見的動畫效果的css實現。所有的動畫都需要設定過渡transition rotateimg,scaleimg,rotateandscale,translateimg然後根據不同的動畫需要，修改css樣式 1 旋轉 rotateimg h...

CSS動畫效果

2d 3d 轉換 1 通過2d 3d 轉換，我們能夠對元素進行移動 縮放 轉動 拉長 拉伸。轉換是使元素改變形狀 尺寸和位置的一種效果，可以使用2d或 3d轉換來轉換元素 2 2d transform 屬性 轉換方法的值 1 translate 水平移動 垂直移動 移動 2 rotate 數字 de...

CSS動畫效果

css變形效果 transform translate 平移 translate x,y translatex x translatey y 相對於元素原始位置平移。scale 縮放 大於1放大，小於1縮小。rotate 旋轉 單位 deg度 grad 梯度 rad 弧度 turn 轉 圈 tran...