随笔分类 - CSS
摘要：一、需求描述 在移动端的开发中，经常遇到下图这样的弧边设计 弧边其实有很多方案，但像上图这样的情况更适合用 border 实现，因为这样更方便封装为组件 二、初步实现 可以将页面顶部的区域看做一个大圆与页面的交集，基于这个思路就能开发出一个基本的 html 结构 <body> <div classN
阅读全文
摘要：最近写了太多的逻辑代码，写几行 CSS 换换脑子 一、一闪而过 很常见的效果，其实就是一个倾斜长条平移了一段距离而已 要点在于给 button 设置 overflow: hidden; 以及确保长条的初始位置和结束位置在按钮区域外面 HTML <button class="shiny-button"
阅读全文
摘要：各种偏门捷径实现如图所示的评分组件 一、低配版 const rate = (num) =>"★★★★★☆☆☆☆☆".substring(5 - num, 10 - num); 没错，只需一行代码就能实现评分（狗头） 虽然星星的样式一言难尽，也没有星星的交互，但这种实现方式你想到过吗？ 二、标准版 r
阅读全文
摘要：不知道为什么，UI 很喜欢设计蜂巢效果（摊手） 一、实现六边形 首先用传统的方式来分析一下六边形 可以拆分成三个矩形，每个矩形旋转正负 60° 得到其它两个矩形 由此可以设计出基本的 HTML 结构 矩形的宽高先随便设置，后面组件化的时候再计算其关系，通过 props 设置 然后设置 CSS 样式
阅读全文
摘要：标题党一时爽，一直标题党一直爽 还在上大学那会儿，我就喜欢玩 Photoshop。后来写网页的时候，由于自己太菜，好多花里胡哨的效果都得借助 Photoshop 实现，当时就特别希望 CSS 能像 Photoshop 一样处理图片。 随着对 CSS 的了解越多，我发现 CSS 有很多平时用得少（或者
阅读全文
摘要：浏览器支持两种类型的渐变：线性渐变 (linear-gradient)，径向渐变 (radial-gradient) 渐变在 CSS 中属于一种 Image 类型，可以结合 background-image 属性使用 和图片不同的是，渐变不需要引入，而是由代码直接生成的，所以比图片更高效易用 一、简
阅读全文
摘要：就像上图这样的动画效果 在导航栏里的时候，下划线跟随鼠标移动，鼠标移出导航栏时，下划线回到初始位置，同时要适应导航的宽度 为了适应导航的宽度，就不能给导航元素设置 margin，然后将导航元素的 clientWidth 设置给下划线 然后需要让下划线独立于导航之外，从而保证它的无缝滑动（其实也可以用
阅读全文
摘要：瀑布流布局是一个之前挺火，现在也比较常见的一种布局 这种看起来参差不齐的多栏布局，重点在于每个元素等宽不等高，一般图片网站应用较多 随着页面滚动，数据块会在每列底部不断加载，理论上可以无限加载，且不会页面美观 Pinterest、花瓣网都是比较成熟的采用瀑布流布局的网站 效果图： PS：这篇博客只有
阅读全文
摘要：三列布局作为网页设计中最常见的布局，其实现方法早已被诸位前端大神摸透 网上相关的文章很多，原本已无必要再做赘述 不过既然开了 Layout 系列，三列布局就是必修课 本文整理了一些常用的实现方法，然后加入了一些个人愚见，希望能给诸位看官一些新的启发 效果图： 一、绝对定位 最容易理解的一种方法，以中
阅读全文
摘要：最近被一个布局问题给难住了，枉我一向自称掌握最好的前端技能是 CSS，写完博客就得敷脸去 需求是实现一个自适应的正方形卡片，效果如下： 顺便（开个坑）写个系列，总结那些设计精妙的布局结构 本次页面的 HTML 结构如下： 套路一、垂直 padding + 定位 在 CSS 中，margin 和 pa
阅读全文
摘要：打字机动画是一个很常见的动画效果，实现的方式也有很多 最近在项目中刚好遇到了类似的需求，整理了几个实现动画的方法，分享一下~ 方法一、 效果最好的打字机动画 通过 js 的定时器增减文字，单独用一个标签来写光标动画，这样即使文字换行也能良好呈现 HTML CSS JS 方法二、 在网上找的方法，纯
阅读全文
摘要：昨天 UI 提交过来一个登录页的设计稿，要求背景有一个流星雨动画，做完之后觉得挺有趣，分享一下~ 一、流星动画 首先创建一个 div 作为画布 为了防止浏览器分辨率太大而影响视觉效果，给画布加了 max-width 和 margin:auto 然后画出流星的形状 创建动画，实现流星划过、渐入渐隐的效
阅读全文
摘要：最近面了好几个前端，工作经验有高有低，居然都不知道绝对底部是什么，也没有人能说出一种实现方式，让我不禁感慨前端领域的良莠不齐 绝对底部，或者说 Sticky Footer，是一种古老且经典的页面效果： 当页面内容超出屏幕，页脚模块会像正常页面一样，被推到内容下方，需要拖动滚动条才能看到 而当页面内容
阅读全文
摘要：由于分辨率 DPI 的差异，高清手机屏上的 1px 实际上是由 2×2 个像素点来渲染，有的屏幕甚至用到了 3×3 个像素点 所以 border: 1px 在移动端会渲染为 2px 的边框 虽然用户在实际使用的时候，很难发现这 1px 的差异，但是设计师往往会在这 1px 上较劲，这就产生了经典的
阅读全文