css變形效果
transform
translate:平移 translate(x,y) translatex(x) translatey(y)相對於元素原始位置平移。
scale:縮放 大於1放大，小於1縮小。
rotate：旋轉 單位 deg度 | grad 梯度 |rad 弧度 | turn 轉、圈
transform-origin:變形中心點 transform-origin:0,0;
transition:
transform-property： 屬性|all
transform-duration： 持續時間
transform-timing-funciton：動畫型別 linear|ease|ease-in|ease-in-out|step-start|
step-end|steps|cubic-bezier
transform-delay:延遲時間
css動畫效果
@keyframes name
50%{}
to{}
}在要應用的樣式上加入 animation: name 持續時間 動畫型別 過渡方式
重複次數infinite 為無限次 是否有反向動畫 alternate為有 forwards定位到最後位置
如：animation: fly1 3s linear infinite alternate forwards;
CSS動畫效果
2d 3d 轉換 1 通過2d 3d 轉換，我們能夠對元素進行移動 縮放 轉動 拉長 拉伸。轉換是使元素改變形狀 尺寸和位置的一種效果，可以使用2d或 3d轉換來轉換元素 2 2d transform 屬性 轉換方法的值 1 translate 水平移動 垂直移動 移動 2 rotate 數字 de...
CSS常用動畫效果
1.標題兩邊的小橫槓 標題 title before after 2.滑鼠手型 cursor屬性 a href input type submit input type image input type button label for select,button 3.小三角 下 bottom 上 ...
css卡片動畫效果
class layout container container fluid index select class index heading 選擇三道h2 專業實力與豐富經驗p div class select content row class select card class content...