css技巧
29篇文章 · 0订阅
  • CSS 实现带tooltip的slider
    现代 CSS 强大的令人难以置信。 这次我们来用 CSS 实现一个全功能的滑动输入器，也就是各大组件库都有的slider，效果如下 还可以改变一下样式，像这样 特别是在拖动时，tooltip还能跟随拖
    前端 CSS
    CSS 实现带tooltip的slider
  • UI: 为啥你这个页面边框1px看起来这么粗？
    背景 最近在开发H5，ui稿给的border：1px solid,因为ui稿上的宽度是750px，我们运行的页面宽度是375px，所以我们需要把所以尺寸/2。所以我们可能会想写border：0.5px
    HTML CSS 前端
    UI: 为啥你这个页面边框1px看起来这么粗？
  • 实现动态高度过渡的3种方式
    前言 今天在B站上看到了如何实现高度自动的过渡, 再加上我以前收集的内容，小记一下 关于 height 不可以设置过渡动画 我想只要是写过 css 对于这个属性就不陌生，它可以设置一个元素的高度， 那
    前端 CSS JavaScript
  • 44K star！2023最火的前端开源项目
    今天我们推荐的就是2023年最火的前端开源项目，目前在GitHub已超过44K Star，它就是：shadcn-ui。
    前端 GitHub UI Kit
    44K star！2023最火的前端开源项目
  • 使用 CSS 轻松实现一些高频出现的奇形怪状按钮
    背景 在群里会有同学问相关的问题，怎么样使用 CSS 实现一个内切角按钮呢、怎么样实现一个带箭头的按钮呢？ 本文基于一些高频出现在设计稿中的，使用 CSS 实现稍微有点难度和技巧性的按钮，讲解使用 C
    前端 CSS JavaScript
    使用 CSS 轻松实现一些高频出现的奇形怪状按钮
  • 【样式穿透】VUE样式穿透为啥有时不生效，把ta嚼烂
    背景：经常在UI框架进行样式穿透的时候，会发生不生效的情况，既会是因为选择器优先级问题，这种比较好理解，提升优先级就好，但在vue中有时候需要将scoped去掉才能生效，有时候又不能去掉scoped，
    Vue.js CSS 前端
  • 🚀🚀 手摸手开发一个很 🔥 的卡片效果
    🚀🚀 手摸手开发一个很 🔥 的卡片效果 最近掘金在大力推广扣子这个 AI 平台，可以看到它首页的卡片效果还是很酷炫的；大致包含两个效果，光的跟随效果还有卡片倾斜像 3D 的效果 github 在你没有
    前端 Vue.js React.js
    🚀🚀 手摸手开发一个很 🔥 的卡片效果
  • 【动画进阶】有意思的 Emoji 3D 表情切换效果
    最近，群里面的同学发了这么一个非常有意思是动画效果： 原效果地址 -- CodePen Demo -- Letter Hop 当然，原效果，主要使用了 GSAP 动画库以及一个 3D 文字 JavaS
    前端 CSS JavaScript
    【动画进阶】有意思的 Emoji 3D 表情切换效果
  • 单标签下的日间/黑夜模式切换按钮效果
    前不久，在网上看到这么一张非常有趣的图： 想必很多同学都看到这张图，是一个开发小哥被一个日间/黑夜模式切换按钮效果逼疯的视频。 其最终效果大致如下： 原完整代码在这里：Night && Day Tog
    前端 CSS JavaScript
    单标签下的日间/黑夜模式切换按钮效果
  • CSS3实现缺角矩形，折角矩形以及缺角边框
    前几天偶然看到缺角矩形这个功能，脑袋中第一想法是，搞个绝对定位的伪元素，哪里需要挡哪里，或者找UI小哥聊聊天，忽然灵光一闪，想起之前翻过的《CSS揭秘》一书，记得有这个篇章，遂有了此文。 1. 伪元素实现 2. 渐变实现 并且渐变可以接受一个角度（比如45deg）作为方向，而且…
    前端