最近在看一些组件库的时候,发现他们有一种效果还挺好看的,就是点击会有水波效果~ 所以就想写一个 Vue 的自定义指令指令来实现这个效果:v-ripple 使用方式是这样的: <Button v-ripple>我...
CSS
纯CSS实现跑马灯效果,CSS动画知识是该补一补了~
最近看一个网站的时候,发现一个效果类似于广告灯的感觉,挺不错的,于是就想用纯CSS来实现这个效果,顺便提升一下自己的CSS动画技能 分析 我们先分析怎么做的,这个效果分成两个部分 上层:真正...
工作中学到三个CSS伪类,直接少些几百行CSS代码~
分享一篇好文~ :where 基本使用 :where() CSS 伪类函数接受选择器列表作为它的参数,将会选择所有能被该选择器列表中任何一条规则选中的元素。 以下代码,文本都会变成 yellow 颜色 <st...
70 道高级 CSS 面试题及其答案与代码示例
今天这篇文章,我为大家整理了70道CSS面试题,因为文章篇幅的关系, 奠定基础的基本概念和技术。每个问题都附有详细的答案、代码示例供大家进一步学习。让我们深入了解高级 CSS 的世界! 1、什么是 CSS ...
关于使用现代CSS新特性布局嵌套评论组件的尝试
我的好奇心驱使下,我想为什么不去查看一些热门网站,并了解一下它们是如何实现评论组件的布局。起初,我认为这将是一个简单的任务,但实际并非如此。 我花了很多时间试图理解这是如何工作的,以及如何通过现...
立体文字特效
使用CSS实现立体文字,首先在页面上准备好这么一个文字<h1>立体文字</h1>,给h1设置一个字体大小 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT...
12 个实用的高级前端 CSS 技巧
1.解决图片5px间距问题 您是否经常遇到图片底部多出5px空间的问题?别担心,有4种方法可以解决。 方案一:设置其父元素的font-size:0px 方案二:在img的样式中添加display:block 方案三:在img的样...
深挖 Threads App 帖子布局,我进一步加深了对CSS网格布局的理解
当我遇到一个新产品时,我首先想到的是他们如何实现CSS。当我遇到Meta的Threads时也不例外。我很快就探索了移动应用程序,并注意到我可以在网页上预览公共帖子。 这为我提供了一个深入挖掘的机会。我发现了一...
12 个实用的高级前端 CSS 技巧
1.解决图片5px间距问题 您是否经常遇到图片底部多出5px空间的问题?别担心,有4种方法可以解决。 方案一:设置其父元素的font-size:0px 方案二:在img的样式中添加display:block 方案三:在img的样...
CSS的will-change,为什么有时候能优化几十倍的性能?
前言 will-change 一个既陌生又熟悉的属性,以前在使用这个属性的时候,单纯是因为要做性能优化,加上will-change会使得动画变得流畅一些,但是实际上到底是什么原因导致加上will-change就能使得动画流畅,它...