css
文章平均质量分 73
css技术记录、分享
星野睡不醒
这个作者很懒,什么都没留下…
展开
-
css格式规范stylelint在vscode使用教程(ctrl+s自动智能修复)
前言和 eslint 类似,stylelint 是 css 界的规范大师,标准配置内置了 170 余个配置项,对于有强迫症的人来说不得不用!每次去校验修复都要敲命令 fix 是非常不人性化的,我们追求的就是在编码期间就可以实时进行修复。相较于 eslint 在 vscode 有 eslint 插件可以进行自动修复,stylelint 也有相应的 stylelint 插件:官方网站:stylelint.io插件项目:stylelint / vscode-stylelint安装安装依赖在一个项目原创 2020-11-22 02:34:11 · 9342 阅读 · 0 评论 -
css在节点与伪类同时使用background-color/image多一毫米背景解决(解决多的一丝边框)
问题由于 css2 和 css3 对 background-color 及 background-image 的范围定义不同,当同时使用在伪类上时,会造成视觉上多一毫米(一丝)边框。↑ 可以看到当在节点本身和伪类上同时使用了 background-color 或 background-image 后,会造成如上结果。经测试,在 Safari 上没有此问题,在 2K 显示屏上并不明显,需要放大很多倍才能注意到。但在 1300 分辨率的中屏上多出来的一丝边框十分显眼。解决改用 animation 解原创 2020-11-21 17:48:29 · 572 阅读 · 0 评论 -
Vue2/Vue3中快捷使用data中的变量反映到css变量(scss也适用)
前言很多情况我们需要主题搭配,亦或是统一便捷的管理,css 变量是必不可少的。在 Vue 中将 data 中的变量反映到 css 变量上也是大势所趋。Vue2 用法在以前的 Vue2 中,我们通常使用计算属性反映 data 中的 变量到 css 中:<template> <div :style="cssVars"> <p class="text">测试文本</p> </div></template><原创 2020-11-10 01:08:23 · 13473 阅读 · 3 评论 -
纯css实现呲牙QQ表情checkbox切换按钮(要我一直笑吗)
前言之前在 QQ 上很流行的各种呲牙表情,曾看过这么一张图:我直接好家伙,那么我们来实现一下。实现HTML<div class="ciya-toggle-button"> <label for="toggle"> <input type="checkbox" id="toggle"> <span class="ciya-toggle-button-span"></span> <原创 2020-11-08 06:26:49 · 406 阅读 · 2 评论 -
使用transform:scale(1)巧妙模拟position:relative的定位性质
结论当父级没有明确指明 position 时,其子级的 position: absolute 将相对于第一个具有 position: relative 的父级元素定位。此时给予该没有指明 position 的元素以 position: relative 定位限制,他和 transform:scale(1) 是效果一致的。HTML <div class="relative"> <div class="parent"> <div原创 2020-11-01 05:51:53 · 3173 阅读 · 0 评论 -
css中animation动画的step-end/step-start参数作用
前言直入正题,很多人把 step-end / step-start 说的云里雾里的,其实作用非常简单。step-end / start有关他们的作用,先看一例:HTML <div class="box-origin"></div> <div class="box"></div> <div class="time"></div>CSSbody { height: 100vh; w原创 2020-10-04 02:02:14 · 4131 阅读 · 0 评论 -
sass/scss列表随机取值(列表内随机抽取一个元素值)
解决方案: @function sample($list) { @return nth($list, random(length($list))); }使用 nth() 对 list 进行取值,配合 random(Number) 随机产生一个 1 到 Number 的随机值(包括 1 和 Number),这里的 Number 即是 list 长度~...原创 2020-10-03 16:36:28 · 1625 阅读 · 0 评论 -
css中@keyframes动画0.1%的作用(类似骨架屏文字渐现效果演示)
效果实现HTML <div class="title">Animation Demo</div> SCSS.title { position: relative; display: inline-block; font-size: 15px; letter-spacing: 2px; padding: 0px 20px; color: transparent; line-height: 30px; a原创 2020-10-02 18:06:54 · 260 阅读 · 0 评论 -
sass/scss实现动态判断取精确px或倍数值的距离(类似bootstrap spacing)
前言在很多 css 样式库中都会提供一个 “间隔方法”,在 bootstrap 中如下:The classes are named using the format {property}{sides}-{size} for xs and {property}{sides}-{breakpoint}-{size} for sm, md, lg, and xl.例:.mt-0 { margin-top: 0 !important;}.ml-1 { margin-left: ($spac原创 2020-09-25 19:04:08 · 1807 阅读 · 0 评论 -
css多个!important保证新样式一定覆盖原样式方法
前言一般来说,我们在项目初期不会造成多 !important 的问题,而在陈年项目中,我们再去修改原代码的样式 css 文件已经不太现实,花费大量时间还容易造成未知的错乱。为了保证样式一定可控,也就是加入的新样式一定覆盖原样式,可以采用如下方法。解决先看一段例子:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" co原创 2020-09-19 00:50:41 · 10546 阅读 · 1 评论 -
css实现提示手机端用户进行横屏操作(带动画)
效果实现HTML<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link href="./style.css" rel='st原创 2020-09-05 01:24:20 · 931 阅读 · 0 评论 -
css使用zoom进行手机端页面大小动态适配
zoom在 css 中可以使用 zoom 对页面进行缩放,从而达到在手机端(横屏)情况下也能有近似于电脑端的体验。实现首先我们要动态适配,需要绑定 window.onresize 事件,为防止原来的事件受到影响,准备一个工具函数。utils.jsexport const setResize = (func) => { if (window.onresize) { const resize = window.onresize window.onresize = () =&g原创 2020-09-05 01:14:44 · 2996 阅读 · 0 评论 -
css实现方块滚动loading进度条(令人舒服)
效果实现HTML<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link type='text/css' rel='style原创 2020-09-04 18:45:27 · 1135 阅读 · 1 评论 -
css实现按钮触摸hover变色(三种方法)
页面基本节点写好:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link href="./style.css" r原创 2020-09-02 16:55:19 · 18783 阅读 · 2 评论 -
css实现动画的不同进出方向(transform-origin的作用)
效果实现transform-origin使用 transform-origin 可以控制动画的原点,也就是动画从哪个地方开始的(如果是旋转,那就是旋转的原点)MDN:transform-originHTML<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-widt原创 2020-09-02 02:34:11 · 1133 阅读 · 0 评论 -
css实现导航hover触摸显示动画线条(令人舒服)
效果实现HTML先准备一个干净的 HTML 页面,写好基本节点:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <原创 2020-08-28 02:08:50 · 1722 阅读 · 0 评论 -
css实现网页右下角点赞小卡片(令人舒服)
效果实现HTML先准备一个干净的 html 页面,写好节点:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <l原创 2020-08-31 04:17:05 · 671 阅读 · 0 评论 -
css实现触摸动画显示下拉菜单
效果实现HTML准备一个干净的 html 页面,写好基本的节点:<!DOCTYPE html><html lang="en"><link> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <原创 2020-08-26 01:17:04 · 3349 阅读 · 4 评论 -
css实现按钮hover触摸水平波纹与active点击涟漪波纹
效果触摸 hover 水平波纹:点击 active 涟漪波纹:准备HTML我们事先准备一个干净的 html 页面,引入 bootstrap.min.css 作为演示使用,再写好两个按钮:<!DOCTYPE html><html lang="en"><link> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initia原创 2020-08-25 03:10:46 · 1632 阅读 · 0 评论 -
使用svg实现input输入框边缘动画(令人舒服)
效果实现基本框架先做一个 div 用来放边缘动画的 svg 和 label + input :HTML <div class="text"> <div class="border"> <svg> ... </svg> </div> <label>请输入内容</label> <input value=""> </div>CSS/* 零边距原创 2020-08-23 03:09:22 · 2446 阅读 · 0 评论 -
css将transition双向过渡动画改为单向动画
双向动画<!DOCTYPE html><html><head><style> div{ width:100px; height:100px; background:pink; transition:width 2s;}div:hover{ width:300px;}</style></head><body><div></div></body>原创 2020-08-07 15:31:19 · 906 阅读 · 0 评论 -
mini-css-extract-plugin在vue-cli4中的使用(抽取css)
前言大家都知道 mini-css-extract-plugin 是用来替代 extract-text-webpack-plugin 的新一代产品,不光可以自定义抽取规则,还可以配合 webpack 的分块 splitChunks 配置自动抽取。使用在 vue-cli4 中 build 生产环境的时候默认使用了 mini-css-extract-plugin 抽取 css +optimize-cssnano-plugin 压缩 css,其默认配置如下: /* config.plugin('ext原创 2020-07-29 19:04:13 · 10466 阅读 · 0 评论