您的位置:68399皇家赌场 > 服务器租用 > www.68399.com:css3常用相关属性

www.68399.com:css3常用相关属性

发布时间:2019-05-06 08:16编辑:服务器租用浏览(159)

    transition过渡
    transition-duration:; 运动时间
    transition-delay:; 延迟时间
    transition-timing-function:; 运动款式
              ease 慢慢变慢 (暗中认可)
              linear 匀速
              ease-in 加速
              ease-out 减速
              ease-in-out 先加快后减速
              cubic-bezier 贝塞尔曲线(x一,y一,x贰,y2) 通过决定曲线市价来改造运动功用

    表单个性与函数
    • 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>
    

    壹、transiition过渡:样式改动就能奉行transition

    注:二种式同时展开连接(须求异步过渡 则需在产生时间后再加一个参数:延迟时间)

    -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);

    (1)格式:transiition:1s width linear,2s 1s height;**

    例:transition:1s width,2s 1s height,3s 3s background;

    transform 将成分进行二D或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>
    

    www.68399.com 1

    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>
    

    www.68399.com 2

    image.png

    • scale(贰) 缩放函数 取值 正数、负数和小数
      • 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);
      • 转换包容IE九以下IE版本只可以通过矩阵来兑现

        • filter: progid:DXImageTransform.Microsoft.Matrix( M11= 1, M12= 0, M21= 0 , M22=1,SizingMethod='auto expand');
        • IE下的矩阵未有E和F五个参数 M1一==a; M1二==c; M二一==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>
    

    (2)参数:

    transitionend事件(transition停止后触发的事件)
    注意:一.每变动成分2个体制 会触发1遍tranasitionend

    • transition-property  要活动的样式  (all || [attr] || none)
    • transition-duration 运动时间

    • transition-delay 延迟时间

    • transition-timing-function 运动款式

    在webkit内核中写法:
    obj.addEventListener('WebkitTransitionEnd',fn,false);
    在正式下写法:
    obj.addEventListener('transitionend',fn,false);

    ease:(渐渐变慢)暗中同意值

    -transform:; 变换
    rotate(30deg) 旋转 围绕成分基本点旋转30度
    skewX(四伍deg) 斜切 沿X轴向左拉伸四5度
    skewY(四5deg) 斜切 沿Y轴向上拉伸四5度
    归咎写法 skew(四5deg,45deg)
    scaleX(贰) 缩放 由主旨点沿X轴向外扩充二倍
    scaleY(0.伍) 缩放 由主旨点沿Y轴向内裁减二倍
    综合写法 scale(二,0.伍)
    translateX(十0px) 位移 从左往右移动100px
    translateY(-100px) 位移 从下往上移动拾0px
    综合写法 translate(十0px,-100px)

    linear:(匀速)

    注:transform 实践顺序 -- 后写先试行!

    ease-in:(加速)

    例:-webkit-transform:translateX(100px) scale(0.5); 与 -webkit-transform:scale(0.5) translateX(100px);

    ease-out:(减速)

      第一条样式先缩放0.伍倍 再实施位移100px
      第3条样式先试行活动十0px 再缩放0.5倍 那时100px会趁机缩放被缩放成50px

    ease-in-out:(先加快后减速)

    -transform-origin:; 转变基点
    其值可为像素也可为关键字

    cubic-bezier 贝塞尔曲线( x壹, y一, x二, y2)

    -transform:matrix(); 矩阵
    旋转 位移 缩放 斜切 都以透过matrix封装完成

    (三)过渡达成事件

    matrix(1,0,0,1,0,0) 标准下 默认6个参数
    (

    • Webkit内核: obj.addEventListener('webkitTransitionEnd',function(){

    matrix(a,b,c,d,e,f);

     

    缩放
    a,c,e表示X轴缩放 X轴缩放:a:a*缩放倍数 c:c*缩放倍数 e:e*缩放倍数 (e/c默以为0);
    b,d,f表示Y轴缩放 Y轴缩放:b:b*缩放倍数 d:d*缩放倍数 f:f*缩放倍数 (f/d默以为0);

    • },false);
    • firefox: obj.addEventListener('transitionend',function(){

    斜切
    c同时表示X轴斜切 c=Math.tan(Deg/180*Math*PI)
    b同时表示Y轴斜切 b=Math.tan(Deg/180*Math*PI)

     

    位移
    e:X轴的位移 位移的长短e x;(e,f暗许值为0)
    f:Y轴的位移 位移的尺寸f y;

    • },false); 

    旋转
    a/b/c/d共同决定旋转
    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)
    )
    包容IE陆及以上 缺乏位移贰个参数
    progid:DXImageTransform.Microsoft.Matrix( M11= 1, M12= 0, M21= 0 , M22=1,SizingMethod='auto expand');
    Matrix( M11= a, M12= c, M21= b , M22=d,SizingMethod='auto expand');
    (

    2、transform2D

    留意 IE下旋转不是围绕成分基本点旋转
    消除方案:调整成分left/top;
    left = (父级offsetWidth-本身offsetWidth)/2
    top = (父级offsetHeight-本身offsetHeight)/2
    )

    (1)格式:transiition:1s width linear,2s 1s height;**

     

    **(2)参数:**


    • rotate() 旋转函数 取值度数

    deg 度数

    • skew() 倾斜函数 取值度数

    skewX()

    skewY()

    • scale() 缩放函数 取值 正数、负数和小数

    scaleX()

    scaleY()

    • translate() 位移函数

    translateX()

    translateY()

    • transform-origin 旋转的基本点(left top左上角)

    **(3)注意:**Transform 实施各种难题 — 后写先进行

    (四)matrix(a,b,c,d,e,f) 矩阵函数

      默认:matrix(1,0,0,1,0,0)

    • 因此矩阵完成缩放

    x轴缩放 a=x*a c=x*c e=x*e;

    本文由68399皇家赌场发布于服务器租用,转载请注明出处:www.68399.com:css3常用相关属性

    关键词: 68399皇家赌场 HTML/CSS Web前端 c