表單特性與函數
- placeholder : 輸入框提示信息
- autocomplete : 是否保存用戶輸入值，默認為on，關閉提示選擇off
- autofocus : 指定表單獲取輸入焦點
- list和datalist : 為輸入框構造一個選擇列表
- list值為datalist標簽的id
- required : 此項必填，不能為空
- Pattern : 正則驗證 pattern="\d{1,5}“
- Formaction 在submit里定義提交地址
<body>
<form action="https://s.taobao.com/search">
<input type="password" placeholder="請輸入密碼" />
<input type="text" name="user" autocomplete="off">
<input type="text" name="user" autofocus="">
<input type="text" name="user" required="">
<input type="text" list="miaov" />
<datalist id="miaov">
<option value="javascript">javascript</option>
<option value="html">html</option>
<option value="css">css</option>
</datalist>
<input type="submit" />
<input type="submit" value="保存" formaction="http://www.baidu.com" />
</form>
</body>
-webkit-filter 濾鏡
- 值范圍：
- 0~1 或者 0%~100%
灰度 -webkit-filter:grayscale(1);
棕色調 -webkit-filter:sepia(1);
飽和度 -webkit-filter:saturate(0.5);
色相旋轉 -webkit-filter:hue-rotate(90deg);
反色 -webkit-filter:invert(1);
透明度 -webkit-filter:opacity(0.2);
亮度 -webkit-filter:brightness(0.5);
對比度 -webkit-filter:contrast(2);
模糊 -webkit-filter:blur(3px);
陰影 -webkit-filter:drop-shadow(5px 5px 5px #ccc);
- 0~1 或者 0%~100%
transform 將元素進行2D或3D轉換
- rotate(90deg) 旋轉函數 取值度數
- deg 度數
- transform-origin:x y 旋轉的基點
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
transform: rotate(0deg);
transition: 3s;
margin: 100px auto;
transform-origin: 0 0;
}
div:hover {
transform: rotate(160deg);
}
</style>
image.png
- skew(90deg) 傾斜函數 取值度數
- skewX()
- skewY()
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
transform: skew(0deg);
transition: 3s;
margin: 100px auto;
transform-origin: 0 0;
}
div:hover {
transform: skewY(60deg);
}
</style>
image.png
- scale(2) 縮放函數 取值 正數、負數和小數
- scaleX()
- scaleY()
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
transform: scale(1);
transition: 3s;
margin: 100px auto;
}
div:hover {
transform: scale(20);
}
</style>
- translate() 位移函數
- translateX()
- translateY()
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
transform: translate(0);
transition: 3s;
margin: 100px auto;
}
div:hover {
transform: translateY(200px);
}
</style>
- matrix(a,b,c,d,e,f) 矩陣函數
-
通過矩陣實現縮放
- x軸縮放 a=xa c=xc e=x*e;
- y軸縮放 b=yb d=yd f=y*f;
-
通過矩陣實現位移
- x軸位移: e=e+x
- y軸位移: f=f+y
-
通過矩陣實現傾斜
- x軸傾斜: c=Math.tan(xDeg/180*Math.PI)
- y軸傾斜: b=Math.tan(yDeg/180*Math.PI)
-
通過矩陣實現旋轉
- a=Math.cos(deg/180*Math.PI);
- b=Math.sin(deg/180*Math.PI);
- c=-Math.sin(deg/180*Math.PI);
- d=Math.cos(deg/180*Math.PI);
-
變換兼容IE9以下IE版本只能通過矩陣來實現
- filter: progid:DXImageTransform.Microsoft.Matrix( M11= 1, M12= 0, M21= 0 , M22=1,SizingMethod='auto expand');
- IE下的矩陣沒有E和F兩個參數 M11==a; M12==c; M21==b; M22==d
-
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
transition: 3s;
margin: 100px auto;
}
</style>
<body>
<div id="box">
</div>
<script>
window.onload = function () {
var box = document.getElementById("box");
box.onclick = function () {
var a = 1,
b = 0,
c = 0,
d = 1,
e = 0,
f = 0;
var deg = 60;
a = Math.cos(deg / 180 * Math.PI);
b = Math.sin(deg / 180 * Math.PI);
c = -Math.sin(deg / 180 * Math.PI);
d = Math.cos(deg / 180 * Math.PI);
box.style.transform = "matrix(" + a + "," + b + "," + c + "," + d + "," + e + "," + f + ")"
box.style.filter = "progid:DXImageTransform.Microsoft.Matrix( M11= " + a + ", M12= " + c + ", M21= " + b +
" , M22= " + d + ",SizingMethod='auto expand')";
}
}
</script>
</body>