By

CSS Effects，一个 CSS 动效相关的网站。她集合 Web 开发中常用的动画效果，如鼠标悬停、输入框获取焦点、加载、以及其他动画；不仅有展示效果，并提供一键拷贝至剪切板，以便您可以在自己的项目中使用。

一键拷贝常用精美 CSS 动效代码

项目说明

CSS Effects 原本 fork 自 GitHub 项目：CSSFX ；在其基础上，增添了十余个常用动画效果；目前有收录各种品类动效 54 个。感兴趣的朋友也可以 fork 去，维护一个属于自己的专属动效池，在需要的时候，一键拷贝（copy），即可使用，很是方便。（这个项目，基于 Nuxt 开发，项目组织与配置具佳、更新或是维护，都十分便捷）。更详细的介绍，请参见 CSSFX - Beautifully simple click-to-copy CSS effects | 倾城之链。

存在价值

对于 Web 开发，实现动画的方式有很多种；如 Js 组合 Html （性能限制）、Svg （复杂，成本高）、Gif 动画（成本高、体积大）、Flash 动画（已被淘汰）、Javascript 组合 Canvas （略微复杂、性能问题）等等；还有就是基于 CSS3 Transition / Animation 来实现动画，它摆脱了对 Js 的控制，且能利用硬件加速，并能实现复杂动画效果，而且复杂度也不是很高；已经成为 Web 动画实现方案首选。而很多常见简单动画效果，已经有开发者基于 CSS 实现，您大可不必每次手动编写，即拷（Copy）即用，岂不美哉？假如您尚不知其中奥妙，也正好可以学习一下。

如何使用

打开 CSS Effects 网站，点击您需要的效果，即会弹出具体实现的代码（Html + CSS），点击 copy 按钮即可。如下视频所示：

此 部署于 Github Pages 服务，如果您不能正常访问，也可以 Clone CSSFX Github 代码，本地运行：

1
2
3
git clone https://github.com/TheHumanComedy/cssfx.git
cd cssfx 
npm i npm run dev

适用人群

CSS，(层叠样式表 Cascading Style Sheets），是一种样式表 语言，用来描述 HTML 或 XML 文档的呈现。CSS 描述了在屏幕、纸质、音频等其它媒体上的元素应该如何被渲染的问题。它是 Web 开发中不可获取的组成部分。

而 CSS Effects 中涉及了 CSS3、CSS 动画、以及伪元素、伪类、Flex 等相关技术，融入了大量技巧，以简单组合，实现精美效果；这对于 Web 开发人员具有非常高的参考价值。如果您在 Web 前端这块，拥有丰富经验，则可以需要的时候，直接 Copy 加以使用；倘若您还是初学者，精美的动画效果，以及这精湛的实现方式，可以带您一起见识 CSS 的作用与强大；复制加以修改，又可以学习 CSS 技巧。

更多作品

  • 倾城之链：作为一个开放平台，旨在云集全球优秀网站，探索互联网中更广阔的世界；在这里，你可以轻松发现、学习、分享更多有用或有趣的事物。
  • Arya - 在线 Markdown 编辑器：一款基于 Vue、Vditor，为未来而构建的在线 Markdown 编辑器；轻量且强大：内置粘贴 HTML 自动转换为 Markdown，支持流程图、甘特图、时序图、任务列表，可导出携带样式的图片、PDF、微信公众号特制的 HTML 等等。
  • 为高效而生：Arya Jarvis：荀子在《劝学》曰：君子生非异也，善假于物也。对于重复而精确性的事物，理想的目标是：有贴心工具加以协助，使得可以用更便捷的方式处理；Github 创建仓库：ARYA JARVIS，即是为此而做的尝试 ── 她旨在为开发人员节省更多时间、精力以及体力。

写于文末

最后，如果您对 CSS 感兴趣，不妨关注晚晴幽草轩一直在维护的与时俱进版前端资源教程 CSS 部分；这里不仅有 CSS 基础、进阶教程；更是涵盖诸如各种动画资源、CSS 编写规范、预处理、CSS 样式库、以及非常实用的 CSS 技巧，以及不断革新的 CSS 标准和话题；是非常值得关注的 CSS 教程资源。

于深圳.福田，2020 年 9 月。

您可能感兴趣的文章

静晴轩 ~ 晚晴幽草轩
个人微信公众号：晚晴幽草轩；名字取自：“天意怜幽草，人间重晚晴”。
专注互联网开发（Web 大前端、快应用、小程序），以及分享优质网站、AI 应用、效率工具、心得感悟等内容。

文档信息

文章目录
  1. 1. 项目说明
  2. 2. 存在价值
  3. 3. 如何使用
  4. 4. 适用人群
  5. 5. 更多作品
  6. 6. 写于文末
  7. 7. 您可能感兴趣的文章