随笔分类 - Javascript&CSS3动画
摘要：在之前，我介绍过几种使用纯 CSS 实现波浪效果的方式，关于它们有两篇相关的文章： 纯 CSS 实现波浪效果! 巧用 CSS 实现酷炫的充电动画 本文将会再介绍另外一种使用 CSS 实现的波浪效果，思路非常有意思。 从定积分实现曲边三角形面积说起 在进入主题之前，先看看这个，在高等数学中，我们可以通
阅读全文
摘要：本文将介绍一种利用 CSS 获取图片主题色的小技巧。一起看看~ 背景 起因是微信技术群里有个同学发问，有什么方法能够获取图片的主色呢？有一张图片，获取他的主色调： 利用获取到的这个颜色值，来实现类似这样的功能 -- 容器中有一张图片，希望背景色可以适配图片的主色，像是这样： 大家出谋划策，有说利用
阅读全文
摘要：CSS 中有一个非常有意思的模块 -- CSS Motion Path Module Level 1，翻译过来也就是运动路径。本文将对 motion path 一探究竟，通过本文，你可以了解到： 什么是 CSS motion path 使用 CSS motion path 制作简单路径动画 使用 C
阅读全文
摘要：本文主要讲讲 CSS 非常新的一个特性，CSS @property，它的出现，极大的增强的 CSS 的能力！ 根据 MDN -- CSS Property，@property CSS at-rule 是 CSS Houdini API 的一部分, 它允许开发者显式地定义他们的 CSS 自定义属性，允
阅读全文
摘要：今天逛博客网站 -- shoptalkshow，看到这样一个界面，非常有意思： 觉得它的风格很独特，尤其是其中一些边框。 嘿嘿，所以来一篇边框特辑，看看运用 CSS，可以在边框上整些什么花样。 border 属性 谈到边框，首先会想到 border，我们最常用的莫过于 solid，dashed，上图
阅读全文
摘要：本文的主题是 Glitch Art，故障艺术。 什么是故障艺术？我们熟知的抖音的 LOGO 正是故障艺术其中一种表现形式。它有一种魔幻的感觉，看起来具有闪烁、震动的效果，很吸引人眼球。 故障艺术它模拟了画面信号出现故障导致成像错误的感觉。青色色块与红色色块无法重合就是这种故障的体现。从胶片时代开始到
阅读全文
摘要：循序渐进，看看只使用 CSS ，可以鼓捣出什么样的充电动画效果。 画个电池 当然，电池充电，首先得用 CSS 画一个电池，这个不难，随便整一个： 欧了，勉强就是它了。有了电池，那接下来直接充电吧。最最简单的动画，那应该是用色彩把整个电池灌满即可。 方法很多，代码也很简单，直接看效果： 有内味了，如果
阅读全文
摘要：最近一直在使用 css-doodle 实现一些 CSS 效果。 css-doodle 是一个基于 Web-Component 的库。允许我们快速的创建基于 CSS Grid 布局的页面，以实现各种 CSS 效果（或许可以称之为 CSS 艺术）。后续几篇文章可能都会与之有关。 当然，本文的主角并不是
阅读全文
摘要：正文从下面开始。 今天的小技巧是使用纯 CSS 生成火焰，逼真一点的火焰。 嗯，长什么样子？在 CodePen 上输入关键字 CSS Fire，能找到这样的： 或者这样的： 我们希望，仅仅使用 CSS ，效果能再更进一步吗？能不能是这样子： 如何实现 嗯，我们需要使用 filter + mix-bl
阅读全文
摘要：何为滚动视差 视差滚动（Parallax Scrolling）是指让多层背景以不同的速度移动，形成立体的运动效果，带来非常出色的视觉体验。 作为网页设计的热点趋势，越来越多的网站应用了这项技术。 通常而言，滚动视差在前端需要辅助 Javascript 才能实现。当然，其实 CSS 在实现滚动视差效果
阅读全文
摘要：先上张图，如何使用纯 CSS 制作如下效果？ 在继续阅读下文之前，你可以先缓一缓。尝试思考一下上面的效果或者动手尝试一下，不借助 JS ，能否巧妙的实现上述效果。 OK，继续。这个效果是我在业务开发的过程中遇到的一个类似的小问题。其实即便让我借助 Javascript ，我的第一反应也是，感觉很麻烦
阅读全文
摘要：本文接前文：不可思议的混合模式 mix-blend-mode 。由于 mix-blend-mode 这个属性的强大，很多应用场景和动效的制作不断完善和被发掘出来，遂另起一文继续介绍一些使用 mix-blend-mode 制作的酷炫动画。 CSS3 新增了一个很有意思的属性 -- mix-blend-
阅读全文
摘要：很久之前在张鑫旭大大的博客看到过一篇 PNG格式小图标的CSS任意颜色赋色技术，当时惊为天人，感慨还可以这样玩，私底下也曾多次想过有没有其他方法可以实现，又或者不仅仅局限于 PNG 图片。 mix-blend-mode 与 background-blend-mode mix-blend-mode 在
阅读全文
摘要：承接上一篇你所不知道的 CSS 动画技巧与细节，本文主要介绍 CSS 滤镜的不常用用法，希望能给读者带来一些干货！ 系列 CSS 文章汇总在我的 Github ，持续更新，欢迎点个 star 订阅收藏。 OK，下面直接进入正文。本文所描述的滤镜，指的是 CSS3 出来后的滤镜，不是 IE 系列时代的
阅读全文
摘要：怕标题起的有点大，下述技巧如果你已经掌握了看看就好，欢迎斧正，本文希望通过介绍一些 CSS 不太常用的技巧，辅以一些实践，让读者可以更加深入的理解掌握 CSS 动画。 废话少说，直接进入正题，本文提到的动画不加特殊说明，皆指 CSS 动画。 正负旋转相消 嗯。名字起的很奇怪，好像数学概念一样。 （写
阅读全文
摘要：一直以来，使用纯 CSS 实现波浪效果都是十分困难的。 因为实现波浪的曲线需要借助贝塞尔曲线。 而使用纯 CSS 的方式，实现贝塞尔曲线，额，暂时是没有很好的方法。 当然，借助其他力量（SVG、CANVAS），是可以很轻松的完成所谓的波浪效果的，先看看，非 CSS 方式实现的波浪效果。 使用 SVG
阅读全文
摘要：感谢 LeaVerou 大神，让我们可以提前使用上这么美妙的属性。 conic-gradient 是个什么？说到 conic-gradient ，就不得不提的它的另外两个兄弟： linear-gradient : 线性渐变 radial-gradient : 径向渐变 说这两个应该还是有很多人了解并
阅读全文
摘要：CSS 发展到今天已经越来越强大了。其语法的日新月异，让很多以前完成不了的事情，现在可以非常轻松的做到。今天就向大家介绍几个比较新的强大的 CSS 功能： clip-path shape-outside shape 的意思是图形，CSS shapes 也就是 CSS 图形的意思，也就是使用 CSS
阅读全文
摘要：开本系列，谈谈一些有趣的 CSS 题目，题目类型天马行空，想到什么说什么，不仅为了拓宽一下解决问题的思路，更涉及一些容易忽视的 CSS 细节。 解题不考虑兼容性，题目天马行空，想到什么说什么，如果解题中有你感觉到生僻的 CSS 属性，赶紧去补习一下吧。 不断更新，不断更新，不断更新，重要的事情说三遍
阅读全文
摘要：开本系列，谈谈一些有趣的 CSS 题目，题目类型天马行空，想到什么说什么，不仅为了拓宽一下解决问题的思路，更涉及一些容易忽视的 CSS 细节。 解题不考虑兼容性，题目天马行空，想到什么说什么，如果解题中有你感觉到生僻的 CSS 属性，赶紧去补习一下吧。 不断更新，不断更新，不断更新，重要的事情说三遍
阅读全文