sticky 元素只幸好父容器内运动,  职业天天都是触发移动的

  专门的工作每一天都以触发移动的,特将平日做事中常用的本领整理计算。

H五常用本领,h5技术

  工作每一日都是触发移动的,特将平日干活中常用的本事整理总括。

1、@support料定浏览器帮忙景况定义不一样样式

@一像素边框

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

1、@support料定浏览器援救境况定义分化体制

@一像素边框

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

贰、calc加减乘除运算

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

二、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); /* 方法二 */
}

叁、图片水平镜像翻转

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

四、自旋转运动

<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

四、自旋转运动

<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

五、扫光动画

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

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>

陆、超透事件css属性

.example {
    pointer-event: none;
}

6、超透事件css属性

.example {
    pointer-event: none;
}

七、加ontouchstart促使css:active生效

<body ontouchstart="">

七、加ontouchstart促使css:active生效

<body ontouchstart="">

捌、设置Chrome最小字体展现小于1二px

  字体:

  • ios玖+的css字体设置了-apple-system的话汉语会调用苹方,英文/数字则调San
    Francisco;San
    Francisco在ios/mac上尚未显式暴流露来(无法通过字体名字调用),须要经过那种艺术调用;

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

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

  • sans-serif在ios玖+下会调用苹方的普通话/英文/数字;

  • sans-serif在安卓下会调用系统的国语/英文字体,一般不要求其余设置;

  • 看来sans-serif在手提式有线电电话机系统下会调用暗中认可中文字体的粤语/英文/数字

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

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

  

8、设置Chrome最小字体彰显小于1二px

  字体:

  • ios九+的css字体设置了-apple-system的话粤语会调用苹方,英文/数字则调San
    Francisco;San
    Francisco在ios/mac上没有显式暴暴光来(不可能经过字体名字调用),须求通过那种方法调用;
  • 在不协理-apple-system的ios系统下会调用华文细黑的粤语/英文/数字;
  • sans-serif在非ios9+下会调用华文细黑的国语/英文/数字;
  • 公海赌船网址,sans-serif在ios玖+下会调用苹方的华语/英文/数字;
  • sans-serif在安卓下会调用系统的华语/英文字体,一般不要求别的装置;
  • 如上所述sans-serif在手提式有线电话机系统下会调用默许汉语字体的国语/英文/数字

  由此移动的字体reset,能够统壹安装为:

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

  

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

GoogleChrome暗中同意浏览器字体最小字体为:1二px,而大家手提式有线电话机端页面经常字体小于1贰px。 解决:右上角(自定义及调整)
→ 设置 → 展现高端设置 → 网络内容(自定义字体) →
最小字号(最小能够设置为陆px)

 

九、设置Chrome最小字体突显小于1二px

GoogleChrome暗许浏览器字体最小字体为:12px,而大家手提式有线电话机端页面平日字体小于12px。 解决:右上角(自定义及调整)
→ 设置 → 展现高等设置 → 互联网内容(自定义字体) →
最小字号(最小能够安装为陆px)

 

参考资料:

CSS三达成文字扫光效果

css三 animation属性完成图片扫光高亮效果 

10、设置Chrome最小字体显示小于1二px

//旋转警告
 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红米监测不到

 

参考资料:

CSS三贯彻文字扫光效果

css3animation属性实现图片扫光高亮效果 

 

http://www.bkjia.com/HTML5/1131323.htmlwww.bkjia.comtruehttp://www.bkjia.com/HTML5/1131323.htmlTechArticleH5常用技巧,h5技巧
专门的学业每日都以触发移动的,特将平时做事中常用的技能整理总计。
一、@support肯定浏览器支持意况定义不一样体裁 @一像素…

 

相关文章