24

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

 3 years ago
source link: https://quickapp.lovejade.cn/click-to-copy-css-effects/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

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

这个项目是基于 GitHub 的一个项目（ CSSFX :tada:） fork 而来，添加了些动画效果。感兴趣的朋友也可以 fork 去，维护一个自己的 动效池 ，在需要的时候，一键拷贝（copy），很是方便。（这个项目，基于 Nuxt 开发，项目组织与配置都是巨佳、更新或是维护，都十分便捷）。更详细的介绍，请参见 CSSFX - Beautifully simple click-to-copy CSS effects | 倾城之链 。

如何使用

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

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 技巧。


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK