毛玻璃态按钮悬停效果

效果展示

在这里插入图片描述

页面结构组成

通过上述的效果展示可以看出如下几个效果

  1. 毛玻璃的按钮
  2. 按钮上斜边背景及动画
  3. 按钮上下边缘的小按钮和小按钮动画

CSS3 知识点

  • backdrop-filter 属性
  • transition 属性
  • transform 属性

实现基础按钮结构

<div class="btn"><a href=""></a>
</div>
.container .btn {position: relative;width: 155px;height: 50px;margin: 20px;
}.container .btn a {position: absolute;top: 0;left: 0;width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;background: rgba(255, 255, 255, 0.05);box-shadow: 0 15px 35p rgba(0, 0, 0, 0.2);border-radius: 30px;/* 为了增强按钮的质感,所以在头部和底部添加了两个边线 */border-top: 1px solid rgba(255, 255, 255, 0.1);border-bottom: 1px solid rgba(255, 255, 255, 0.1);color: #fff;font-weight: 400;letter-spacing: 4px;text-decoration: none;overflow: hidden;transition: 0.5s;backdrop-filter: blur(15px);z-index: 2;
}

实现按钮上的斜边背景

按钮的背景是一个色块,为了不让页面的结构过于复杂,所以我们在实现按钮上的斜边背景的时候,则是使用伪元素来实现。

.container .btn a::before {content: "";display: block;position: absolute;top: 0;left: 0;width: 50%;height: 100%;background: linear-gradient(to left, rgba(255, 255, 255, 0.15), transparent);transform: skewX(45deg) translateX(0);transition: 0.5s;
}

实现基础按钮的动画

.container .btn:hover a::before {transform: skewX(45deg) translateX(200%);
}

实现按钮上下两个按钮

在上述的效果图中,按钮上下边缘是有两个小按钮的,不让页面过于复杂,我们可以使用伪元素进行实现。

.container .btn::before {content: "";display: block;position: absolute;left: 50%;transform: translateX(-50%);bottom: -5px;width: 30px;height: 10px;background: #f00;border-radius: 10px;transition: 0.5s;transition-delay: 0s;
}.container .btn::after {content: "";display: block;position: absolute;left: 50%;transform: translateX(-50%);top: -5px;width: 30px;height: 10px;background: #f00;border-radius: 10px;transition: 0.5s;transition-delay: 0s;
}

为了增强质感我们添加了阴影。

/* 例子中是有三个按钮,所以这里采用nth-child()属性进行其他按钮的颜色和阴影修改 */
.container .btn:nth-child(1)::before,
.container .btn:nth-child(1)::after {background: #ff1f71;box-shadow: 0 0 5px #ff1f71, 0 0 15px #ff1f71, 0 0 30px #ff1f71, 0 0 60px#ff1f71;
}

**说明:**要实现其他颜色的小按钮,可以在上述的例子中修改一下颜色就可以。

实现按钮上下两个按钮动画

从上述的效果图可以看出,鼠标悬停到按钮上是,两个小按钮会在宽高上进行变化。

.container .btn:hover::before {bottom: 0;height: 50%;width: 80%;border-radius: 30px;transition-delay: 0.5s;
}.container .btn:hover::after {top: 0;height: 50%;width: 80%;border-radius: 30px;transition-delay: 0.5s;
}

完整代码下载

完整代码下载

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

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

相关文章

tailwindcss 如何在 uniapp 中使用

直接使用https://tailwindcss.com/docs/guides/vite这篇官方教程的写法是跑不通的&#xff0c;摸索以后整理了一下&#xff0c;最关键的是第6步 npm install -D tailwindcss postcss autoprefixernpx tailwindcss init -p在 tailwind.config.js 中写入 export default {conten…

了解ActiveMQ、RabbitMQ、RocketMQ和Kafka的特点

ActiveMQ ActiveMQ是一种基于JMS&#xff08;Java消息服务&#xff09;规范的消息中间件&#xff0c;由Apache基金会开发和维护 核心组件和特点&#xff1a; Broker&#xff08;代理&#xff09;&#xff1a;ActiveMQ的核心组件是Broker&#xff0c;它负责接收、存储和路由消息…

抓包习讯云院校数据通过PHP解析导入数据库

前言 最近&#xff0c;打卡APP需要这个数据&#xff0c;通过抓包后发现这个数据是固定的&#xff0c;获取很简单&#xff0c;但是数据太多&#xff0c;手动导入不显示&#xff0c;于是分析了json格式后果断通过脚本完成 【推荐】 《【MQTT】Esp32数据上传采集&#xff1a;最…

elementui引入弹出框报错:this.$alert is not defined 解决方案

1.按需引入文件element.js 注意&#xff1a;引入Message&#xff0c;MessageBox两个组件就行&#xff0c;alert包括在MessageBox里面了。 之前我引入了Alert组件&#xff0c;发现不行 2.在vue的prototype里注册伪名字 3.组件里直接调用就行了 4.实现效果 我发现elementui调用…

React 入门笔记

前言 国庆值班把假期拆了个稀碎, 正好不用去看人潮人海, 趁机会赶个晚集入门一下都火这么久的 React 前端技术. 话说其实 n 年前也了解过一丢丢来着, 当时看到一上来就用 JS 写 DOM 的套路直接就给吓退了, 扭头还去看 Vue 了&#x1f923;, 现在从市场份额来看, 确实 React 还…

保护模式阶段测试-模拟3环0环调用

