一个CSS动态效果在线预览,一键复制代码的网站-张弦先生-chrafz.com

网页设计师或网站开发者一定对CSS不陌生,CSS中文是阶层式样式表,通常会简称为样式表,主要是用来控制网页中看到的各种样式,例如文字大小、间距、背景色、页面布局或各种元素呈现的方式。随着现今大部分浏览器都已经支持CSS3,在CSS3也加入许多新的功能,其中也支持动画和立体效果,这都让网页能有更多更不同的变化,也不需要再使用旧方法,让效果在编写及管理上更轻松。

如果你想知道透过CSS代码可以做到那些动态效果,CSSeffectsSnippets是你可以去探索的网站,这个网站收录大约20多种CSS动画,无论是加载读取中,或是将光标移动过去产生的动画,都能在网站上即时预览。

CSSeffectsSnippets最值得推荐的是所有效果都能在点选后快速复制相关代码,直接让开发者取用,运用到自己的网站或博客,当然可能还是需要经过微调,不过不用从头开始,也不需在网路上寻找这些动画代码,非常方便而且省时。

CSSeffectsSnippets也是开源项目,可以从GitHub找到相关说明。

站点名称:CSSeffectsSnippets

网站连接:https://emilkowalski.github.io/css-effects-snippets/

使用教学

STEP 1

开启CSSeffectsSnippets网站可以看到所有收录的CSS动画效果,有些Hover me的按钮或连接是要将光标移动上去才会出现效果,大家可以自己打开网站实际体验一下,原来目前的CSS3已经能做这么多动画,实在非常强大!

一个CSS动态效果在线预览,一键复制代码的网站-张弦先生-chrafz.com

STEP 2

点选要使用到自己网站的CSS效果,下方会出现绿色的Copied to clipboard提示信息后表示相关代码已经复制到剪贴板。

一个CSS动态效果在线预览,一键复制代码的网站-张弦先生-chrafz.com

贴回到编辑器就能看到代码啰!前面有提到代码可能还是要经过微调才能正常在网站上使用,不过不用自己编写真是太好了,若开发网站或应用程序需要CSS动画,可以到CSSeffectsSnippets找找有没有符合自己需求的效果。