这 66 个特效，是我历时4个多月在油管一个一个跟着敲出来的，为了加强记忆，每个练习，我都录制了视频，在这里分享出来给大家。大家可能又会调侃了，你是工作不饱和吧，有时间做这些。其实，我目前工作还是挺饱和的，都是挤出来的。我们是9点上班，我基本7点半就到公司自学了，这样我就有一个半小时的时间来做这些了。

对于 CSS 评价，无论是在论坛还是身边的人，我听到最多的是学 CSS 这些花里胡哨没啥用，实际项目中又用不到。听到这些心里还是挺实受挫的，有时候会怀疑自己，我学习的方向是不是错了。但在几次的项目需要用到一些特效，我都能很快的找到思路并做出来，我想这是得益于，我平时所学的这些特效积累出来的。

转载说明：原创不易，未经授权，谢绝任何形式的转载

俗话说得好，兴趣是最好的老师。本篇文章搜集了几个漂亮的宇宙风格按钮动画效果的代码，希望它们能够激发你对 CSS 的热爱。作为前端开发者，我们不仅仅是制作写页面和与 后端 API 打交道，偶尔也需要调味剂。废话不多说，让我们一起来解读这些 CSS 代码吧。

作者：吴冠禧 WecTeam

转发连接：
https://mp.weixin.qq.com/s/u5GHsA0vHz8A_MmGslRw2g

在Axure中实现动态渐变背景，可通过注入CSS代码结合交互事件，创造出视觉冲击力强的动态效果。本文将结合案例解析技术原理、实现步骤及扩展应用。

一、技术原理解析

一、2D 变换

1. 2D 位移

/* x 轴方向位移 30px */
transform: translateX(30px);
/* 分别设置 x 轴与 y 轴的位移 */
transform: translateX(30px) translateY(40px);
/* 同时设置 x 与 y 的方向位移 */
transform: translate(-50%, -50%);

循序渐进，看看只使用 CSS ，可以鼓捣出什么样的充电动画效果。

画个电池

当然，电池充电，首先得用 CSS 画一个电池，这个不难，随便整一个：

欧了，勉强就是它了。有了电池，那接下来直接充电吧。最最简单的动画，那应该是用色彩把整个电池灌满即可。

作者：semlinker

转发链接：
https://mp.weixin.qq.com/s/3bY8LqOB9_6_3UctQOdAhw

前言

本文小编将给大家介绍十个 「“惊人"」 的文字动画效果，希望阿宝哥精心录制的十个 Gif 动画能让大家感到

点击页底“阅读原文”下载原码

CSS Hover 在网页设计中是极为常用的一个 CSS 效果，只要你有创造力，都可以让 Hover 变得更多姿多彩，今天我们主要分享40多款使用 CSS HOVER 完成的图像效果，喜欢的可以下载下来使用哦。

网站名称：imageshover.css

使用教程

该样式目前拥有40多种，使用也十分简单，参照下面的步骤制作即可。