排序
懒加载+图片遮罩层——React项目结构+Js实现方法
目标效果 是一个以该网页为参考的懒加载实现。 懒加载描述 懒加载的应用场景主要集中在图片资源较多的网页,典型的就是工程建设项目展示、图片搜索网站等。浏览器默认情况下是并行请求的,也就...
css拟态风格尝试以及css3新特性渐变使用
灵感 由于之前偶然间听到拟态风格这个词,那么什么是拟态风格呢。「新拟态」英文名Neumorphism,也有设计师称为 Soft Ui(软UI)。简单来说就是一种类似浮雕的效果,介于扁平与投影之间。俺总结...
不定高度展开收起动画 css/js 实现
不定高度展开收起动画 最近在做需求的时候,遇见了元素高度展开收起的动画需求,一开始是想到了使用 transition: all .3s; 来做动画效果,在固定高度的情况下,transition 动画很好使,满足了需...
使用el-menu的时候遇到的bug以及解决方式
前言 在进行项目的开发过程中我们一般会使用Element-plus来辅助我们进行开发,目的就是在于节省开发时间,但是最近在进行后台系统的开发过程中还是踩了一些坑,看看大伙有没有遇到和我一样情况...
【css】通过filter实现不规则的阴影聊聊 filter 的使用
前言 我们在实际的开发中,很多时候为了实现UI效果,其实我们会生成一些不规则的div,举个常见的例子, 比如一个带三角的对话框加一个阴影效果,如果单纯使用css的box-shadow实现起来就很麻烦,...
CSS&UI的最新动态:I/O 2023更新
过去的几个月迎来了Web UI的黄金时代。新的平台功能已经随着跨浏览器的采用而落地,支持比以往更多的 Web 功能和自定义功能。 以下是最近或即将推出的 5 个最令人兴奋和最具影响力的功能,我觉...
【CSS】如何给自己头像打造3D动态悬浮效果?(慎入!有点难)
你有设想过,当你鼠标移入头像时,展现出从圆圈或洞中探出的那种效果吗?我有类似的想法,但采用了不同的方式并添加了一些动画。我感觉非常实用,并且可以产生简洁的悬停效果,可以在您自己的头...
跟着前手淘前端技术专家一起进阶 CSS !
继《现代 Web 布局》《防御式 CSS 精讲》之后,前手淘前端技术专家「大漠」又带了新小册《现代CSS》,与你一起深挖 CSS 新特性与新用法! 作者是谁? 大漠,W3CPlus 创始人,《现代 Web 布局》...
使用 CSS 变量实现 ElementUI 动态主题切换
方案选择 Element UI 本身是支持主题定制功能的,官方提供了四种方法实现自定义主题,本质上的实现思路都是覆盖组件库本身预定义的 sass 变量,然后编译出一个新的 css 文件。 虽然这样可以满足...
时隔多年,从新认识浮动float
开场白 随着css的发展,在加上各种优秀ui库的兴起。 我们在项目中浮动用的很少。 但并不意味着我们不使用浮动了。 曾几何时,浮动这个属性是那个遥远时代的'超级明星' 排版,布局,都需要使用他...
CSS 实现弧边选项卡
这样的弧度的弧线选项卡你知道用 CSS 怎么做吗? 是不是又要去找 UI 小姐姐了? 我是渡一前端子辰老师,今天让我们一起探索这个有趣的技巧吧。 实现步骤 要实现这样的弧度弧线选项卡,我们可以...
如何实现巡检报告?
什么是巡检报告 巡检报告是指对某一个系统或设备进行全面检查,并把检查结果及建议整理成报告的过程。 巡检报告通常用于评估系统或设备的运行状况与性能,以发现问题、优化系统、提高效率、降低...
TinyNG——开源Angular组件库,助力Web应用快速开发!
TinyNG 是基于 Angular + TypeScript 的前端 UI 组件库,旨在为开发人员带来更高效的开发体验和统一的视觉交互风格。TinyNG 已经在华为内部使用四年,支撑数百个企业产品,拥有强大的稳定性和...
Tailwind css 实践指南
问题 前端开发过程中写CSS通常是一件很头疼的事情,大家都不愿意去写,有的公司甚至专门招实习生过来替自己写CSS,为什么大家都讨厌或者说不愿意去写CSS呢?主要有一下几个原因 写CSS费事费力,...
使用flex实现瀑布流
前言 大家好,这里是藤原豆腐店,之前说要写一篇文章来记录瀑布流的实现,一直拖到了现在,趁下午有空,赶紧补上。 什么是瀑布流 瀑布流,又称瀑布流式布局。是比较流行的一种网站页面布局,视...
CSS-小实例 动态发光波纹
CSS实现动态发光波纹-常见小案例 大家应该都刷过抖音吧,看到下面这张图片熟悉不。没错,这就是抖音上用户进行直播时,直播用户的头像出现的效果。我们可以看到它的头像上面会自带一个光圈一直...
clip-path 在实际场景中的使用
背景 这周工作中需要实现一种卡片效果,如下图所示(左边是 div,右边是图片,二者交界处是弧形): 怎么实现这个弧形呢?最先想到的方案是,给左边的 div 加上 border-radius: .left-block { ...
CSS文本相关属性
我正在参加「掘金·启航计划」 在现代社会中,文本排版已经成为了一项非常重要的技能。无论是在工作中还是日常生活中,我们都需要使用文本排版来使我们的文本更加易读、美观和专业。作为一名前...
【SASS星空层】用实战案例来了解sass的用法
前言 之前学css的时候,发现了两个css相关的东西sass,less,这俩玩意用起来是很方便的,毕竟里面可以自定义变量、方法之类的,可以让很多重复的东西封装起来共用一套代码。 但是我发现一个问题...
:has 语法,终于可以用了
首发于公众号 前端从进阶到入院,欢迎关注。 多年来,CSS 开发者一直希望能够根据元素内容来选择元素。虽然 CSS 提供了许多基于特征选择元素的选择器,但直到最近才有了根据元素内容选择元素的...