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

read more..

移动端滑动

按下:touchstart 移动:touchmove 松开:touchend 判断左右滑动: 按下记录X轴位置, 划动的过程中判断clientX大于还是小于即可判断左右滑动. 在滑动的过程中持续记录clientX的位置

read more..

思源黑体 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

read more..

H5打电话发短信

<meta name="format-detection" content="telephone=yes"/> <a href="tel:13660007710">13660007710</a> <a href="sms:13660007710">13660007710</a>

read more..

根据元素宽度设定高度比例

要求:图片根据宽度设置高度。正方形 .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%; }

read more..

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% { ...

read more..

CSS

渐变背景 background: linear-gradient(direction,color-stop1,color-stop2,...); 第一个参数是方向,后面的是颜色值 direction: 类型1:to right //向右渐变,除此之外还有上下左右... 类型2:to right top //向右上渐变....[同理] 类型3:45deg //直接给个角度 animation动画 <style> // 设置动画 @keyframes move { ...

read more..