摘要: 在过往,我们想要实现一个图片的渐隐消失。最常见的莫过于整体透明度的变化,像是这样: <div class="img"></div> div { width: 300px; height: 300px; background: url(image.jpg); transition: .4s; } .i 阅读全文
posted @ 2022-12-06 10:24 ChokCoco 阅读(308) 评论(4) 推荐(5) 编辑
摘要: 大家都知道,当一些重大事件发生的时候,我们的网站,可能需要置灰,像是这样: 当然,通常而言,全站置灰是非常简单的事情,大部分前端同学都知道,仅仅需要使用一行 CSS,就能实现全站置灰的方式。 像是这样,我们仅仅需要给 HTML 添加一个统一的滤镜即可: html { filter: grayscal 阅读全文
posted @ 2022-12-02 10:29 ChokCoco 阅读(2382) 评论(4) 推荐(32) 编辑
摘要: 对 Chrome 扩展功能熟悉的小伙伴,可能都有用过 Chrome 的 3D 展示页面层级关系这个功能。 可以通过 控制台 --> 右边的三个小点 --> More Tools --> Layers 打开。即可以看到页面的一个 3D 层级关系,像是这样: 这个功能有几个不错的作用: 页面层级概览 快 阅读全文
posted @ 2022-11-21 11:02 ChokCoco 阅读(1774) 评论(1) 推荐(19) 编辑
摘要: 大部分同学都用过 CSS 的屏幕宽度媒体查询,像是这样: @media screen and (min-width: 900px) { div { padding: 1rem 3rem; } } 这里表示的是与屏幕宽度相关的样式设置,上面的代码表示当屏幕宽度大于 900px 时,内部的样式代码块才能 阅读全文
posted @ 2022-11-03 10:25 ChokCoco 阅读(1381) 评论(1) 推荐(10) 编辑
摘要: 在 CSS 中,渐变(Gradient)可谓是最为强大的一个属性之一。 但是,经常有同学在使用渐变的过程中会遇到渐变图形产生的锯齿问题。 何为渐变锯齿? 那么,什么是渐变图形产生的锯齿呢? 简单的一个 DEMO: <div></div> div { width: 500px; height: 100 阅读全文
posted @ 2022-10-27 10:37 ChokCoco 阅读(880) 评论(5) 推荐(12) 编辑
摘要: 每年的苹果新产品发布,其官网都会配套更新相应的单页滚动产品介绍页。其中的动画特效都非常有意思,今年 iPhone 14 Pro 的介绍页不例外。 最近,刚好有朋友问到,其对官网的一段文字特效特别感兴趣,看适用简单却不知从何下手,我们来看看: 整个动画大致是,随着页面的向下滚动,整个文字从无到出现,再 阅读全文
posted @ 2022-10-20 10:37 ChokCoco 阅读(4697) 评论(13) 推荐(49) 编辑
摘要: 背景 鼠标拖拽元素移动,算是一个稍微有点点复杂的交互。 而在本文,我们就将打破常规,向大家介绍一种超强的仅仅使用纯 CSS 就能够实现的鼠标点击拖拽效果。 在之前的这篇文章中 -- 不可思议的纯 CSS 实现鼠标跟随,我们介绍了非常多有意思的纯 CSS 的鼠标跟随效果,像是这样: 但是,可以看到,上 阅读全文
posted @ 2022-10-10 10:12 ChokCoco 阅读(6070) 评论(18) 推荐(39) 编辑
摘要: 今天在论坛,有看到这样一道非常有意思的题目,简单的代码如下: <div> <p id="a">First Paragraph</p> </div> 样式如下: p#a { color: green; } div::first-line { color: blue; } 试问,标签 <p> 内的文字的 阅读全文
posted @ 2022-09-27 11:40 ChokCoco 阅读(838) 评论(0) 推荐(4) 编辑
摘要: 最近,有群友问我,他们的一个作业,尽量使用少的标签去实现这样一个象棋布局: 他用了 60 多个标签,而他的同学,只用了 6 个,问我有没有办法尽可能的做到利用更少的标签去完成这个布局效果。 其实,对于一个页面的布局而言,标签越少不一定是好事,我们在考虑 DOM 的消耗的同时,也需要关注代码的可读性, 阅读全文
posted @ 2022-09-20 10:35 ChokCoco 阅读(3421) 评论(24) 推荐(44) 编辑
摘要: 终于,在漫长的等待下,容器查询(CSS Container Queries)将在 Chrome 105 版本得到正式的支持! 而目前,我们也能在 Chrome Canary 版本中,或者在 Chrome 93~104 通过开启 Enable CSS Container Queries 特性抢先体验。 阅读全文
posted @ 2022-09-14 10:12 ChokCoco 阅读(2454) 评论(4) 推荐(10) 编辑