标签:CSS

前端开发

8个实现网站滚动效果的 CSS & JavaScript 代码

前端里 - 小鱼 发布于 2023-10-06

滚动是我们网站的用户最常用的操作之一,添加滚动效果是增强用户体验的好方法。例如,对于内容很长的页面增加进度提示,在用户滑动页面的时候增加动画效果等等,这些很小的改进都可以帮助用户更好的使用网站的功能。这篇文章收集了8个实现网站滚动效果的 CSS & JavaScript ...

阅读(699)评论(0)赞 (6)

前端开发

最全的 “文本溢出截断省略” CSS & JS 方案

10

前端里 - 小鱼 发布于 2023-02-26

前言 在我们的日常开发工作中,文本溢出截断省略是很常见的一种需考虑的业务场景细节。看上去 “稀松平常” ,但在实现上却有不同的区分,是单行截断还是多行截断?多行的截断判断是基于行数还是基于高度?这些问题之下,都有哪些实现方案?他们之间的差异性和场景适应性又是如何?凡事就怕较真,较...

阅读(746)评论(0)赞 (4)

前端开发

8个 CSS & JavaScript 实现的相册特效

前端里 - 小鱼 发布于 2023-02-11

照片库(相册)是很多网站的必备功能,因为独特地呈现图像的能力可以帮助网站脱颖而出。网页开发者设计师正在利用这一优势,他们使用最新的 CSS 和 JavaScript 技术来创建抽象布局和引人注目的特效。从简单的网格画廊到超凡脱俗的用户界面,各个特效都有。这边文章收集了8个独特的照...

阅读(868)评论(0)赞 (5)

前端开发

不可思议,纯 CSS 实现图片滚动

12

前端里 - 小鱼 发布于 2020-11-18

本文作者:张敏 原创声明:本文为阅文前端团队 YFE 成员出品,请尊重原创,转载请联系公众号 (id: yuewen_YFE) 获取授权,并注明作者、出处和链接。 背景 传统的swiper太重了,里面封装了很多我们不需要的功能,而一个简单的滚动功能没必要那么重的文件。于是就想着自...

阅读(2456)评论(0)赞 (9)

前端开发

一行 CSS 代码实现 10 种现代布局

12

前端里 - 小鱼 发布于 2020-07-12

周日在家看 web.dev 的 2020 三天 live,发现不少有意思的东西,其中有一项是关于 CSS 的,主播是 Una Kravets(chrome team 成员)。虽然我已经好几个月没有深入研究 CSS 的东西了,不过以前的底子还在(有兴趣的可以看我一年前发布的关于 C...

阅读(2139)评论(0)赞 (7)

前端开发

你真的了解重绘和重排(回流)吗?

2

前端里 - 小鱼 发布于 2018-10-27

回流和重绘可以说是每一个web开发者都经常听到的两个词语,我也不例外,可是我之前一直不是很清楚这两步具体做了什么事情。最近由于部门内部要做分享,所以对其进行了一些研究,看了一些博客和书籍,整理了一些内容并且结合一些例子,写了这篇文章,希望可以帮助到大家。 浏览器的渲染过程 本文先...

阅读(1824)评论(0)赞 (5)

程序人生

面试感悟:当经历所有大厂的实习面试后

前端里 - 小鱼 发布于 2018-08-15

七月虽然不是一个丰收的季节,但却是一个十分酷热的月份。不知有多少小伙伴跟我一样,顶着大太阳奔波在各种面试的征途中。面试是一个漫长的过程。但是也是一个让你快速提升的过程。其中包含了无数的血与泪。去面试前首先我们必须有牢固的基础知识,足够丰富的项目经历(就我而言差不多是三个完整项目经...

阅读(806)评论(0)赞 (35)

前端开发

CSS技巧:逐帧动画抖动解决方案

15

前端里 - 小鱼 发布于 2017-10-22

笔者所在的前端团队主要从事移动端的H5页面开发,而团队使用的适配方案是: viewport units + rem。具体可以参见凹凸实验室的文章 – 利用视口单位实现适配布局 。 笔者目前(2017.08.12)接触到的移动端适配方案中,「利用视口单位实现适配布局」是最好的方案。...

阅读(3077)评论(0)赞 (5)

前端开发

Bulma – 基于 Flexbox 的现代化的 CSS 框架

1

前端里 - 小鱼 发布于 2017-03-25

Bulma 是一个基于 Flexbox 的现代化的 CSS 框架,设计的初衷就是移动优先(Mobile First),模块化设计,可以轻松用来实现各种简单或者复制的内容布局,浏览器支持:浏览器支持:Chrome、Edge、Firefox、Internet Explorer (10...

阅读(3864)评论(0)赞 (22)