你的位置:首页 > 网页设计

[网页设计]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)");

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