css3常用相关属性

作者: 饥人谷_米弥轮 | 来源:发表于2017-11-29 18:01 被阅读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);
    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>

    相关文章

      网友评论

        本文标题:css3常用相关属性

        本文链接:https://www.haomeiwen.com/subject/dxiubxtx.html