保护模式阶段测试-模拟3环0环调用 最近又复习了一下保护模式相关的内容&#xff0c;然后打算搞个能够把段页的大部分知识能够串联起来的测试代码 最终想到的一个项目如下&#xff1a; 三环部分&#xff1a; 0.编写一个函数读取高2g的地址内容 1.通过设备通信到0环告诉0环我新…

【通意千问】大模型GitHub开源工程学习笔记(2)--使用Qwen进行推理的示例代码解析,及transformers的库使用

使用Transformers来使用模型 如希望使用Qwen-chat进行推理,所需要写的只是如下所示的数行代码。请确保你使用的是最新代码,并指定正确的模型名称和路径,如Qwen/Qwen-7B-Chat和Qwen/Qwen-14B-Chat 这里给出了一段代码 from transformers import AutoModelForCausalLM, Aut…

手动实现Transformer

Transformer和BERT可谓是LLM的基础模型&#xff0c;彻底搞懂极其必要。Transformer最初设想是作为文本翻译模型使用的&#xff0c;而BERT模型构建使用了Transformer的部分组件&#xff0c;如果理解了Transformer&#xff0c;则能很轻松地理解BERT。 一.Transformer模型架构 1…

【Spring Cloud】深入理解 Eureka 注册中心的原理、服务的注册与发现

文章目录 前言一、微服务调用出现的问题1.1 服务消费者如何获取服务提供者的地址信息&#xff1f;1.2 如果有多个服务提供者&#xff0c;消费者该如何选择&#xff1f;1.3 消费者如何得知服务提供者的健康状态&#xff1f; 二、什么是 Eureka2.1 Eureka 的核心概念2.2 Eureka 的…

MyBatis 映射文件(Mapper XML):配置与使用

MyBatis 映射文件&#xff08;Mapper XML&#xff09;&#xff1a;配置与使用 MyBatis是一个强大的Java持久化框架&#xff0c;它允许您将SQL查询、插入、更新和删除等操作与Java方法进行映射。这种映射是通过MyBatis的映射文件&#xff0c;通常称为Mapper XML文件来实现的。本…

国庆创作周 组播《第十二课》

国庆创作周《第十二课》图解

5自由度雄克机械臂仿真描点

5自由度雄克机械臂仿真描点 任务 建立雄克机械臂的坐标系和D-H参数表&#xff0c;使用Matlab机器人工具箱&#xff08;Robotics Toolbox&#xff09;&#xff0c;用机械臂末端执行器触碰8个红色的目标点。 代码 %% 机器人学 format compact close all clear clc%% DH参数 L…

Springboot: Spring Cloud Gateway 使用的基本概念及配置介绍

1. SpringCloud 与 SpringBoot的版本映射关系 在已有的Spring Boot项目中增加Spring Cloud&#xff0c;首先要确定使用的Spring Cloud的版本&#xff0c;这取决于项目使用的Spring Boot的版本 SpringCloud 与 SpringBoot的版本映射关系 如果两者的版本不兼容&#xff0c;再会…

R | R及Rstudio安装、运行环境变量及RStudio配置

R | R及Rstudio安装、运行环境变量及RStudio配置 一、介绍1.1 R介绍1.2 RStudio介绍 二、R安装2.1 演示电脑系统2.2 R下载2.3 R安装2.4 R语言运行环境设置&#xff08;环境变量&#xff09;2.4.1 目的2.4.2 R-CMD测试2.4.3 设置环境变量 2.5 R安装测试 三、RStudio安装3.1 RStu…

vue.draggable拖拽,项目中三个表格互相拖拽的实例操作,前端分页等更多小技巧~

vue.draggable中文文档 - itxst.com官网在这里&#xff0c;感兴趣的小伙伴可以看看。 NPM或yarn安装方式 yarn add vuedraggable npm i -S vuedraggable UMD浏览器直接引用JS方式 <script src"https://www.itxst.com/package/vue/vue.min.js"></script&…

蓝桥等考Python组别六级008

第一部分:选择题 1、Python L6 (15分) 运行下面的程序,哪个值不可能出现?( ) import random print(random.randint(0, 3) * 2) 0236正确答案:C 2、Python L6 (15分) 运行下面的程序,输入哪

数据分析(python)学习笔记1.0

《利用Python进行数据分析》(原书第2版) 《利用Python进行数据分析》(原书第2版) 《利用Python进行数据分析》(原书第2版) 社区和会议 除了网络搜索,科学、数据相关的Python邮件列表对于解决问题也非常有帮助。可以看看下列邮件列表: pydata:与数据分析和pandas相…

解决方案:解决https页面加载http资源报错

HTTPS页面加载HTTP资源会报错的原因是出于安全性考虑。 HTTPS&#xff08;HyperText Transfer Protocol Secure&#xff09;是一种通过使用SSL/TLS加密通信来保护数据传输的协议&#xff0c;它确保了客户端和服务器之间的安全连接。 当HTTPS页面尝试加载非加密的HTTP资源时&a…

Leetcode算法题练习(一)

目录 一、前言 二、移动零 三、复写零 四、快乐数 五、电话号码的字母组合 六、字符串相加 一、前言 大家好&#xff0c;我是dbln&#xff0c;从本篇文章开始我就会记录我在练习算法题时的思路和想法。如果有错误&#xff0c;还请大家指出&#xff0c;帮助我进步。谢谢&…

PHP 二手物品交易网站系统mysql数据库web结构apache计算机软件工程网页wamp

一、源码特点 PHP 二手物品交易网站系统是一套完善的web设计系统&#xff0c;对理解php编程开发语言有帮助&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S模式开发。 代码下载 https://download.csdn.net/download/qq_41221322/88385559 二、功能介…