CSS共0篇 第3页
CSS
排序
让小伙伴挠头的按钮微交互特效（上）
在物理世界中，有些东西在我们拨动或按下时会发出咔哒声，比如电灯开关。有些东西会亮起或发出蜂鸣声，比如自动取款机上的按钮。这些反应都是“微交互”，它们让我们知道我们成功地完成了某个操...
2年前搞个 PostCSS 插件，自动处理文字在安卓手机上不加粗的问题
问题：设计稿复现中的字体难题 开发 H5 项目时，设计同学给出的设计稿中全部使用 PingFang 字体。但当我们按照设计稿完成开发并进行验收时，遇到了一个问题：在 iOS 上，一切按照期望进行，但在...
2年前
对齐控制大作战：align-content 和 align-items，到底谁才是真正的垂直大将？
?? 个人简介：一个不甘平庸的平凡人? ? 你的一键三连是我更新的最大动力❤️！ ? 欢迎私信博主加入前端交流群? 前言 CSS 属性繁多，布局方式也层出不穷，目前最常用的 Flex 和 Grid 布局中有...
2年前
CSS 渐变中的颜色空间和色相插值
欢迎关注我的公众号：前端侦探 在 CSS 中，我们可以很轻易的实现一个渐变，比如下面是一个从黄色到蓝色的渐变 background: linear-gradient(to right, yellow, blue) 效果如下 有没有发现有什么...
2年前
【css基础篇】初识flex布局
前言：✍️ 欢迎来到 flex布局 篇， 现在我将通过代码来展示flex布局的相关知识 一、justify-content 篇 要说的第一个属性是justify-content 包括以下几个可选值： flex-start: 元素和容器的左...
2年前
Dygraph 自定义 y 轴刻度
我们在使用 Dygraph 的时候，假如需要设定固定的 Y 轴的刻度，那需要怎么做呢？ 前言 在 Dygraph 绘图中，假设我们有下面的枚举值： export enum BODY_POSITION { POSITION_0 = '右侧卧', POSIT...
2年前
CSS 属性计算过程
CSS 属性计算过程 你是否了解 CSS 的属性计算过程呢？ 有的同学可能会讲，CSS属性我倒是知道，例如： p{ color : red; } 上面的 CSS 代码中，p 是元素选择器，color 就是其中的一个 CSS 属性。 ...
2年前
CSS-小实例 动态发光波纹
CSS实现动态发光波纹-常见小案例 大家应该都刷过抖音吧，看到下面这张图片熟悉不。没错，这就是抖音上用户进行直播时，直播用户的头像出现的效果。我们可以看到它的头像上面会自带一个光圈一直...
2年前
【CSS+JS】5分钟实现超nice的动态翻书效果
前言 本文将带大家来实现一个非常有趣的案例——打开书本效果。我们平常冲浪时是不是看过一些学校高级的录取通知书，翻开通知书就能看见里面的内容，呈现出逼真的3D效果！ 先来看效果图： 思路...
2年前
彻底搞懂 Vue 中的 scoped 原理和 /deep/ 深度选择器原理
背景 我们做 Vue 项目在组件里写 css 的时候，经常会给 <style> 标签加上 scoped ，比如这样： <style lang='less' scoped> ，这样写出来的 css 就是局部的，不会影响其他组件。 另...
2年前css 实现 ‘X’ 号的显示(close关闭 icon), 并支持动画效果
最近项目上要实现一个小 'x' 的关闭样式, 今天记录一下处理过程 先看效果 HTML DOM 元素说明 要渲染内容必须有 dom 节点, 这里我们使用 span 作为容器, 然后所有的处理都基于它进行处理 <spa...
2年前
挑战！如何一行CSS实现花式条纹
难题 无论是在网页设计中还是杂志墙纸中，条纹总是无处不在。如何实现或者获取这些条纹呢？最简单的方法当时就直接切图，但其实可以直接CSS中创建丰富且美丽的条纹图案。 解决方案 第一次尝试 ...
2年前
基于css3写出的流水加载效果
准备部分 这里写入基本的html样式，这里还设置了水球的css样式，用于css样式中的计算--i:1是一种自定义的CSS变量，可能用于控制样式中的计数 <body> <div class='box'> <div cla...
2年前
前端创意探索：速览「50projects50days」项目精华 – 第二部分（6-10 天）
前言 主打：快速获取完善开发思想。 您是否在众多文章中看到过「50projects50days」项目的详细描述？垂涎三尺了？没有时间？如果您时间有限，或者只想快速领略其中的亮点，那么您来对地方了。 5...
2年前
从 Tailwind CSS 到 UnoCSS —— 原子化真的是前端CSS的救星吗
小编前言 追忆往昔，穿越前朝，CSS也是当年前端三剑客之一，风光的很，随着前端跳跃式的变革，CSS在现代前端开发中似乎有点默默无闻起来。 不得不说当看到UnoCSS之前，我甚至都还没听过原子化CS...
2年前
2023 年了，CSS Parser 原理了解一下？
前言 Vue 源码中包含 HTML Parser，随着大家在框架方向的深入学习（卷），不免要开始接触一些编译解析相关的东西。社区很多看 Vue 源码总结出来的讲解 HTML Parser 的文章，但是几乎没有介绍 CS...
2年前
手撸原生 CSS 变量，给 Vant2 实现动态主题与暗黑模式
在需求开发中如果需要大规模替换样式，例如：将主题颜色从蓝色改为橙色或绿色，亦或是需要添加日间、夜间主题模式，以供用户动态切换。这个时候将其一个个覆盖起来也许并不是一个好主意。 目前...
2年前
重磅更新，unocss终于可以完美使用px单位了
前言 不管是unocss还是tailwindcss和windicss，默认的单位都是rem，这有一定的设计理念，但其实这对于习惯使用px单位的人来说不太友好，有相当一部分人因为这点而放弃使用原子化css 那么，有没...
2年前【CSS】如何给自己头像打造3D动态悬浮效果？（慎入！有点难）
你有设想过，当你鼠标移入头像时，展现出从圆圈或洞中探出的那种效果吗？我有类似的想法，但采用了不同的方式并添加了一些动画。我感觉非常实用，并且可以产生简洁的悬停效果，可以在您自己的头...
2年前【CSS】使用新版 CSS sin() 和 cos() 三角函数创建简约时钟和图片库
CSS三角函数来了！好吧，如果您使用的是最新版本的 Firefox 和 Safari，那就是这样。CSS 中拥有这种数学能力开启了一大堆可能性。在本教程中，我们应该好好来感受一下几个新函数：sin()和cos()...
2年前