公海赌船网址sticky 成分只可以在父容器内移动,特将平日工作中常用的技艺整理总计

叁 、图片水平镜像翻转

.example-1 {
    transform: scaleX(-1); /* 方法一 */
}
.example-2 {
    transform: rotateY(180deg); /* 方法二 */
}

9、设置Chrome最小字体展现小于12px

谷歌(Google)Chrome暗许浏览器字体最小字体为:12px,而我们手提式有线电话机端页面平日字体小于12px。 解决:右上角(自定义及控制)
→ 设置 → 展现高级设置 → 互联网内容(自定义字体) →
最小字号(最小能够设置为6px)

 

参考资料:

CSS3落到实处文字扫光效果

css3 animation属性达成图片扫光高亮效果 

十 、设置Chrome最小字体突显小于12px

//旋转警告
 var warnWp = document.querySelector(".warn_wp");
 function orientationChange() {
    switch(window.orientation) {
      case 0: 
            warnWp.style.display = "none";
            break;
      case -90: 
            warnWp.style.display = "block";
            break;
      case 90:   
            warnWp.style.display = "block";
            break;
    };
  };
  window.addEventListener("orientationchange",function(){
    orientationChange();
  },false);

//发现感觉android红米监测不到

 

参考资料:

CSS3贯彻文字扫光效果

css3
animation属性完毕图片扫光高亮效果 

H5常用技术,h5技巧

  工作每一日都以触发移动的,特将平时干活中常用的技巧整理总括。

伍 、扫光动画

<style>
  .sample{
    background-color: #0E1326;
    padding-top:30px;
    overflow: hidden;
  }
  .blank_text{
    position: relative;
    width:200px;
    margin:20px auto;
    color: #fff;
    line-height: 1;
    font-size: 50px;
    font-size: 0.74074rem;
    text-align: center;
    overflow: hidden;
    font-family: "icomoon";
  }
.blank_text:after{
    width: 300%;
    height: 100%;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    background: -webkit-gradient(linear, left top, right top, color-stop(0, rgba(15,20,40, 0.7)), color-stop(0.4, rgba(15,20,40, 0.7)), color-stop(0.5, rgba(15,20,40, 0)), color-stop(0.6, rgba(15,20,40, 0.7)), color-stop(1, rgba(15,20,40, 0.7)));
    -webkit-animation: slide ease-in-out 2s infinite;  
}
@-webkit-keyframes slide{
    0%{-webkit-transform:translateX(-66.666%);}
    100%{-webkit-transform:translateX(0);}
}
</style>

<div class="sample">

    <div class="blank_text">选择一本你喜欢的</div>
</div>

二 、calc加减乘除运算

.col-3 {
    width: calc(100%-10px);
    height: 200px;
}
.clo-3 li {
    float: left;
    width: calc(100% / 3); /* 33.3% */
    height: 200px;
}

  工作每一日都以接触移动的,特将平时做事中常用的技能整理总括。

八 、设置Chrome最小字体显示小于12px

  字体:

  • ios9+的css字体设置了-apple-system的话中文会调用苹方,英文/数字则调San
    弗朗西斯科;San
    Francisco在ios/mac上并未显式暴表露来(无法透过字体名字调用),需求经过那种方法调用;
  • 在不帮忙-apple-system的ios系统下会调用华文细黑的中文/英文/数字;
  • sans-serif在非ios9+下会调用华文细黑的普通话/英文/数字;
  • sans-serif在ios9+下会调用苹方的国语/英文/数字;
  • sans-serif在安卓下会调用系统的华语/英文字体,一般不需求任何装置;
  • 因此看来sans-serif在四弟大系统下会调用默许中文字体的华语/英文/数字

  因此移动的字体reset,能够统一设置为:

font-family: -apple-system,Helvetica,sans-serif;

  

九 、设置Chrome最小字体展现小于12px

GoogleChrome默许浏览器字体最小字体为:12px,而笔者辈手提式有线电话机端页面日常字体小于12px。 解决:右上角(自定义及控制)
→ 设置 → 展现高级设置 → 互联网内容(自定义字体) →
最小字号(最小能够安装为6px)

 

陆 、超透事件css属性

.example {
    pointer-event: none;
}

八 、设置Chrome最小字体彰显小于12px

  字体:

  • ios9+的css字体设置了-apple-system的话汉语会调用苹方,英文/数字则调San
    Francisco;San
    Francisco在ios/mac上尚未显式暴暴露来(不能够经过字体名字调用),必要通过那种措施调用;

  • 在不支持-apple-system的ios系统下会调用华文细黑的国语/英文/数字;

  • sans-serif在非ios9+下会调用华文细黑的国语/英文/数字;

  • sans-serif在ios9+下会调用苹方的华语/英文/数字;

  • sans-serif在安卓下会调用系统的普通话/英文字体,一般不供给此外设置;

  • 如上所述sans-serif在手提式有线电话机系统下会调用暗中同意汉语字体的华语/英文/数字

  由此移动的字体reset,能够统一设置为:

font-family: -apple-system,Helvetica,sans-serif;

  

 

http://www.bkjia.com/HTML5/1131323.htmlwww.bkjia.comtruehttp://www.bkjia.com/HTML5/1131323.htmlTechArticleH5常用技巧,h5技巧
工作每日都以触发移动的,特将平常做事中常用的技巧整理总括。
一 、@support断定浏览器帮助情形定义差异体裁 @1像素…

