![](https://img-blog.csdnimg.cn/20200423152433287.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
CSS
CSS、SCSS
十月ooOO
精通 JS/CSS/HTML,做点有用的东西。
展开
-
css 用多个阴影做出光斑投影的效果 box-shadow
你首先需要知道的一点是box-shadow可以接收多个值,也就是可以设置多个阴影,这样就可以做一个类似光斑投影的效果。原创 2023-12-29 17:07:52 · 946 阅读 · 0 评论 -
css animation 动画如何保留动画结束后的状态 animation-fill-mode: forwards
在做一个弹窗动画提示的时候遇到了一个问题:在动画结束的时候,移除元素时会有闪一下的问题,像这样:可以看到结尾的时候已经是 hidden 的状态了,按理说应该不会再显示原来的状态。原创 2023-11-20 20:59:45 · 1225 阅读 · 0 评论 -
vue 如何适配 web 夜间模式、暗黑模式、黑色主题 prefers-color-scheme: dark
自苹果推出暗黑模式之后,Web 也有了对应的暗黑模式,默认情况下 Web 的暗黑模式是跟随系统的。你只需要将暗黑模式的样式写到下面这样的媒体选择器中就可以了。原创 2023-08-18 23:26:04 · 914 阅读 · 0 评论 -
做一个比较有意思的条目选择动画 css
原理就是将母元素设置成 `relative` 然后在四边放四个 `absolute` 的色块。初始状态是`opacity` 为 `0` 的,当母元素 `hover` 的时候,将四个边角色块设置 `opacity: 1` 并偏移指定量。原创 2023-06-10 14:02:25 · 130 阅读 · 0 评论 -
做了个 web 的键盘测试工具,MagicKeyboard2
最近买了个 MagicKeyboard2,买来得测试一下键盘是不是正常,下个软件测试有点多余,就从网上找了个 web 版的测试页面,但它的界面实在是一言难尽。在线地址: https://kylebing.cn/tools/keyboard/就想自己写一个极其仿真的键盘测试界面,下午+晚上 完成。不愧我这扎实的 HTML + CSS 基础。原创 2022-10-29 11:43:35 · 3317 阅读 · 0 评论 -
css transform matrix3d各个数字表示什么意思
【代码】css transform matrix3d各个数字表示什么意思。原创 2022-09-30 16:30:34 · 546 阅读 · 0 评论 -
精简网页中的字体文件体积大小 由 400kb 到 29kb css vue js font
网页中用到了一些特殊字体,将其字义到了 css 中,但由于字体体积太大,所以想精简一下。确定这个字体只用到了数字和字母,就可以将字体中其它的字符删除,来达到精简字体体积的目的。原创 2022-09-23 22:49:50 · 600 阅读 · 0 评论 -
如何调试网页的暗黑模式 theme dark
之前我一直用改变系统颜色样式的方式来调试 web 页面的,今天突然发现完全不需要, Chrome 调试工具里自带这个功能。原创 2022-08-26 17:42:21 · 239 阅读 · 0 评论 -
动画图标,如何实现页面中图标小动画,动画按钮 CSS JS
最近在看线上服务器的时候,无意间发现一个好玩的东西,看下图:一个是阿里云的动画一个是腾讯云的动画。原创 2022-08-19 17:49:44 · 1070 阅读 · 0 评论 -
CSS 如何做一个比较真实有感觉的阴影效果
效果如图:你需要了解的: 这个样式可以同时添加多个阴影,以 间隔即可本例中的阴影有两个,一个向左偏移一个向右偏移在线实例:原创 2022-07-12 13:55:40 · 670 阅读 · 0 评论 -
vue node_modules\node-sass: Command failed. 安装失败,如何解决,使用 sass 替换
vue node-sass 安装失败,如何解决,使用 sass 替换问题package.json"node-sass": "^xx.xx.xx","sass-loader": "^xx.xx.xx",vue 项目中,安装依赖的时候出现错误,如下:error D:\proj\cscec-8bur-vms\dashboard-vuejs\node_modules\node-sass: Command failed.Exit code: 1Command: node scripts/build.原创 2022-03-28 09:46:08 · 8504 阅读 · 0 评论 -
CSS grid 布局
CSS grid 布局 display: grid; grid-template-columns: 20% 60% 20%; grid-template-rows: 20% 20% 20% 20% 20%; grid-gap: 10px 10px;原创 2022-03-25 13:57:16 · 655 阅读 · 0 评论 -
做一个旋转的 css loading 动画,css 扇形
做一个旋转的 css loading 动画,css 扇形上效果图上代码:<template> <div class="loading-circle"> <div class="lv1"></div> <div class="lv2"></div> <div class="lv3"></div> </div></templa原创 2022-03-19 10:22:17 · 694 阅读 · 0 评论 -
chrome 谷歌浏览器 手动进入暗黑模式,调试暗黑模式样式 windows 10
目前谷歌浏览器已经支持的支持,也就是说浏览器会自动读取系统的颜色模式:白色、暗黑,然后切换对应的 css 样式想让自己的页面适配暗黑模式,只需要写一个的媒体选择器即可,里面的样式就是系统在进入暗黑模式后调用的样式。看下例子,这个工具中我写了两个样式方案,一个亮色,一个暗黑模式,看下对比。原创 2022-01-22 09:55:44 · 2726 阅读 · 1 评论 -
vue scss 如何加载字体 font
vue scss 如何加载字体 font以 ~@/ 开头就可以了以相对路径 ../ 的方式是不可以的@font-face { font-family: "Impact"; src: url("~@/assets/font/ImpactPureNumber.ttf");}@font-face { font-family: "LLPixel"; src: url("~@/assets/font/LLPixel_only_Letter.ttf");}...原创 2021-11-05 15:28:01 · 1348 阅读 · 0 评论 -
谷歌浏览器 Chrome 如何自定义滚动条样式 -webkit-scrollbar
谷歌浏览器 Chrome 如何自定义滚动条样式 -webkit-scrollbar其实,谷歌浏览器中显示的滚动条是可以自定义的,可以定义它的滑道样式,拖动块样式。滚动条的设置是通过伪类// 滚动条整体::-webkit-scrollbar { z-index: 50; width: 10px; height: 3px;}// 滚动条滑道::-webkit-scrollbar-track { background-color: rgba(0, 0, 0, 0)原创 2021-10-22 16:57:19 · 4162 阅读 · 0 评论 -
错误解决:vue Syntax Error: Error: PostCSS received undefined instead of CSS string
错误解决:vue Syntax Error: Error: PostCSS received undefined instead of CSS string本来项目昨天还好好的,今天打开却发现提示这玩意,启动不起来。WTF?找了半天答案,终于自己试出来了。解决办法如果上次运行是正确的,就不要去动代码,可能是环境的问题。将项目下的 node_modules 文件夹删除,然后重新 npm i ,如果速度慢,可以使用 cnpm i然后就好了 -.-lll...原创 2021-07-21 09:24:35 · 1033 阅读 · 0 评论 -
scss 提示 SassError: There is no module with the namespace “math“.
scss 提示 SassError: There is no module with the namespace “math”.参考问题: https://stackoverflow.com/questions/61330432/sasserror-there-is-no-module-with-the-namespace-math在使用 scss 的时候,使用了一些 math 上的方法,比如除以 math.div() math.floor 等,就会出现这样的错误SassError: There原创 2021-07-19 22:12:33 · 3585 阅读 · 4 评论 -
手机端 :active 样式不起作用的原因,如何解决
手机端 :active 样式不起作用的原因,如何解决一、原因很多时候我们在 PC 端使用很好的 :active 样式,在移动端却没有效果。原因是::active 只有在 dom 元素被点击时,有 click 事件才会有的状态。除了 PC 端的 click 事件,移动端有 touch 事件,并且 touch 相关事件的优先级要高于 click 事件,如果 touch 事件被取消,就不会有 click 事件,所以才会产生移动端点击时没有 :active样式的原因。MDN 相关说明,查看 Event原创 2020-12-02 09:38:42 · 1777 阅读 · 0 评论 -
网页中跟随系统,适配 macOS 的夜间模式,暗黑模式 dark-mode:prefers-color-scheme: dark
网页中跟随系统,适配 macOS 的夜间模式,暗黑模式 dark-mode只需要添加 @media 标签即可,跟 @media (max-width: 768px) 这种宽度指定标签一样。写的时候注意 css 优先级就可以了。一般把这种标签写在最末尾,要比之前普通模式的样式有更高的优先级,不再冗述。@media (prefers-color-scheme: dark) { /* 里面写关于夜间模式的样式 */}@media (prefers-color-scheme: light) {原创 2020-11-25 09:18:41 · 1450 阅读 · 0 评论 -
css 如何实现按钮点击并移开后,动态变化的反馈效果
css 如何实现按钮点击并移开后,动态变化的反馈效果一、需求出于美化项目的目的,需要给按钮增加一些点击反馈,比如按钮点击后的渐隐反馈二、看两个例子实例 1 的地址:https://kylebing.cn/tools/icon-fa/三、实现原理实现的原理很简单,就是使用 css 的 transition 属性,在 Dom 元素的 普通状态 和 :active 状态间切换。这里使用 scss ,不熟悉的可以看这里: https://kylebing.blog.csdn.net/article原创 2020-11-18 17:40:42 · 2257 阅读 · 0 评论 -
JetBrains 系列开发工具,如何配置 `SCSS` `File Watcher` ,相关输出配置参数详解:webStorm phpStorm IDEA
JetBrains 系统开发工具,如何配置 SCSS File Watcher ,相关输出配置参数详解:webStorm phpStorm IDEA前言你目前已经了解了如何使用 SCSS 进行开发,了解了该文章的内容:『 SCSS 日常用法 』在 JetBrains 系列开发工具中通过 FileWatcher 进行编译的 SCSS 文件都是通过 sass 这个程序进行的。『 如何添加 FileWatcher 』让我们来了解一下 sass 这个程序的相关参数。一、避免输出窗口上下跳动1. 情形在原创 2020-05-09 11:20:27 · 1560 阅读 · 2 评论 -
font-family 需要有个默认值
font-familyfont-family 字义显示的字体,特定的字体用 “” 包裹,可以添加多个字体名,用逗号,分隔。系统在使用的时候,会从前往后识别字体,如果不存在字体,就使用下一个。一直以来,我都是这样写的,黄色的标记说明语法不规范。平时工作忙,一直没有处理这个问题。今天闲下来才打算细看一下是什么原因。这个警告的原因是: 该字体声明没有指定默认字体,就是说如果前面这些字体都不...原创 2019-06-13 14:45:48 · 3521 阅读 · 0 评论 -
html 文字溢出时变成省略号
html 文字溢出时变成省略号 遇到很多次这种情况了,但每次都是去查百度,还是没有记牢。 记一下,以后往这查,嘻嘻需要的代码如下overflow: hidden;white-space: nowrap; //使其不换行text-overflow:ellipsis;效果如图:原创 2016-10-16 15:25:12 · 6693 阅读 · 1 评论 -
Emmet 简写语法
Emmet 简写语法 同样适用于phpStorm等JetBrains的序列产品一、生成 HTML 文档初始结构HTML 文档的初始结构,就是包括 doctype、html、head、body 以及 meta 等内容。你只需要输入一个 “!” 就可以生成一个 HTML5 的标准文档初始结构,你没有看错,输入一个感叹号(当然是英文符号),然后摁下 ctrl+E 键,就会发现生成了下面的结构:<!D原创 2016-10-16 14:06:42 · 590 阅读 · 0 评论 -
HTML 标题结尾多出部分变成省略号
&lt;p class="content"&gt;这里有一个很长很长很长很长很长很长很长很长很长的句子&lt;/p&gt;需要设置这个句子在文字超出屏幕时,结尾变为 ‘…’ 省略号.content{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}结果这里有一个很长很长...原创 2018-10-08 20:15:37 · 1187 阅读 · 0 评论 -
让pre标签换行
让pre标签换行 今天在写手机版博客页面的时候,发现pre标签不会自动换行,会撑破页面。百度了下,找到了答案,原来pre标签默认就是不会换行的,要想让其换行,需要使用word-space: pre-wrap;来处理。 word-space是控制如何处理段落中的空白符的word-space: pre-wrap;把文中的空白符按pre标签处理,保留换行word-space: pre-line;正原创 2016-10-16 16:00:34 · 3596 阅读 · 0 评论 -
iPhone Safari 不兼容 :hover 的解决方法
不支持hover,用js解决,写一个单独的类,比如.active.active{ background-color: #eee;}/*****************在鼠标进入li的时候 1. 去除其它`li`的 `.active` 2. 给当前`li`添加类`.active`********************/$(function(){ $('ul l原创 2016-11-17 11:29:21 · 5862 阅读 · 0 评论 -
:hover 鼠标移入,切换图片
:hover 鼠标移入,切换图片昨天整了半天还是没弄明白,晚上的时候让胡老师帮忙弄了下,终于可以了。 原来:hover 和:link :visited,是两种状态,只在link中写transition 的意思是从hover切换到link的时候有动画,而反过来就不可以了。这就需要在:hover中添加一个动画,使其从普通状态切换到hover的时候也有动画。 代码如下:.share:link, .sh原创 2016-10-16 16:02:28 · 8606 阅读 · 0 评论 -
Less 字符串的插入
Less 字符串的插入今天需要写一个这样的class选择器.menu(@split:1){ a:nth-child(3n+0){}}需要用一个变量来替换”3n+0″中的”3″,变量名为@split 插入字符串的时候要以这种样式.menu(@split:1){ a:nth-child(@{split}n+0){}} OK,就是这样。原创 2016-10-16 15:40:03 · 2374 阅读 · 0 评论 -
img 图片与文字对齐,图标与标题对齐
img 图片与文字对齐,图标与标题对齐很多时候,在页面中会遇到图标与文字混排的情况,用 vertical-algin: middle 并不能让图片完全对齐于文字。目的是达成这种效果:(这并不是用 vertical-align 实现的)先看一下用 vertical-align 的样子vertical-align: middle 是设置在 img 上的,此时虽然能凑合看,但并不完美。作为...原创 2019-07-25 17:42:48 · 7592 阅读 · 0 评论 -
select 样式在 mac 上不生效的解决办法 -webkit-appearance
select 样式在 mac 上不生效的解决办法当在 mac 上使用 select 的时候,你会发现样式并没有生效,还是原来的那个样子原因浏览器默认样式覆盖了你设置的样式。解决办法添加一条-webkit-appearance: none;结果css: input, select{ width: 100%; display: block; font-si...原创 2020-01-09 16:20:34 · 1501 阅读 · 0 评论 -
如何编译 scss 源文件输出 css 到父文件夹中: webStorm phpStorm IDEA
如何编译 scss 源文件输出 css 到父文件夹中: webStorm phpStorm IDEA看该问题必备基础知识:知道 css 和 scss 的关系会用 webstorm phpstorm idea 任一一款软件中的 File Watcher 插件电脑已经安装并可执行 sass 可执行文件,能进行 scss 到 css 的编译如果不了解,请移步这里: scss日常用法:入门...原创 2019-11-11 17:33:41 · 668 阅读 · 0 评论 -
phpstorm webstorm idea 安装 scss sass file watcher
phpstorm webstorm idea 安装 scss sass在使用 scss 之前,我们需要把开发环境搭好,这里介绍在 idea 系统软件中如何设置 scss 开发环境,就是让编辑器自动把 scss 文件编译成 css。安装 node.js我们所用的 scss 编译核心文件是 node.js 中的一个库,所以需要安装 node.js。 (node.js 是前端开发不可少的库,具体可...原创 2019-09-04 09:52:00 · 2863 阅读 · 0 评论 -
关于浮动 float 和 clear HTML | CSS
参阅: https://www.cnblogs.com/acorn/p/5249089.html了解了下 float 属性,clear,left 是指左边不能用浮动元素,right 是指右边不能有浮动元素。比如,元素都左浮动,如果设置 clear: left,就是说左边不能有浮动元素,那么设置了这个属性的元素就要移到下一行去了。float 和 clear 属性都是作用在自身元素上。...原创 2019-01-26 22:46:36 · 248 阅读 · 0 评论 -
SublimeText Less2Css和高亮less插件安装
SublimeText Less2Css和高亮less插件安装今天学习less,先安装插件嘛,不然没法编译。LESS 2 CSS下载LESS编译用的文件在系统path中添加less目录位置在sublime中安装LESS2CSS配置sublime中的LESS: Preference —— Package Settings —— Less2Css ——Setting DefaultLESS高原创 2016-10-16 15:48:18 · 3996 阅读 · 0 评论 -
CSS/SCSS 做一个心跳的动画:keyframe
CSS/SCSS 做一个心跳的动画一、心电图数据化做动画,需要动画曲线,心跳的曲线自然是心电图,网上随便找一个差不多的,选取完整的一部分1. 横向10等分找到基线,横向10等分。整个图是一个心跳周期,10等分一会好算时间,对应 keyframe 中的 10% 20% 30% …2. 纵向10等分以基线为基准,找到上半部分最高的位置作为最高处,从基线到最高处10等分。再复制一份...原创 2020-04-10 14:10:07 · 2249 阅读 · 0 评论 -
css transform-origin 的作用说明,小程序 createAnimation
css transform-origin 的作用说明,小程序 transformOrigin: “50% 100% 0”正如名字所写的, transform-origin 就是指定变换的原点。就是一个点。其中的三个参数值分别代表的是这个点的 xyz轴上的相对位置。x 轴方向上的位置 50%,y 轴方向上的位置 50%, z 轴方向上的位置 0%,其百分比是相对于这个元素来说的。默认值c...原创 2020-01-18 17:18:28 · 2941 阅读 · 0 评论 -
css 创建一个箭头
css 创建一个箭头是通过控制四边的边框颜色来显示不同方向的箭头的。关于 :after 创建元素就不再冗述,百度之。scss.active{ position: relative; &:after{ content: ''; position: absolute; width: 0; hei...原创 2020-01-13 16:17:50 · 404 阅读 · 0 评论 -
CSS3 backdrop-filter() 实现背景毛玻璃效果,区别于 blur()
CSS3 backdrop-filter() 实现背景毛玻璃效果,区别于 blur()MDN相关说明 https://developer.mozilla.org/zh-CN/docs/Web/CSS/backdrop-filter一个可以实现背景毛玻璃效果的 CSS 属性平常使用的 filter 区别于 backdrop-filterfilter 是模糊内容backdrop-filt...原创 2019-08-10 16:15:36 · 10103 阅读 · 1 评论