随笔分类 - css
摘要:
巴黎奥运会正如火如荼地进行,本文来使用 CSS 来画一个奥运五环。奥运五环是相互连接的,因此在视觉上会产生重叠效果,这也是实现五环最有挑战性的部分。接下来,将利用 CSS 的伪元素,巧妙地实现环环相扣的效果! 根据五环的位置特点,可以将中间的黑色环设置为 HTML 的父元素,而将其他颜色的环设置为子
阅读全文
![css手撕奥运五环](https://img2024.cnblogs.com/blog/1161361/202408/1161361-20240805095345796-462979031.png)
摘要:
1、是什么 pointer-events 直译为指针事件,该属性指定在什么情况下某个DOM可以成为鼠标事件的 target。 简而言之,就是允许/禁止DOM的鼠标事件(click事件、hover事件、mouse事件等鼠标事件) 2、具体属性分析 用法分析:pointer-events: auto |
阅读全文
![CSS3 超实用属性:pointer-events (可穿透图层的鼠标事件)](https://img2024.cnblogs.com/blog/1161361/202405/1161361-20240529152908405-541574067.png)
摘要:Sass使用变量,变量以$开头 $bgcolor:#f40; background-color:$bgcolor; 如果变量需要嵌套在字符串当中,就需要写在#{}之中 $direction:left; border-#{$direction}-radius:10px; 计算、嵌套、属性嵌套 这三个可
阅读全文
摘要:clip-path CSS 属性可以创建一个只有元素的部分区域可以显示的剪切区域。区域内的部分显示,区域外的隐藏。 clip-path的属性值可以是以下几种: 1.inset; 将元素剪裁为一个矩形, 定义:clip-path: inset(<距离元素上面的距离>,<距离元素右面的距离> ,<距离元
阅读全文
摘要:现代 CSS 布局使开发人员只需按几下键就可以编写十分有意义且强大的样式规则。上面的讨论和接下来的帖文研究了 10 种强大的 CSS 布局,它们实现了一些非凡的工作。 01. 超级居中:place-items: center 对于第一个“单行”布局,让我们解决所有 CSS 领域中最大的谜团:居中。我
阅读全文
摘要:顾名思义,mask 译为遮罩。在 CSS 中,mask 属性允许使用者通过遮罩或者裁切特定区域的图片的方式来隐藏一个元素的部分或者全部可见区域。 其实 mask 的出现已经有一段时间了,只是没有特别多实用的场景,在实战中使用的非常少,本文将罗列一些使用 mask 创造出来的有意思的场景。 语法 最基
阅读全文
摘要:使用css实现常用的三角效果 项目中三角: .breadcrumb{ height: 40px; line-height: 40px; padding: 0 20px; border-top: 1px solid #f9c700; .breadcrumb-title{ text-align: cen
阅读全文
摘要:目标 实现箭头的流程图,本次开发用的是vue+scss形式,不过基本上都是css3+js而已,简单易懂,同样也好拓展。 图例 思路 父元素设置flex布局,子元素都是自适应,可随着屏幕宽度变化而变化。 设置双伪元素::before/::after,一个在前,一个在后,通过设置border-top/b
阅读全文
摘要:由于 mix-blend-mode 这个属性的强大,很多应用场景和动效的制作不断完善和被发掘出来,遂另起一文继续介绍一些使用 mix-blend-mode 制作的酷炫动画。 CSS3 新增了一个很有意思的属性 -- mix-blend-mode ,其中 mix 和 blend 的中文意译均为混合,那
阅读全文
摘要:文字溢出怎么展示,你的需求是什么?单行还是多行?截断,省略,自定义样式,自适应高度?在这里你都能找到答案。接下来我会由浅入深,从原理到实现,带你一步步揭开多行省略的面纱。我们先从最简单的单行溢出省略开始, 热身,单行省略 这是一个全宇宙统一的方案,没有太多的魔法 /* 原理:设置文字不换行,溢出后隐
阅读全文
摘要:今天我们就把CSS Modules是个啥子东西给他弄明白,这样会更加分。首先我们来看一张图:一张图理解 CSS Modules 的工作原理: 我们自己编码的时候有俩个文件,一个是ProductList.less文件,一个是ProductList.jsx文件在构建之后会将less文件转换成蓝色标题的那
阅读全文
摘要:1,vw、vh、vmin、vmax 的含义 (1) vw、 vh、 vmin、 vmax 是一种视窗单位,也是相对单位。它相对的不是父节点或者页面的根节点。而是由视窗( Viewport)大小来决定的,单位 1,代表类似于 1%。 视窗( Viewport)是你的浏览器实际显示内容的区域—,换句话说
阅读全文
摘要:本文将介绍一种利用 CSS 滤镜 filter 的 drop-shadow(),实现对 HTML 元素及 SVG 元素的部分添加阴影效果,以实现一种酷炫的光影效果,用于各种不同的场景之中。通过本文,你可以学到: 如何利用 filter: drop-shadow() 对元素的部分内容添加单重及多重阴影
阅读全文
摘要:16、元素占满整个屏幕 heigth如果使用100%,会根据父级的高度来决定,所以使用100vh单位。 .dom{ width:100%; height:100vh; } 17、CSS实现文本两端对齐 .wrap { text-align: justify; text-justify: distri
阅读全文
摘要:1、文字超出部分显示省略号 单行文本的溢出显示省略号(一定要有宽度) p{ width:200rpx; overflow: hidden; text-overflow:ellipsis; white-space: nowrap; } 多行文本溢出显示省略号 p { display: -webkit-
阅读全文
摘要:一、背景 Webpack 最初的目标是实现前端项目的模块化,旨在更高效地管理和维护项目中的每一个资源 模块化 最早的时候,我们会通过文件划分的形式实现模块化,也就是将每个功能及其相关状态数据各自单独放到不同的JS 文件中 约定每个文件是一个独立的模块,然后再将这些js文件引入到页面,一个script
阅读全文
摘要:一、是什么 Css 作为一门标记性语言,语法相对简单,对使用者的要求较低,但同时也带来一些问题 需要书写大量看似没有逻辑的代码,不方便维护及扩展,不利于复用,尤其对于非前端开发工程师来讲,往往会因为缺少 Css 编写经验而很难写出组织良好且易于维护的 Css 代码 Css预处理器便是针对上述问题的解
阅读全文
摘要:一、是什么 视差滚动(Parallax Scrolling)是指多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验 我们可以把网页解刨成:背景层、内容层、悬浮层 当滚动鼠标滑轮的时候,各个图层以不同的速度移动,形成视觉差的效果 二、实现方式 使用css形式实现视觉差滚动效果的方式有
阅读全文
摘要:一、前言 每一个网页都离不开css,但是很多人又认为,css主要是用来完成页面布局的,像一些细节或者优化,就不需要怎么考虑,实际上这种想法是不正确的 作为页面渲染和内容展现的重要环节,css影响着用户对整个网站的第一体验 因此,在整个产品研发过程中,css性能优化同样需要贯穿全程 二、实现方式 实现
阅读全文
摘要:项目中常常有这种需要我们对溢出文本进行"..."显示的操作,单行多行的情况都有(具体几行得看设计师心情了),这篇随笔是我个人对这种情况解决办法的归纳,欢迎各路英雄指教。 单行 语法 overflow:hidden; text-overflow:ellipsis; white-space:nowrap
阅读全文