什么时候html的过渡版本,CSS过渡与转换
瀏覽器前綴:
css3屬性:預覽版,還沒有最終版,所以有很多兼容性問題,瀏覽器不識別。
瀏覽器為了使這些屬性兼容,每個瀏覽器廠商都提供了一個屬于自己瀏覽器的語法規則,瀏覽器兼容前綴。
主流瀏覽器:谷歌,IE,歐朋,火狐,蘋果
瀏覽器前綴:
-wekit-谷歌
-moz-火狐
-ms-IE
-o-歐朋
盒子陰影:
box-shadow:0px 0px 0px 0px red;
水平偏移量,垂直偏移量,模糊度,影子大小,顏色
css3漸變:由瀏覽器生成,
線性漸變:
1、單一方向漸變
background:-wbkit-linear-gradient(方向,顏色1,顏色2,顏色3);
方向:
left 從左邊開始
right 從右邊開始
top 從上邊開始
bottom 從下邊開始
【注】需要添加瀏覽器前綴
background:linear-gradient(to 方向,顏色1,顏色2,顏色3);
to left 到左邊(結束)
to right
to top
to bottom
【注】不要添加瀏覽器前綴
2、對角漸變
background:-wbkit-linear-gradient(方向 方向,顏色1,顏色2,顏色3);
left top 從左上角到右下角漸變
left bottom
right top
right bottom
【注】需要添加瀏覽器前綴
background:linear-gradient(to 方向 方向,顏色1,顏色2,顏色3);
to left top
to left bottom
to right top
to right bottom
【注】不要添加瀏覽器前綴
3、角度的漸變
10deg 10度
4、默認情況下顏色均分
可以指定顏色分布的百分比
background:-wbkit-linear-gradient(left,red 10%,green 40%,blue);
從10%開始漸變,前10%都是red
background:linear-gradient(to left,red 10px,green,blue);
從10px處開始漸變,前10px都是red
徑向漸變:(一定要加瀏覽器前綴)
從一個點到四周的漸變
background:-wbkit-radial-gradient(漸變位置,形狀,大小,顏色1,顏色2,顏色3);
漸變位置:默認從中心到四周
left 從左邊漸變
right
top
bottom
left top 從左上角到四周漸變
left bottom
right top
right bottom
形狀:默認橢圓ellipse
正圓circle
【注】元素是正方形,則都是正圓
大小:size,漸變的大小,即漸變到哪里停止,它有四個值
closest-side:最近邊;
farthest-side:最遠邊;
closest-corner:最近角;
farthest-corner:最遠角;
漸變重復:
線性漸變
background:repeating-linear-gradient(to left,black 10%,white 20%);
-wbkit-background:repeating-linear-gradient(right,black 10%,white 20%);
徑向漸變
background:repeating-radial-gradient:(right,black 10%,white 20%);
【注】漸變用的背景屬性是background-image:;
過渡:讓元素的動畫產生平滑的效果
1、什么屬性在做動畫transition-property:屬性1,屬性2,...;
2、過渡時間需要多久transition-duration:0.5s;
3、延遲時間(選寫)transition-delay:2s;
4、動畫類型(默認勻速)transition-timing-function:;
綜合寫法:
transition:all/具體屬性值 運動時間s/ms 延遲時間s/ms 動畫類型
css3中的2d
二維的平面空間
css3 2d屬性
變形屬性transform:;
2d變換
位移
transform:translate(水平位移,垂直位移);一個值默認只有水平位移
transform:translateX(10px);水平位移
transform:translateY(10px);垂直位移
【注】正值,從上往下從左往右
旋轉
transform:rotate();默認中心旋轉
transform-origin:left top;設置旋轉基點
transform-origin:5px 10px;
縮放
transform:scale(水平垂直都縮放的倍數);一個值
transform:scale(水平縮放,垂直縮放);兩個值
transform:scaleX(水平縮放);
transform:scaleY(垂直縮放);
內容來源于網絡如有侵權請私信刪除
總結
以上是生活随笔為你收集整理的什么时候html的过渡版本,CSS过渡与转换的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 计算机三级网络操作题,计算机等级考试三级
- 下一篇: 计算机类会议论文2021截稿,科学网—人