随记

摘要： 什么是路径动画？ 随手画一条不规则的线，让元素按照这条不规则的线运动起来，这就是所谓的路径动画。 前面说过的动画都只能针对某一个 CSS 属性，要想实现路径动画可没办法，路径动画必须借助 CSS3 的 offset 相关能力。 offset 相关属性 要实现路径动画，必须用到 offset 的相关属 阅读全文

摘要： 什么是瀑布流？ 看一张图，以下图片来源于花瓣网截图： 如上图所示，瀑布流就是让内容按列显示，自动填充空白。 使用 column 实现瀑布流 源码： <div class="masonry"> <div class="item"> </div> <div class="item"> </div> <d 阅读全文

摘要： @media 媒体查询的出现解决了什么问题？ 曾经，一个网页要兼容移动端和 PC 端，前端的代码复杂度嗖嗖嗖的飙升，需要使用多套代码对各种屏幕尺寸做适配。 @media 的出现解决了 CSS 中无法适配设备尺寸的问题，让 CSS 拥有了处理简单逻辑的能力。 媒体查询就像进店试穿衣服一样，穿得上，咱就 阅读全文

摘要： 数学函数可以用来做什么？ 最基础的当然是用来进行四则运算了，再进一步可以用来平方，对数，幂，绝对值，取余等，当然还可以用来计算三角函数。 CSS 中的数学函数 灵活运用 CSS 中的数学函数，可以抛弃很多原本需要 JS 才能实现的布局场景。 calc() 最基础的四则运算函数，对头，就是用来做小学就 阅读全文

摘要： HELLO，这里是大熊的前端开发笔记。 曾经主题切换功能可以作为软件中亮眼的卖点存在，毕竟那时候要实现换肤可不容易，一套主题一套样式，这代码的重复率嗖嗖嗖的就涨上去了~~当然也可以借助 CSS 预编译 语言编译出多套 CSS 样式表。 没有用觉得我们其实并不需要多套样式表实现换肤？我们只是想要一个像 阅读全文

摘要： 相关属性 @keyframes 定义动画的关键帧序列 animation-name 指定 @keyframes 动画的名称 animation-duration 动画单次循环的持续时间（必需属性，否则动画不会生效） animation-timing-function 动画速度曲线 animation 阅读全文

摘要： CSS3 规范出现之前，要实现一个动画效果那必须借助 JavaScript 的能力才够得着，所以当时的前端开发但凡听到动画交互，那眉头可就成了一个川字儿了~ transition 的出现，改变了实现动画难的困境，也让前端的交互不再生硬，所有的页面元素如同有了灵性一般。 transition 过渡 要 阅读全文

摘要： 影响元素位置的 CSS 属性基本介绍完毕（参考前几篇文章），现思考一个最常见的需求： 一个子元素，要摆放在盒子的正中央，使用 CSS 布局手段，究竟有多少种实现方式？ 上下左右（水平方向、垂直方向）要同时居中，在 Web 领域应该算是非常常见的开发需求了，最最常见的地方就是弹窗，比如： 文本居中 先 阅读全文

摘要： CSS transform 属性中文翻译过来是 变换，始终觉得翻译差那么一点意思。它可以用来改变元素形状，比如旋转、缩放、移动、倾斜等，就是它可以把元素各种拿捏~ transform 特性是在不改变自身尺寸的情况下，对元素进行各种变形，元素自身的文档流位置还是会保留，语言有些空洞，下面看例子。 笛卡 阅读全文

摘要： CSS float 浮动属性最早用于文字环绕图片效果，就像传统报纸上的印刷排版一样。 CSS2 的规范推动了浮动用于其他元素，float 便被大范围应用于布局，当年常说的 div + css 布局，float 绝对占有一席之地，float 用于布局手段便颠覆了再之前的表格布局，如今表格只用于数据展示 阅读全文