肆 、自旋转运动

<div class="example"></div>
.example {
    position: absolute;
    top: 200px;
    left: 200px;
    width: 100px;
    height: 100px;
    border: 2px solid #000;
    border-radius: 50%;
    animation: autogyRation 4s linear infinite;
}

@keyframes autogyRation {
    from {
        transform: rotate(0deg) translate(-60px) rotate(0deg);
    }
    to {
        transform: rotate(360deg) translate(-60deg) rotate(-360deg);
    }
}

案例呈现:demo

一 、@support断定浏览器支持处境定义不一致样式

@1像素边框

@supports (-webkit-backdrop-filter:blur(1px)) {
    .o2_mark i {
        border: 0
    }

    .o2_mark i::before {
        content: "\20";
        border: 1px solid #666;
        position: absolute;
        left: 0;
        top: 0;
        width: 200%;
        height: 200%;
        -webkit-transform-origin: left top;
        -webkit-transform: scale(.5);
        -webkit-box-sizing: border-box;
    }
}

@sticky吸顶优化体验

sticky使用条件:
sticky 元素只可以在父容器内活动
sticky 成分父容器不可能含有overflow:hidden 和 overflow:auto

.wx618_tabs{
 position:relative;
 &.fixed ul{
  position:fixed;
  top:0;
  left:0;
  width:100%;
 }
}
//支持sticty属性,运行
@suports (position:-webkit-sticky){
 .wx618_tabs{
  position:-webkit-sticky;
  top:0;
  &.fixed ul{position:relative}
 }
}

@JavaScript中提供了window.CSS.supports方法

// JavaScript中提供了window.CSS.supports方法
// 第一种方法
var supportsFlex = CSS.supports("display", "flex");
// 第二种方法
var supportsFlexAndAppearance = CSS.supports("(display: flex) and (-webkit-appearance: caret)");

陆 、超透事件css属性

.example {
    pointer-event: none;
}

5、扫光动画

<style>
  .sample{
    background-color: #0E1326;
    padding-top:30px;
    overflow: hidden;
  }
  .blank_text{
    position: relative;
    width:200px;
    margin:20px auto;
    color: #fff;
    line-height: 1;
    font-size: 50px;
    font-size: 0.74074rem;
    text-align: center;
    overflow: hidden;
    font-family: "icomoon";
  }
.blank_text:after{
    width: 300%;
    height: 100%;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    background: -webkit-gradient(linear, left top, right top, color-stop(0, rgba(15,20,40, 0.7)), color-stop(0.4, rgba(15,20,40, 0.7)), color-stop(0.5, rgba(15,20,40, 0)), color-stop(0.6, rgba(15,20,40, 0.7)), color-stop(1, rgba(15,20,40, 0.7)));
    -webkit-animation: slide ease-in-out 2s infinite;  
}
@-webkit-keyframes slide{
    0%{-webkit-transform:translateX(-66.666%);}
    100%{-webkit-transform:translateX(0);}
}
</style>

<div class="sample">

    <div class="blank_text">选择一本你喜欢的</div>
</div>

 

④ 、自旋转运动

<div class="example"></div>
.example {
    position: absolute;
    top: 200px;
    left: 200px;
    width: 100px;
    height: 100px;
    border: 2px solid #000;
    border-radius: 50%;
    animation: autogyRation 4s linear infinite;
}

@keyframes autogyRation {
    from {
        transform: rotate(0deg) translate(-60px) rotate(0deg);
    }
    to {
        transform: rotate(360deg) translate(-60deg) rotate(-360deg);
    }
}

案例显示:demo

二 、calc加减乘除运算

.col-3 {
    width: calc(100%-10px);
    height: 200px;
}
.clo-3 li {
    float: left;
    width: calc(100% / 3); /* 33.3% */
    height: 200px;
}

叁 、图片水平镜像翻转

.example-1 {
    transform: scaleX(-1); /* 方法一 */
}
.example-2 {
    transform: rotateY(180deg); /* 方法二 */
}

七、加ontouchstart促使css:active生效

<body ontouchstart="">

七、加ontouchstart促使css:active生效

<body ontouchstart="">

一 、@support断定浏览器补助意况定义不一致样式

@1像素边框

@supports (-webkit-backdrop-filter:blur(1px)) {
    .o2_mark i {
        border: 0
    }

    .o2_mark i::before {
        content: "\20";
        border: 1px solid #666;
        position: absolute;
        left: 0;
        top: 0;
        width: 200%;
        height: 200%;
        -webkit-transform-origin: left top;
        -webkit-transform: scale(.5);
        -webkit-box-sizing: border-box;
    }
}

@sticky吸顶优化体验

sticky使用规范:
sticky 成分只可以在父容器内运动
sticky 成分父容器无法含有overflow:hidden 和 overflow:auto

.wx618_tabs{
    position:relative;
    &.fixed ul{
        position:fixed;
        top:0;
        left:0;
        width:100%;
    }
}
//支持sticty属性,运行
@suports (position:-webkit-sticky){
    .wx618_tabs{
        position:-webkit-sticky;
        top:0;
        &.fixed ul{position:relative}
    }
}

@JavaScript中提供了window.CSS.supports方法

// JavaScript中提供了window.CSS.supports方法
// 第一种方法
var supportsFlex = CSS.supports("display", "flex");
// 第二种方法
var supportsFlexAndAppearance = CSS.supports("(display: flex) and (-webkit-appearance: caret)");

相关文章