![](https://img-blog.csdnimg.cn/20190918140012416.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
CSS、style
文章平均质量分 86
样式相关、stylus、less、sass
rudy_zhou
undefined
展开
-
只需一个DOM,纯CSS实现线性跑马灯特效
只需一个DOM,纯CSS实现跑马灯线性特效引言跑马灯效果图&Demo跑马灯代码样式分析解释引言之前看到一个效果,一条小细线,围绕着边框一直绕圈,不过它的实现方式使用了JavaScript。于是就尝试着写了一个只需要CSS就能围绕边框跑的效果,废话不多说,直接上效果图和代码。跑马灯效果图&Demo很简洁的一个效果跑马灯代码HTML<div class="box ...原创 2020-03-28 11:36:20 · 1345 阅读 · 5 评论 -
CSS 预编译语言 变量全局引用方式 vue-cli@3.0 stylus/sass/less 使用方法
引言网上相关博客与教程很多,但是解决方式有些不明确,在此统一总结一下sass、stylus、less预编译css全局引用方法,每个均介绍三种方案,皆为本人实测,一下方案为vue-cli@3.0使用方法,使用较低版本的前端朋友可以参考,本人精力有限,暂时就只提供3.0版本解决方案。本次提供使用方法代码参考:https://github.com/rudyLittleLove/global-var...原创 2019-12-24 16:08:36 · 4541 阅读 · 8 评论 -
CSS制作类似 Photoshop 模糊蒙版效果
CSS制作类似 Photoshop 模糊蒙版效果引言不兼容IE的纯css实现代码实现代码实现原理兼容IE10,IE11的模糊蒙版效果,使用canvas实现代码实现原理引言为了使一个在图片上悬浮的方框呈现磨砂玻璃的效果,就是透过这个方框看到下方的图片是模糊的这样一个效果,以下用css来做一个简单的效果。不兼容IE的纯css实现代码实现代码首先创建好背景与模糊方框的html代码<di...原创 2020-02-19 19:44:56 · 1115 阅读 · 0 评论 -
深入理解CSS之 如何使子元素撑宽 设置了 block 的父元素
深入理解CSS之 如何使子元素撑宽 设置了display: block; 的父元素先写一个模板,晚点再吐槽吐槽实现原理 与 更多支持的属性不想使父级的 块 属性消失怎么办这种属性规则有什么作用呢先写一个模板,晚点再吐槽HTML<div class="wrap"> <div class="grandpa"> <div class="father"> <span class="child">我是一个子元素,我要写很多字把宽度撑开,我要原创 2020-06-05 12:12:49 · 5461 阅读 · 0 评论 -
实时查看css 效果最便捷方式
实时查看css 效果最便捷方式css 调试?更快的方式总结css 调试?虽然现在热更新很快了(Go Live 插件、或者nodejs 插件),但延迟还是有的。想要更快的调试css 代码的样式,用浏览器自带的功能是最方便的。这里并不是指 (chrome 浏览器下)在 Elements 控制台下更改 Styles 下的样式,这样写太慢了,只能一句一句的编写以及修改样式。如下图:更快的方式同样要进入 Elements 模块下,选中 Styles 项,点击右侧加号(new style rule)原创 2020-11-30 10:15:23 · 1359 阅读 · 1 评论 -
CSS 使用技巧例子,理解样式之间的配合,缩短 tabs 组件线条宽度
CSS 使用技巧例子,理解样式之间的配合,缩短 tabs 组件线条宽度引言案例场景解决方案结语引言这个标题范围有点广,css 样式很多,相互之间配合起来其实能完成很不错的效果,也能减少很多JavaScript 代码。因为对样式理解少从而造成的 JavsScript 脚本 增多是得不偿失的。案例场景之前我们UI 设计过一个 tab 切换的效果,主体样式和 vue 组件库 iview,elementui 的 tabs 组件差不多,其中有些许样式不一样。类似效果图如下。tab 平铺满, 但是下方原创 2020-08-06 10:14:38 · 1374 阅读 · 10 评论 -
遮罩覆盖的DOM,如何触发点击 等一系列事件
遮罩覆盖的DOM,如果获取点击 等一系列事件引言解释 pointer-event举例说明上面解释的效果有哪些场景可以使用到总结引言今天,调试 iview 这个UI组件库 modal 组件样式的时候,在可 拖拽 的样式上看到一个样式 pointer-event 。虽然自诩(吹牛)在样式上有较多的理解,但是我却不知道这个样式的具体作用(打脸了)。审查元素后,发现这是我多年来心心念念的一个效果 ヾ(◍°∇°◍)ノ゙ ,曾经想过能否用 javascript 实现的效果(当时失败了,没找到如何实现)。现在用一个样原创 2020-06-23 18:00:42 · 1182 阅读 · 0 评论 -
删除列表中一个DOM,其余DOM动态过渡的方法
删除列表中一个DOM,其余DOM动态过渡的方法效果图效果DEMO全部代码方法原理解释结语效果图效果DEMO简易的DOM 过渡效果全部代码HTML<ul class="box" id="box"> <li class="rect" data-index="01">01</li> <li class="rect" data-index="02">02</li> <li class="rect" data-in原创 2020-06-06 13:43:07 · 1210 阅读 · 1 评论