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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/45690.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

关键路径-matlab

路径上边的数目称为路径长度 图的基本知识 求最短路径(Dijkstra算法) 2. 待继续尝试 ①Dijkstra ②floyd_all.m 一 二 ③ LeetCode [329. 矩阵中的最长递增路径]

SpringCloud---zuul路由网关

zuul网关 zuul网关定义 Zuul 是netflix开源的一个API Gateway 服务器, 本质上是一个web servlet(filter)应用。Zuul 在云平台上提供动态路由,监控,弹性,安全等边缘服务的框架。Zuul 相当于是设备和 Netflix 流应用的 Web 网站后端所有请求的…

Kithara与OpenCV (二)

Kithara使用OpenCV QT 进行特征检测 目录 Kithara使用OpenCV QT 进行特征检测OpenCV 特征检测简介Qt应用框架简介项目说明关键代码抖动测试测试平台:测试结果:结论 OpenCV 特征检测简介 OpenCV是一个开源的计算机视觉库,提供了各种图像处理…

一图展示免费开源的分布式版本控制系统​Git

文章目录 前言一、安装Git二、Git配置三、git命令 前言 Git是一个开源的分布式版本控制系统,可以有效、高速地处理从很小到非常大的项目版本管理。也是Linus Torvalds为了帮助管理Linux内核开发而开发的一个开放源码的版本控制软件。 一、安装Git Windows操作系统…

如何更好的优化 ListView 控件的性能

😄作者简介: 小曾同学.com,一个致力于测试开发的博主⛽️,主要职责:测试开发、CI/CD,日常还会涉及Android开发工作。 如果文章知识点有错误的地方,还请大家指正,让我们一起学习,一起…

MongoDB教程(四):mongoDB索引

💝💝💝首先,欢迎各位来到我的博客,很高兴能够在这里和您见面!希望您在这里不仅可以有所收获,同时也能感受到一份轻松欢乐的氛围,祝你生活愉快! 文章目录 引言一、MongoD…

windows查看局域网所有设备ip

windows如何查看局域网所有设备ip 操作方法 一 . 在搜索栏里输入cmd 二 .在命令行黑窗口输入arp -a 三 . 最上面显示的动态地址就是所有设备ip

IOS上微信小程序密码框光标离开提示存储密码解决方案

问题: ios密码框输入密码光标离开之后会提示存储密码的弹窗 解决方案 1、在苹果手机上面把 “自动填充密码”关闭,但是苹果这个默认开启,而且大部分客户也不会去自己关闭。 2、欺骗苹果手机,代码实现。 先说解决思路&#xf…

80. UE5 RPG 实现UI显示技能冷却进度功能

在上一篇文章里,我们实现了通过GE给技能增加资源消耗和技能冷却功能。UI也能够显示角色能够使用的技能的UI,现在还有一个问题,我们希望在技能释放进去冷却时,技能变成灰色,并在技能冷却完成,技能可以再次使…

在Anaconda环境中安装TensorFlow+启动jupyter notebook

1.打开cmd,输入C:\Users\xy>conda create -n tensorflow python3.7 这是在环境中创建了一个名为tensorflow的环境,具体会显示以下信息: C:\Users\xy>conda create -n tensorflow python3.7 Retrieving notices: ...working... done Co…

Python实战Elasticsearch的核心技巧详解

概要 Elasticsearch 是一个分布式的搜索引擎,可以用于全文搜索、结构化搜索、分析等多种场景。它基于Lucene构建,提供了强大的搜索功能和数据分析能力。本文将详细介绍如何使用Python实现与Elasticsearch的交互,包括安装、配置、基本操作和实际应用示例。 安装和配置 安装…

centos单机配置多个内网IP地址

centos单机配置多个内网IP地址 引配置1. 查看当前网络IP配置2. 打开网络配置目录3. 设置静态IP4. 编辑ifcfg-eno1:15. 重启网络配置 引 同一个局域网,但是对接的多个子系统使用了不同的网段,如一个系统主机IP地址是192.168.10.1,另一个系统主…

基于B站视频评论的文本分析,采用包括文本聚类分析、LDA主题分析、网络语义分析

研究主题 本研究旨在通过对B站视频评论数据进行文本分析,揭示用户评论的主题、情感倾向和语义结构,助力商业决策。主要技术手段包括Python爬虫、LDA主题分析、聚类分析和语义网络分析。首先,利用Python爬虫采集大量评论数据并进行预处理。运…

npm发布的包如何快速在cnpm上使用

npm发布的包如何快速在cnpm上使用 解决方案 前往淘宝npm镜像官网 搜索插件库并点击同步 等待一分钟即可查看最新版本

linux进程周边知识——内核对硬件的管理——计算机世界的管理

前言:本节主要讲解内核也就是操作系统对于硬件的管理, 本节内容同样为进程的周边知识。 主要是关于软件方面, 和我的上一篇——冯诺依曼体系结构可以说是兄弟文章, 这篇文章主要是关于硬件方面。 两篇文章都是为学习进程做准备。但…

小程序创建与项目初始化(构建 npm + 集成 Sass)

一、打开微信开发者工具 确认 左侧导航栏是否选中的 小程序点击 【】创建小程序 二、创建小程序 三、初始化 清空 app.wxss、app.js 去掉 rendererOptions 和 componentFramework 不需要最新的搜索引擎 留下以下文件 四、自定义构建 npm 集成 Sass 首先 先把小程序源…

Go 高效Web开发框架 Echo

💝💝💝欢迎莅临我的博客,很高兴能够在这里和您见面!希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。 推荐:「stormsha的主页」…

WEB前端01-HTML5基础(01)

一.WEB相关概念 软件架构 C/S: Client/Server (客户端/服务器端):在用户本地有一个客户端程序,在远程有一个服务器端程序 优点:用户体验好 缺点:开发、安装,部署,维护麻烦 B/S: Br…

Qt Qml编程 基础部分 认识qml

学习目标:认识Qml编程 学习内容 qml介绍 Qt QML 是一个用来设计和开发Qt应用程序用户界面的声明性语言。QML 是 Qt 的元对象语言(Meta-Object Language)的缩写。它与 C 一起使用,来为 Qt 应用程序创建用户界面。 QML 是一个标记语言,它允许开发人员使用类似 HTM…

Chapter 1:数据结构前言

在数字化的世界里,我们每天都在与数据打交道。然而,你是否曾想过,这些数据是如何被组织、存储和处理的?这就是数据结构的魅力所在。 数据结构,简单来说,就是数据的组织方式。它决定了我们如何高效地访问和操…