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）！