工作每天都是接触移动的，特将平时工作中常用的技巧整理总结。
一、@support断定浏览器支持情况定义不同样式@1像素边框
@supports (-webkit-backdrop-filter:blur(1px)) { .o2_mark i { border: 0 } .o2_mark i::before { content: ; 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; }
三、图片水平镜像翻转.example-1 { transform: scaleX(-1); /* 方法一 */ } .example-2 { transform: rotateY(180deg); /* 方法二 */ }
四、自旋转运动<div></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> <div>选择一本你喜欢的</div> </div>
六、超透事件css属性.example { pointer-event: none; }
七、加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
Google Chrome默认浏览器字体最小字体为：12px，而我们手机端页面常常字体小于12px。 解决：右上角（自定义及控制） → 设置 → 显示高级设置 → 网络内容（自定义字体） → 最小字号（最小可以设置为6px）
参考资料：
CSS3实现文字扫光效果
css3 animation属性实现图片扫光高亮效果
相关文章
精彩导读
热门资讯
关注我们
