iCSS
iCSS copied to clipboard
chokcoco
不止于 CSS
在各种短视频界面上，我们经常会看到类似这样的点赞动画：  非常的有意思，有意思的交互会让用户更愿意进行互动。 那么，这么有趣的点赞动画，**有没有可能使用纯 CSS 实现呢**？那当然是必须的，本文，就将巧妙的借助 `transition`，仅仅使用 CSS 完成这么一个点赞动画。 ## 实现不同表情的不断上升 如果使用纯 CSS 实现这一整套动画的话。我们**首先需要实现一段无限循环的，大量不同的表情不断向上漂浮的动画**。 像是这样：  这个整体还是比较容易实现的，核心原理就是同一个动画，设置不同的 `transition-duration`，`transition-dalay`，和一定范围内的旋转角度。 我们首先要实现多个表情，一个 DOM 标签放入一个随机的表情。 我们可以手动一个一个的添加： ```HTML 😀 ❤️ 👏 // ... 随机设置不同的表情符号，共 50...
CSS 阴影的存在，让物体看上去更加有型立体。 然而，在最简单的阴影使用之上，我们可以实现更多有意思且更加立体的阴影效果。 本文将带大家看看如何使用 CSS 实现几类比普通阴影更加立体的阴影效果。 ## CSS 阴影基础 CSS 中，明面上可以实现阴影的有三个属性： + box-shadow - 盒阴影 + text-shadow - 文字阴影 + filter: drop-shaodw() - 滤镜内的阴影 关于它们的基础语法和使用就不过多描述，这一部分大家可以先在 MDN 补齐，贴几张图快速复习一下： box-shadow - 盒阴影：...
本文将探讨一下，在多行文本情形下的一些有意思的文字动效。 多行文本，相对于单行文本，场景会复杂一些，但是在实际业务中，多行文本也是非常之多的，但是其效果处理比起单行文本会更困难。 ## 单行与多行文本的渐隐 首先，我们来看这样一个例子，我们要实现这样一个单行文本的渐隐：  使用 `mask`，可以轻松实现这样的效果，只需要： ```HTML Lorem ipsum dolor sit amet consectetur. ``` ```CSS p { mask: linear-gradient(90deg, #fff, transparent); } ``` 但是，如果，场景变成了多行呢？我们需要将多行文本最后一行，实现渐隐消失，并且适配不同的多行场景：  这个就会稍微复杂一点点，但是也是有多种方式可以实现的。 首先我们来看一下使用 `background`...
粒子动画，顾名思义，就是页面上存在大量的粒子构建而成的动画。传统的粒子动画主要由 Canvas、WebGL 实现。 当然，不使用 HTML + CSS 的主要原因在于，粒子动画通常需要较多的粒子，而如果使用 HTML + CSS 的话势必需要过多的 DOM 元素，这也就导致了使用 HTML + CSS 构建的粒子动画在性能上毫无优势。 当然，如果仅仅是从效果的角度而言，使用 CSS 构建的粒子动画一样可以做到非常的令人震撼。 本文，将尝试利用 CSS 来构建粒子动画。 ## 工欲善其事必先利其器 OK，绘制 CSS 粒子动画首先需要有好的工具。本文将会继续借助 CSS-Doodle...
本文将介绍 CSS 中一个非常有意思的属性 mask 。 顾名思义，mask 译为遮罩。在 CSS 中，mask 属性允许使用者通过遮罩或者裁切特定区域的图片的方式来隐藏一个元素的部分或者全部可见区域。 其实 mask 的出现已经有一段时间了，只是没有特别多实用的场景，在实战中使用的非常少，本文将罗列一些使用 mask 创造出来的有意思的场景。 ## 语法 最基本，使用 mask 的方式是借助图片，类似这样： ```CSS { /* Image values */ mask: url(mask.png); /* 使用位图来做遮罩...
本文将介绍一些使用 SVG `feTurbulence` 滤镜实现的一些有趣、大胆的的动效。 系列另外两篇： + [有意思！强大的 SVG 滤镜](https://github.com/chokcoco/cnblogsArticle/issues/27) + [有意思！不规则边框的生成方案](https://github.com/chokcoco/iCSS/issues/106) ## 背景 今天在群里面聊天，看到有人发这个表情包：  刚好最近一直在学习 SVG，脑海中就把这个表情包的效果和 `feTurbulence` 滤镜关联了起来。 如果我们有一张类似上图表情包的静态图，利用 `feTurbulence` 生成的噪声函数，运用在静态的表情包之上，再添加些许动画，是不是也能制作一张类似的动图效果呢？ ## 什么是 SVG `feTurbulence` 滤镜？ 如果你对 SVG 滤镜还不算太了解，可以简单看看我的这篇文章入门：[有意思！强大的...
开本 `issues` ，讨论一些有趣的 CSS 题目，抛开实用性而言，一些题目为了拓宽一下解决问题的思路，此外，涉及一些容易忽视的 CSS 细节。 解题不考虑兼容性，题目天马行空，想到什么说什么，如果解题中有你感觉到生僻的 CSS 属性，赶紧去补习一下吧。 不断更新，不断更新，不断更新，重要的事情说三遍。 > 本文是 iCSS 的开篇之作，当初开 iCSS 的仓库，就是想着收集 CSS 中各种有意思的奇技淫巧以及一些容易忽视的 CSS 细节，抛开了实用性，题目更多的为了拓宽解决问题的思路。 ## 1、下面这个图形，只使用一个标签，可以有多少种实现方式：  其实就是考察，CSS 有多少种生成直线的方式，不管实用不实用，除去使用图片的方法，我们罗列一下。 假设我们的单标签是一个 `div`: ``` html...
本文，将向大家介绍一种将多个 CSS 技巧运用到极致的技巧，利用纯 CSS 实现拼图游戏。 本技巧源自于 [Temani Afif](https://codepen.io/t_afif) 的 CodePen [CSS Only Puzzle game](https://codepen.io/t_afif/pen/JjLWpOJ)。一款完全由 CSS 实现的拼图游戏。 我们要做的，就是将散落的图片碎块，复原成一幅完整的图，像是这样：  注意，这是完全由 CSS 实现的，我们拆解一下核心的难点： 1. 如何让一个元素变得可以拖拽？ 2. 如何让一个元素从一个固定的位置通过拖拽，停留在另外一个位置？ 3. 最难的是，基于（2），拖拽元素后释放，只有释放在特定的位置，元素才会固定到新位置，否则，返回到原先的位置 Oh No，上面的 (2)、(3)...
今天，群友问了这样一个问题，如下所示的鼠标跟随交互效果，如何实现：  简单分析一下，这个交互效果主要有两个核心： 1. 借助了 CSS 3D 的能力 2. 元素的旋转需要和鼠标的移动相结合 本文，就将讲述如何使用纯 CSS 实现类似的交互效果，以及，借助 JavaScript 绑定鼠标事件，快速还原上述效果。 ## 纯 CSS 实现元素的 3D 旋转 如果不借助 JavaScript，仅仅只是 CSS，如何实现类似的 3D 旋转效果呢？ 这里会运用到一种名为**正反旋转相消**或者是**正负旋转相消**的小技巧。嗯，名字起的很奇怪，好像数学概念一样。 在动画中，旋转是非常常用的属性， ```CSS {...
在一些面经中，经常能看到有关 CSS 的题目都会有一道**如何使用 CSS 绘制三角形**，而经常的回答通常也只有使用 border 进行绘制一种方法。 而 CSS 发展到今天，其实有很多有意思的仅仅使用 CSS 就能绘制出来的三角形的方式，本文将具体罗列讲讲。 通过本文，你能了解到 6 种使用 CSS 绘制三角形的方式，并且它们都非常好掌握。当然本文仅是抛砖引玉，CSS 日新月异，可能还有一些有意思的方法本文遗漏了，欢迎大家在留言区补充~ ## 使用 border 绘制三角形 使用 border 实现三角形应该是大部分人都掌握的，也是各种面经中经常出现的，利用了高宽为零的容器及透明的 border 实现。 简单的代码如下： ```CSS div...