css3常用相关属性
2017-11-29 本文已影响14人
饥人谷_米弥轮
表单特性与函数
- 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>
