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

07-16 1062阅读

特此说明

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

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

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

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

CSS技巧专栏:一日一例 5-纯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
VPS购买请点击我

文章版权声明:除非注明,否则均为主机测评原创文章,转载或复制请以超链接形式并注明出处。

目录[+]