CSS 一键黑白
-moz-filter:grayscale(100%); -ms-filter:grayscale(100%); -o-filter:grayscale(100%); filter:grayscale(100%); filter:url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter...
移动端滑动
按下:touchstart 移动:touchmove 松开:touchend 判断左右滑动: 按下记录X轴位置, 划动的过程中判断clientX大于还是小于即可判断左右滑动. 在滑动的过程中持续记录clientX的位置
思源黑体 Noto Sans SC
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Noto+Sans+SC:100,300,400,500,700,900"> font-family: "Noto Sans SC"; 静态资源库 https://cdn.baomitu.com/index/fonts
移动端input输入时页面放大
<meta content="yes" name="apple-mobile-web-app-capable"> <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
H5打电话发短信
<meta name="format-detection" content="telephone=yes"/> <a href="tel:13660007710">13660007710</a> <a href="sms:13660007710">13660007710</a>
根据元素宽度设定高度比例
要求：图片根据宽度设置高度。正方形 .shopimg { width: 100%; height: 0; padding-bottom: 100%; // 这个就是高的比例 position: relative; } .shopimg-info { position: absolute; top:0; left: 0; bottom: 0; right: 0; } .shopimg img { width: 100%; height: 100%; }
Vue v-html CSS样式没有
CSS抖音特效
第一种 #h1{ font-family: "微软雅黑,sans-serif"; font-size: 48px; font-weight: 500; width: 400px; height: 100px; } #h1 { animation: uk-text-shadow-glitch .65s cubic-bezier(1, -2.91, 0, 3.79) 0s infinite normal both running; } @keyframes uk-text-shadow-glitch { 0% { ...
静态页面实时刷新browser-sync
npm install -g browser-sync --files 路径是相对于运行该命令的项目（目录） browser-sync start --server --files "*" browser-sync start --server --files "css/*.css, *.html"