摘要: 直接进入正题,鼠标跟随,顾名思义,就是元素会跟随着鼠标的移动而作出相应的运动。大概类似于这样: 通常而言,CSS 负责表现,JavaScript 负责行为。而鼠标跟随这种效果属于行为,要实现通常都需要借助 JS。 当然,本文的重点,就是介绍如何在不借助 JS 的情况下使用 CSS 来模拟实现一些鼠标阅读全文
posted @ 2019-03-06 10:50 ChokCoco 阅读(3469) 评论(11) 编辑
摘要: 这两天接触到一个很有意思的 CSS 属性 -- box-decoration-break。下面就一起去一探究竟。 因为 MDN 上关于这个属性,没有中文文档,所以一直在想一个合理贴切的中文翻译。直译一下: box -- 盒,可以理解为元素盒模型 decoration -- 装饰,理解为元素样式 br阅读全文
posted @ 2019-02-28 10:39 ChokCoco 阅读(368) 评论(2) 编辑
摘要: 结论先行,如何使用 CSS 实现下述滚动条效果? 就是顶部黄色的滚动进度条,随着页面的滚动进度而变化长短。 在继续阅读下文之前,你可以先缓一缓。尝试思考一下上面的效果或者动手尝试一下,不借助 JS ,能否巧妙的实现上述效果。 OK,继续。这个效果是我在业务开发的过程中遇到的一个类似的小问题。其实即便阅读全文
posted @ 2019-01-09 14:34 ChokCoco 阅读(4579) 评论(32) 编辑
摘要: 今天在写一个小的 CSS Demo,一个关于 3d 球的旋转动画,关于 CSS 3D,少不了会使用下面这几个属性: 这个 Demo 你可以戳这里,大概是这样:CodePen Demo - 3D ball: 嗯,大概到了这个效果,想到了 CSS 混合模式 mix-blend-mode,寻思着,利用混合阅读全文
posted @ 2018-12-18 14:47 ChokCoco 阅读(564) 评论(3) 编辑
摘要: 关于 CSS 阴影,之前已经有写过一篇,box-shadow 与 filter:drop-shadow 详解及奇技淫巧,介绍了一些关于 box-shadow 的用法。 最近一个新的项目,CSS-Inspiration,挖掘了其他很多有关 CSS 阴影的点子,是之前的文章没有覆盖到的新内容,而且有一些阅读全文
posted @ 2018-11-06 10:56 ChokCoco 阅读(4521) 评论(23) 编辑
摘要: 何为滚动视差 视差滚动(Parallax Scrolling)是指让多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验。 作为网页设计的热点趋势,越来越多的网站应用了这项技术。 通常而言,滚动视差在前端需要辅助 Javascript 才能实现。当然,其实 CSS 在实现滚动视差效果阅读全文
posted @ 2018-08-10 11:40 ChokCoco 阅读(5414) 评论(12) 编辑
摘要: CSS 的伪类选择器和伪元素选择器,让 CSS 有了更为强大的功能。 伪类大家听的多了,伪元素可能听到的不是那么频繁,其实 CSS 对这两个是有区分的。 有个错误有必要每次讲到伪类都提一下,有时你会发现伪类元素使用了两个冒号 (::) 而不是一个冒号 (:),这是 CSS3 规范中的一部分要求,目的阅读全文
posted @ 2018-08-02 12:26 ChokCoco 阅读(2796) 评论(10) 编辑
摘要: 上次发完 不可思议的纯 CSS 导航栏下划线跟随效果 这篇文章之后,很多朋友找我讨论,感叹 CSS 的奇妙。 然后昨天,群里一位朋友问到了一个和这个效果比较类似的效果,问如何 将下面这个动画的下划线效果,从左进入,右边离开修改为从上方进入,下方离开。 描述很难理解,看看原本的效果: 难点所在 第一眼阅读全文
posted @ 2018-04-19 14:27 ChokCoco 阅读(2926) 评论(6) 编辑
摘要: 先上张图,如何使用纯 CSS 制作如下效果? 在继续阅读下文之前,你可以先缓一缓。尝试思考一下上面的效果或者动手尝试一下,不借助 JS ,能否巧妙的实现上述效果。 OK,继续。这个效果是我在业务开发的过程中遇到的一个类似的小问题。其实即便让我借助 Javascript ,我的第一反应也是,感觉很麻烦阅读全文
posted @ 2018-03-27 14:27 ChokCoco 阅读(6184) 评论(11) 编辑
摘要: 最近在研究区块链,可能会有一些非前端文章,感兴趣的可以关注关注哟。 有关注区块链的,肯定会经常看到这两个名词 -- PoW 与 PoS。但是很多人对他们的含义的理解存在很多偏差。那么他们的含义与区别是什么呢? 简单而言,PoW 和 PoS 是 2 种不同的对记账权利的分配方式。 PoW POW(Pr阅读全文
posted @ 2018-03-06 11:31 ChokCoco 阅读(3639) 评论(3) 编辑