美文网首页
关于H5(2)

关于H5(2)

作者: 洋仔幕落幕合 | 来源:发表于2017-01-16 22:39 被阅读0次

    有关H5的CSS小效果:
    1:背景图生效位置的三种写法:

    1:background-origin:border-box;     边框生效位置
    2:background-origin:content-box;    内容生效位置
    3:background-origin:padding-box;    默认位置
    

    2:文本开切位置的写法:

    (写文本开切位置时,-webkit-background-clip:text;  color:rgba(0,0,0,0) 要都写才可以)
      -webkit-background-clip:text;
       color:rgba(0,0,0,0);     配合使用
    

    3:倒影的写法:-webkit-box-reflect:below 10px -webkit-linear-gradient(rgba(0,0,0,0) 40%,rgba(0,0,0,1));

        1:below   表示为:向下
        2:above   表示为:向上
        3:left  表示为:向左
        4:right 表示为:向右
        5:10px    表示为:间距(这个值根据自己需求随便定义)
    

    4:滤镜的写法:

          -webkit-filter:blur(0px);
    

    5:块的缩放大小写法:

         resize:both;
    

    6:缩放大小完整写法:

        resize:both; overflow:hidden;
    

    7:文本排序的写法:

      direction:rtl; unicode-bidi:bidi-override;
    

    8:变形的写法:

    1:transform:
        a:skew(X轴值,Y轴值)     倾斜度数    单位使用(deg)
        b:scale(X轴值,Y轴值)        缩放比例
        c:translate(X轴值,Y轴值)    平移像素    单位使用(px)
        d:rotate                    旋转度数    单位使用(deg)
    2:变形样式是从后往前读
        transform:skew(30deg,10deg) scale(2,2) translate(100px,20px) rotate(45deg);
    

    9:旋转控制中心点的写法:

    transform-origin:X轴值Y轴值;
            1:left
            2:Right
            3:top
            4:bottom
              20px 20px
    

    10:景深的写法(用来配合3D效果)

    transform:perspective(800px);
       括号里的值为800-1200之间值时效果最好。
    perspective:800px;
    

    11:3d的写法:(注意:当写3D效果时要加给父级,3D效果是不可以继承的)

    transform-style:preserver-3d;
    

    12:物体的变形写法:

    transform:
             1:scale       X轴值  Y轴值 
             2:rotate      X轴值  Y轴值  Z轴值
             3:translate   X轴值  Y轴值  Z轴值
             4:skew        X轴值  Y轴值
    

    13:判断运动结束后的监听事件:

    transitionend(要配合事件绑定使用)
    obj.addEventListener('transitionend',fn,false);
    

    14: H5里有关滚动条的写法 pageX pageY获取鼠标位置自带滚动距离

      1:表单:
          1:email
          2:number
          3:color
          4:range
          5:date
          6:week
          7:month
          8:url
          9:tel
          10:search
       2:表单新增属性
          1:required         必填
          2:pattern          里面放正则
          3:step             一次加几个
          4:placeholder      提示文字
          5:autofocus       自动获取焦点
          6:autocomplete    
              on            开启提示文字
              off          关闭提示文字
          7:title           改变提示框提示文字
    

    15:序列化:

    1:{a:1,b:5} 不标准格式                                   
    2:序列化      变成标准格式json
        JSON.stringify(json)
    

    16:反序列化

    1:JSON.parse(json)  把字符串转成正常json格式
    
    交互解析字符串一共三种方法
        1:parse
        2:eval
        3:new Function('return abc');
    

    相关文章

      网友评论

          本文标题:关于H5(2)

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