CSS技巧专栏：一日一例 5-纯CSS实现背景色从四周向中心填充的按钮特效

特此说明

本专题专注于讲解如何使用CSS制作按钮特效。前置的准备工作和按钮的基本样式，都在本专栏第一篇文章中又详细说明。自本专栏第四篇文章起，本专栏都将直接跳过前面的内容，不再重复复制，需要了解按钮基础样式的同学，请移步：《CSS技巧 - 一日一例 （1）：会讨好的热情按钮》。

在开始今天的内容之前，我想，我应该先把前一篇的作业答案公布一下。

上一篇文章最后的小作业做法公布

在昨天的文章 CSS技巧专栏：一日一例 4.纯CSS实现两款流光溢彩的酷炫按钮特效 最后，我留了一个小题目：

观察效果

它的效果是，当鼠标移动到按钮上时，鼠标背景迅速模糊并向后缩小，流光效果扩散，按钮文字向前，形成一种文字与按钮分离的视觉错觉。

解决思路

仔细看这个动画，当鼠标移动上去，有一个层向后缩小到消失了。文字层向前放大。还有一个背景色的层模糊并放大了。我们知道这里肯定利用了blur滤镜，但如果把 滤镜 绑定在按钮本体上，那么文字也会跟着被模糊。要保持文字不模糊，就需要文字与背景色分离，并且，不能把blur写在背景色层上。于是，我想到，把按钮本体的背景色设为不存在，这样，就等于让文字独占了这一层。然后利用before和after两个伪类，分别复制一个带背景色的层。鼠标悬浮被激活时，把before的层放大并模糊，把after层模糊并缩小，文字层也随之放大，就可以实现这个效果了。

第一步，修改按钮本体的样式表：

.button-primary{
  position: relative;
  border: transparent;
  outline: transparent;
  color: #fff;
  background: none; /* 这里，把background修改为没有，为了让文字独占这个层 */
  background-size: 500%;
  animation: animate 20s linear infinite;   
  text-shadow: -1px -1px 0px rgba(0,0,0,0.3),1px 1px 0p

原文地址：https://blog.csdn.net/uuplay0216/article/details/140387163

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！