奇幻CSS世界
文章平均质量分 86
CSS世界,一个充满惊喜与梦幻的地方——等着我们探索
恪愚
江湖人称“云小梦”。一个大前端路上还未“毕业”的“小学生”。爱好分享、执着探索、乐于开源;曾参与过中大型微信小程序项目前端开发,并主导过一些官网(原生)开发;着迷于vue、node、css以及原生js技术。热衷研究现有技术的成型创新应用。目前对前端可视化和webRTC、web安全有浓厚的兴趣。开源且目前维护的有:微信小程序扩展组件库—— https://github.com/1314mxc/yunUI ,欢迎star!
展开
-
小文一篇,说说:where、:has和:is的特殊性吧
css推出的:where、:has和:is伪类满足了我对“逻辑化CSS”的简单幻想。简单说下,假如你有这么一个需求:在响应式页面中,你需要判断头部元素中是否具有某一个图标,以决定 Top 文字的样式(间距、对齐方向等)。不知道各位以前是怎么实现的。为了“性能考虑”,笔者通常是通过“动态 class”,用 js 操作元素样式。那时候就想,如果css中就可以去判断元素就好了!但是从张大佬那得知,我这种想法是“子元素选择”,就是父元素根据子元素调整,这样可能会带来重绘这样严重的影响。原创 2022-09-29 14:00:00 · 5300 阅读 · 7 评论 -
小tips;CSS和JS“通信”
假如我有一个需求,必须通过 js 执行动画,还得让 css 去配合。拿一个简单却不太恰当的例子来说:‘一闪一闪’效果的实现。传统Vue必须要利用“动态”。但是在 vue3.2 中,尤大提出了一个概念:Js in Css。它让我们可以在 css 中使用 js 变量,更好的控制动画的轨迹!从而达到“js向css传值”的效果。使用前需注意:本规则依托于,除此之外需先引入:那 css 怎么向 js 传参?比如“主题跟随系统变化”:比如“响应式布局中判断pc还是移动端”:等等。这些情况大多是由于页面的变原创 2022-07-05 10:00:43 · 2711 阅读 · 0 评论 -
说说我对项目中css架构的浅显理解
在实现业务的过程中,我们难免会发现之前由于各种原因存在的代码中正在产生大量的冗余。这时候就需要优化代码,如果有功能的迭代,就是进行重构的好时机了!我曾看过很多关于架构的书籍、文章。恕我肤浅,至今都没能确切搞懂架构的真正含义,只是觉得:这是一个通过某些手段将项目变成一个层级划分、面向功能、结构清晰的关系。最近在搞某一块业务的重构,恰好时间不紧。组内大佬说“放手去干吧”。于是我将目光投向了自认为比较了解的CSS方面。ITCSS这是由csswizardry提倡的一个 CSS 设计方法论,他可以让你更好的原创 2021-09-23 00:19:26 · 771 阅读 · 0 评论 -
小tips:单复选框与文字对齐问题的研究
以前来说,单复选框与后跟文字的对其问题其实大多出现在 `font-size` 为 `12px` 的场景下。在现在默认和常用的 `14px`下其实应该是不会出现的。随着浏览器的不断发展,对css的支持程度以及不同的实现方式,我们大概要时刻注意相关问题的产生...原创 2021-08-06 14:05:43 · 2246 阅读 · 0 评论 -
nginx适配杂谈
适配问题说起适配,其实就不得不提到“ 响应式 ”。而说起响应式,可能很多人下意识就会脱口而出:css @media媒体查询。可能还有些人会进一步说出:“利用css的em、rem单位”。是的,但是你有没有想过一个问题:em、rem是根据px计算得来的;而media又“足够复杂” —— 放在一般的项目中还好,如果将css自适应放到淘宝、京东这种极度复杂的场景下,就显得有些束缚了:因为我们知道,元素大小、位置甚至颜色等的改变都会引起回流和重绘!导致页面重新渲染…这对性能是不友好的。css单位上面说到e原创 2021-07-08 23:27:59 · 2894 阅读 · 1 评论 -
CSS中em的正确打开方式
为什么说“通常情况下1em=16px”?用户的浏览器默认渲染的文字大小是“16px”,换句话说,Web页面中“body”及其子元素的文字大小在用户浏览器下默认渲染是“16px”。我们都知道:em(和 rem )是一个相对单位!“相对”的意思是:相对的计算必然会一个参考物,那么这里相对所指的是相对于元素父元素的font-size。比如说:如果在一个 div 设置字体大小为“16px”,此时这个 div 的后代元素教程了是将继承他的字体大小,除非重新在其后代元素中进行过显示的设置。如果用户通过浏览器的原创 2021-04-07 13:38:37 · 7619 阅读 · 9 评论 -
一种离谱到极致的页面侧边栏效果探究
emmmmmmm标题实在想不到怎么起。其实效果大概是这样的:display动画的应用起因是什么呢?在笔者最近为社团计划的官网上打算做一个这样的效果:点击头像,左边/右边滑出一个“面板”,里面展示用户的个人信息。当然,这有很多种做法,比如:利用position定位+overflow溢出隐藏、利用opacity/visibility隐藏+pointer-events元素穿透… 但是笔者当时想到的是如何给”真正的隐藏,display“加上动画!我们大概都知道的是:HTML渲染过程中有一个可能执行的、影原创 2021-01-06 11:07:35 · 49864 阅读 · 8 评论 -
用户体验 | 页面阅读进度提示
相信很多人都在项目中用过这么一个玩意 —— NProgress.js库,或者是其它类似的库,它们的作用很实用:页面加载进度提示。顾名思义,就是在刚进入页面或刷新或请求数据时在页面顶部有一个进度条给用户以反馈,使页面加载显得不那么“尴尬”。但只有很少人见过 “在页面顶部实时反馈当前阅读进度” 的效果 —— 为什么?因为有滚动条。但不得不提的是:这真的很有用!不管是“在有些要求高的页面对自带滚动条很厌恶”还是“即使有滚动条也可以给用户更好看的提示效果”。当然,目前第一种场景比较多。用JS达到实时进度提原创 2020-12-21 11:13:42 · 11258 阅读 · 14 评论 -
小Tip:关于单行/多行文本溢出隐藏的一些看法
最早的文本溢出隐藏只是简单的hidden,把看不见的都给“去掉”,就像这样:<p class="hid"> 哈哈哈哈哈哈哈哈哈哈哈</p>.hid{ width: 100px; height: 20px; overflow: hidden; border: 1px solid red;}到后来发现这样不太好:比如在一些信息录入框,如果单纯的用 overflow:hidden; 可能别人会误以为信息不全由此产生一些“大问题”,所以原创 2020-12-11 15:59:08 · 2625 阅读 · 7 评论 -
CSS3+JS完美实现放大镜模式
大概一年多之前写过一篇文章:仿放大镜效果的几种方式原理解析,别看标题这么牛气哄哄,其实也就算是介绍了css里的transform和animation两种动画方式 —— 当然,实现的效果也很简单。虽然后来随着技术的增长又逐渐实现了canvas方式的放大镜以及用纯JS实现了另一种“淘宝式”的模型,其效果如下://xz:这里是一张图片但是仍然不尽人意:因为实现起来太复杂了,而且需依赖大部分JS逻辑,移动和显示的效果均依赖JS,通过JS计算偏移量再渲染样式。但是CSS3自定义变量的出现让我看到了“希望之光”原创 2020-12-01 11:21:14 · 12118 阅读 · 52 评论 -
CSS伪类:empty让我眼前一亮
最近看过我文章的都知道:我最近在写一个微信小程序的项目,在其中遇到了很多有趣的事和一些“奇思妙想”。本文的背景就是今天早上我看着wxml文件中一堆wx:if/else和hidden突然很烦躁,先不说wx:if的性能问题,就是标签上也是冗杂的。接着上一篇文章【微信小程序自定义组件库yPicker组件分析及省市区三级联动实现】,在其中我分析了这么一个例子 —— 省市区三级联动的自定义实现,在其中有详细代码这里就不多说,说说如何调用:我当时是这么想的:一方面出于“不在JavaScript里写太多东西”的考虑原创 2020-11-02 09:12:20 · 8170 阅读 · 13 评论 -
原生图片预览实现及由此引出的图片自适应宽高问题探索
看到手机相册,突发奇想:能不能用实现一个原生的页面“相册”?或者说,传统网页中怎么实现图片预览功能?如果在原生网页中使用插件,那必不可少的要引入一堆东西(并不是鄙视插件,只是为了引入下文,见谅嘿嘿);但又不是说所有的页面都要用框架…经过一番探索,终于大概实现了想要的功能:大概流程就是:可以点开大图观看、可以左右滑动切换、进入预览时可以从你当前点击的那一张开始浏览。实现相册初始展示页如上所示,我们可以在Header头中添加Viewport配置 —— 移动端页面常备:<meta name=原创 2020-10-14 10:25:34 · 5417 阅读 · 36 评论 -
从一次项目重构说起CSS3自定义变量在项目中是如何使用的?
关于CSS3变量在任何语言中,变量的有一点作用都是一样的,那就是可以降低维护成本,附带还有更高性能,文件更高压缩率的好处。随着CSS预编译工具Sass/Less/Stylus的关注和逐渐流行,CSS工作组迅速跟进CSS变量的规范制定,并且,很多浏览器已经跟进,目前,在部分项目中已经可以直接使用了:声明变量的时候,变量名前面要加两根连词线(--)。body{ --color:red;}上面代码中,body选择器里面声明了一个自定义变量:--color 。它与color等正式属性没有什么原创 2020-10-06 10:09:38 · 10367 阅读 · 23 评论 -
探索CSS属性*-gradient的实用价值
先介绍一下一个有趣的属性 —— conic-gradient :圆锥渐变!对其感兴趣是因为我发现它竟然可以用来做圆饼图!比如这样的:这样的:其原理也很简单:就是以起始点为中心,然后以顺时针方向绕中心实现渐变效果。其必须接收多种颜色值参数,每个颜色值后可以跟两个百分比,为当前颜色值的起始点和终止点(中间用空格隔开):background: conic-gradient(pink 0 30%, yellow 0 70%, lime 0 100%);还可以分开来写:background:原创 2020-09-24 23:44:26 · 1915 阅读 · 7 评论 -
HTML5+CSS3高级动画的应用实践
我们大概都知道css可以用来作平面旋转、扭曲、放大缩小、平移。。。并且用起来几乎都得心应手。但目前来说,3D效果的“高级”动画似乎更受欢迎一些,而且我们也确实需要。这不,前两天笔者就在项目中给“翻转动画”增加了一个3D效果,看起来贼爽:这个动画实现所用到的3D盒子模型是现在3D模型中最常用的一个 —— 不过我们先拿其中两个面分析:首先,要实现这个功能,我们从外往里看:把文字所在部分看作一个盒子的话,前后两个横线并不属于这个盒子才对,那么,很自然就想到了—— ::after 和 ::before原创 2020-09-14 23:02:10 · 8393 阅读 · 27 评论 -
CSS实用技巧:伪元素/伪类的妙用
在一个网页中CSS占着非常重要的地位。近年来随着CSS的发展,伪元素/伪类也开始被大量应用:在性能愈加被看中的当下,处于文档流之外的CSS伪元素/伪类是当之无愧的“无冕之王”!下面笔者总结的一些关于CSS的“骚操作”,希望能对你产生帮助::hover和:focus显示浮层我们完全可以只用CSS的父子选择器(用于“父子嵌套”)/兄弟选择器(用于“同级并列排列”)+伪类 :hover 实现【当鼠标滑入显示xxx】,甚至不用JS!比如:当鼠标滑入链接时显示图片<a href="javascrip原创 2020-08-15 10:02:00 · 6766 阅读 · 14 评论 -
关于CSS3一些新属性的一些思考:夜间模式(网页变灰)、区域阴影、透明度
关于 filter —— 你以为它只能做单纯的“滤镜”吗?不!常用的 blur 处理(图片)模糊程度、 opacity 处理(图片)透明度、 grayscale 处理(图片)灰度 属性只是其世界组成中的一部分。css-filter的实际用处可真不少。其实,最【受人追捧】的夜间模式用filter也可以简单实现:首先,我们拿到一个input标签 —— 它一般放在整个页面(body)的最上面 —— 这样就可以通过CSS的一些“特性”来控制“全局”:<input type="checkbox" /&原创 2020-07-13 11:11:30 · 11190 阅读 · 10 评论 -
CSS世界Bug般的存在——字母x与“居中”
字母x ?《css世界》中提到:“我们这里的字母x就是26个英文字母中的x。由于自身形态的一些特殊性,这个小小的不起眼的字母担当大任,在css世界中扮演了一个重要的角色。”笔者在这两天写一个项目中遇到了“居中”的困惑:我发现代码段li{ verticle-align: middle;}失效!经过一番查证,发现:vertical-align属性只对行内元素有效,对块元素无效但我很快想到:有时候为什么写了line-height也会出错、或者说反而会出错呢?有时使用display:in原创 2020-06-10 22:36:40 · 4053 阅读 · 9 评论 -
细说UI组件库中的“开关”
目前,流行的UI组件库无非cube-ui、elementUI、iview...一款优秀的组件库其实现必包含:性能、兼容、适应性等一系列指标。今天笔者就给各位分析并实现一下项目中常见的一个组件 —— 开关!原创 2020-05-23 09:28:43 · 3196 阅读 · 25 评论 -
你怎么看CSS中的margin合并?
啊~已经沉沦在不写博客的世界的第...N天了。我云小梦又回来了哈哈哈。css中千变万化,而最主要的就是margin和padding了,这其中涉及了像BFC、性能的好多问题。本文笔者就带大家再来看看我们亲切的“邻家大哥哥”——margin...原创 2020-04-29 14:56:03 · 1743 阅读 · 11 评论 -
前端图形技术的发展:SVG
SVG图——基于数学的描述使用方式:浏览器直接打开在HTML中使用<img>标签引用直接在HTML中使用<svg>标签作为CSS背景如:<img src="如 simplr.svg" width="50" height="50" />和一般img不同,这个地方的width和height可以改!SVG绘图书写格式(大概)其不同图形有不同格...原创 2019-11-27 19:02:22 · 687 阅读 · 0 评论 -
神奇的CSS图形:“三道杠”及相关知识点详解
在笔者的个人网站上,有这么一个功能:当页面变得“足够小”(比如手机打开),页面的右上方会变成一个如下的图案:点击后会触发“下拉框展示”的事件效果。关键就在这个东西上。使用图片呢?还是矢量图标呢?还是css图形呢?细想一下:图片——尺寸不好控制、加载慢、易失帧;矢量图标——要引入对应库文件,可能会延迟加载速度;毫无疑问,最后一个方案是最好的选择!我们就来说一下CSS图形。这又两种方法实现...原创 2019-11-21 09:30:29 · 1970 阅读 · 0 评论 -
网页中图片img的尺寸问题
<img>是不可替换元素(标签)很奇怪?《CSS世界》作者张鑫旭大大提出了一个观点:替换元素和非替换元素之间只隔了一个src属性!经过“千奇百怪”的验证,至少现在看来,它无疑是正确的。由于我们平时都会这样写:<img src="xxx">,所以我们难免陷入思维定式,认为<img>===图片。But事实完全相反:去掉src的<img>其实就是一...原创 2019-11-19 10:55:59 · 1380 阅读 · 0 评论 -
BFC原理在CSS中的应用
准确来说,BFC是CSS2.1时代的产物,它是页面中的一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位,以及和其他元素的关系和相互作用何为“BFC”?BFC 即 Block Formatting Contexts (块级格式化上下文),它属于普通流。具有 BFC 特性的元素可以看作是隔离了的独立容器,容器里面的元素不会在布局上影响到外面的元素,并且 BFC 具有普通容器所没有的一...原创 2019-11-16 21:12:03 · 556 阅读 · 0 评论 -
CSS3实战——抖动效果的实现
这几天有项目,其中复习了一下css3的相关知识。其中抖动效果很好玩,不禁想写篇文章,纪念一下。还是以前说的,通过js动态添加/删除class是一个“不错的”选择。比如今天做的东西:先添加,然后利用setTimeout慢慢消除。这样就实现了“抖动效果”<!DOCTYPE html><html lang="en"><head> <meta ...原创 2019-11-05 13:49:00 · 4415 阅读 · 5 评论 -
谈谈css使用中遇到的的一些坑
今天早上,当我鼠标无意中移入某课网某一页面中的“扫码下载APP”的fixed图上,看到一张二维码从这个图的相对底部慢慢、慢慢的移上来,或者说:展开 时,我就知道,今天有事干了。。。我大致分析了一下,欸,觉得挺简单的,然后兴冲冲地去编译器上噼里啪啦,然后,,,错了,(真的是一顿操作猛如虎,一看战绩…)结果和我的预期,完全不符!这是预期展开一半的效果:而这是我开始做的展开一半的效果:把从上...原创 2019-10-28 19:58:50 · 532 阅读 · 0 评论 -
利用伪元素和css3实现鼠标移入下划线向两边展开效果
思路将伪元素:before和:after定位到元素底部中间,设置宽度从0变成100%达到目的。实现过程:下面是我实现某官网首页导航中a链接时做的简单特效的过程。须知:a链接是行(内)元素,而行元素是没有width的!所以,我们要实现题目所说特效,就要为每个a标签嵌套一个“盒子”——div最好(因为它最“干净”)当然,如果你实现的是列表(li)的话,把它 display:block;或di...原创 2019-10-24 09:02:02 · 1086 阅读 · 0 评论 -
CSS是如何实现卡片3D翻转效果的
先上代码:HTML<div class="main"> <div class="box b1"> <p>你就是云风清吗?</p> </div> <div class="box b2"> <p>我是云风清</p> </div>...原创 2019-10-07 09:27:15 · 1884 阅读 · 1 评论 -
【css3技术路】仿放大镜效果的几种方式原理解析
文章标题为啥是“仿放大镜”?因为我今天要说的,并不是像一般说的,鼠标移入时旁边弹出一个局部的大图,那很好写,也没多少技巧(用相对定位定位父元素(或说:原图),绝对定位定位局部大图(目的:让它处于原图旁边某位置),在旁边用css控制样式并用鼠标事件监听,,,当然,你也可以直接用jQuery中的接口——$(‘类名’).jqzoom({zoomwidth:xx; zoomheight: xx; zoo...原创 2019-07-14 11:16:27 · 1424 阅读 · 0 评论 -
案例总结:有趣的css3渐变
不打算多说(说太多没用,要学会查看文档),但打算细聊。(文中有实例)背景由css -> css3,确实发展了很多,页面更加灵活,“动画”也被强调。以“transition”、“tranform”、“animation(-duration)”属性为首的N大属性让前端开发者往往“欲罢不能”。浅谈“渐变”横向渐变、径向渐变、由内而外。。。这里给大家分享几个有趣的渐变色,用来丰富页面。...原创 2019-05-27 20:08:26 · 938 阅读 · 0 评论