工作每天还是沾移动的。sticky 元素只能于父容器内移动。

  工作每天还是触发移动的,特将平时工作面临常用的技艺整理总结。

H5常因此技术,h5技巧

  工作每天都是触发移动的,特将平时做事被常用之技艺整理总结。

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

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

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

五、扫光动画

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

六、超透事件css属性

.example {
    pointer-event: none;
}

七、加ontouchstart促使css:active生效

<body ontouchstart="">

七、加ontouchstart促使css:active生效

<body ontouchstart="">

八、设置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;

  

八、设置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;

  

九、设置Chrome最小书显示小于12px

Google
Chrome默认浏览器字体最小书为:12px,而我们手机端页面时字体小于12px。 解决:右侧上较量(自定义跟控制)
→ 设置 → 显示高级设置 → 网络内容(自定义字体) →
最小字号(最小好设置也6px)

 

九、设置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属性实现图片扫光高亮效果 

 

http://www.bkjia.com/HTML5/1131323.htmlwww.bkjia.comtruehttp://www.bkjia.com/HTML5/1131323.htmlTechArticleH5常用技巧,h5技巧
工作每天都是点移动的,特将平时做事中常用之技术整理总结。
一、@support断定浏览器支持情况定义不同体制 @1像素…

 

相关文章