随笔分类 - css
摘要：字体文件的引用和压缩 一、项目需求 根据甲方要求，使用UI中指定字体 移动端默认显示系统默认字体，非系统默认字体需要自行引入字体包 问题：直接使用字体包过大，字体包通常在几MB，严重拖累页面加载速度 分析： 文本内容为固定内容，不需要更新 文本内容大多为常用文字，大多文字用不上 将需要的文字得该字体
阅读全文
摘要：解决移动端 Retina 屏幕 1px 边框问题 一、概念 设备独立像素 = CSS 像素 = 逻辑像素，DIP，单位为px。 设备像素 = 物理像素，分辨率，单位为pt。 DPR（ 设备像素比，devicePixelRatio）= 物理像素 / 逻辑像素。 二、造成边框变粗的原因 因为css中的1
阅读全文
摘要：问题 chrome 浏览器中，表单会默认填充样式： input:-internal-autofill-selected { appearance: menulist-button; background-image: none !important; background-color: -inter
阅读全文
摘要：_mixin.scss //keyframes @mixin keyframes($name){ @-webkit-keyframes #{$name} {@content}; @-moz-keyframes #{$name} {@content}; @-o-keyframes #{$name} {
阅读全文
摘要：sass笔记 官网 一、配置自动编译 安装 npm install –g sass webstorm配置 file—>settings—>Tools—>File Watcher—>+ scss vscode配置 Live Sass Compiler 插件 点击底部 "Watch Sass" 按钮 二
阅读全文
摘要：less笔记 官网 一、配置自动编译 安装 npm install –g less webstorm配置 file—>settings—>Tools—>File Watcher—>+ less vscode配置 Easy LESS 插件 settings.json "less.compile": {
阅读全文
摘要：mask 一、现状 Firefox，Chrome以及移动端等都已经全线支持，尤其Firefox浏览器，从版本53开始，已经全面支持了CSS3 mask属性. 二、Mask 的原理 蒙板可以是 CSS3 渐变或者半透明的PNG图片，蒙板元素的alpha值为0的时候会覆盖下面的元素，为1的时候会完全显示
阅读全文
摘要：网站 CSS 的灵感：https://chokcoco.github.io/CSS-Inspiration/#/ 常用样式和使用技巧：https://qishaoxuan.github.io/css_tricks/ 动画：https://angrytools.com/css/animation/ 渐
阅读全文
摘要：CSS常见技巧汇总 1、设置input 取消input的边框 input{ border: none; outline: none; } 设置input的placeholder的样式 input::-webkit-input-placeholder { /* Chrome/Opera/Safari
阅读全文
摘要：隐藏滚动条或更改滚动条样式 滚动条隐藏 /*chrome 和Safari*/ .scroll-container::-webkit-scrollbar { display: none; /* width: 0; */ } .scroll-container { -ms-overflow-style:
阅读全文
摘要：通过rel=preload进行内容预加载 1. 内容预加载的好处 <link> 元素的 rel 属性的属性值 preload 能够让你在你的 HTML 页面中 <head> 元素内部书写一些声明式的资源获取请求， 可以指明哪些资源是在页面加载完成后即刻需要的。对于这种即刻需要的资源，你可能希望在页面
阅读全文
摘要：writing-mode: vertical-lr;/*从左向右 从右向左是 writing-mode: vertical-rl;*/ writing-mode: tb-lr;/*IE浏览器的从左向右 从右向左是 writing-mode: tb-rl；*/
阅读全文
摘要：transition 需要触发生效 必须有个开始值和结束值。就是对同一个元素，有两个不同样式。 如果一开始这两个样式就可以获取该元素（第二个直接覆盖第一个），就没有过度。 如果第二样式的实现依赖于某种改变才会获取该元素，就会有过度。 触发分为： 伪类触发，比如 :hover : focus :che
阅读全文
摘要：项目需求，鼠标变成小铲子挖宝。。。小铲子应该是点击左下角挖宝藏 谷歌、火狐鼠标光标在左上角 cursor：url("自定义图片路径/img.ico") x y,pointer; //x、y为距离左上角的距离，即光标位置 ie中发现加上x y,鼠标样式直接没有效果。。。项目过程中自定义鼠标样式发现光标
阅读全文
摘要：妙用transform-origin， 控制动画方向 一、需求 将下面这个动画的下划线效果，从左进入，右边离开修改为从上方进入，下方离开，需纯CSS实现。 二、还原效果 正常而言，我们一个 hover 效果，可能就是从哪里来，回哪里去，大部分的应该是这样的： CodePen Demo -- 从哪里来
阅读全文
摘要：/* webkit, opera, IE9 （谷歌浏览器）*/ ::selection { background:lightblue; color:#000; } /* mozilla firefox（火狐浏览器） */ ::-moz-selection { background:lightblue
阅读全文
摘要：css 实现上右下左三角 右三角 border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-right: 6px solid transparent; border-left: 8px solid
阅读全文
摘要：字体渐变 代码： /*方法1 left top, right bottom x1 y1, x2 y2 */ .txt1{ color:#ac5d9a; -webkit-background-clip: text; -webkit-text-fill-color: transparent; backg
阅读全文
摘要：场景：在移动端上，有事件监听的元素被点击的时候会被高亮显示。 -webkit-tap-highlight-color属性就是用来设置被点击时背景框的颜色，如果想去掉背景框则可以将rgba中的alpha值设为0即可： -webkit-tap-highlight-color:rgba(0,0,0,0);
阅读全文
摘要：.sec { animation: startMask .8s steps(29) both 1; } @keyframes startMask { feom { -webkit-mask-position:0 0% ; } to { -webkit-mask-position:0 100% ; }
阅读全文
