当前位置： 首页 > news >正文

【CSS3】CSS3 2D 转换 - scale 缩放 ③ ( 使用 scale 设置制作可缩放的按钮案例 )

news 2026/6/3 11:02:57

文章目录

  • 一、需求分析
  • 二、代码分析
  • 三、代码示例
  • 四、执行结果





一、需求分析


设置一个 按钮 , 默认状态下显示的样式如下 :

在这里插入图片描述

  • 按钮 外部 有 圆形的外边框 ;
  • 按钮 中的文本 , 水平居中对齐 , 垂直居中对齐 ;

当鼠标移动到 按钮 上之后 , 鼠标 变为 小手 样式 , 并且 按钮 以 中心位置 为准 , 放大到原来的 2 倍 ;

在这里插入图片描述





二、代码分析


基础布局选择 : 这里使用 ul 列表标签实现 , 如果有多个 按钮 , 可以直接将 按钮 放在 li 列表项中 , 或者 直接使用 li 列表项作为 按钮 标签元素 ;

    <ul><li>1</li><li>2</li><li>3</li></ul>

浮动属性设置 : 如果将 <ul><li></li></ul> 按钮排列起来 , 需要 为 <li> 列表元素 标签 设置 浮动 属性 ,

            /* 设置左浮动 , 令 ul 列表中的 li 元素水平从左到右排列 */float: left;

一般设置 左浮动 属性 , 整个 列表 以及 列表 元素的 宽高 / 边距 需要精准的计算 , 才能使 列表 按照想要的方式进行排列 ;


取消列表默认样式 : 使用 <ul><li></li></ul> 列表展示元素 , 一般都需要将其默认样式取消 , 也就是 列表前面的 小圆点 需要取消 , 列表也不再 垂直排列 ;

            /* 取消 li 的样式 , 也就是列表前的小圆点 */list-style: none;

设置鼠标指针样式 : 鼠标移动到 列表 元素 上之后 , 变为小手 , 需要设置 该 li 标签的 cursor 样式 ;

            /* 设置鼠标的指针样式 鼠标移动到按钮上之后变为 小手 */cursor: pointer;

设置边框 : 需要为 按钮 设置 1 像素实心边框 , 以及圆角 ;

            /* 设置外边框 1 像素 实心 粉红色 */border: 1px solid pink;/* 设置圆角 令按钮外部边框 为 圆形 */border-radius: 50%;

设置缩放属性 : 按钮 本身 设置 0.5 秒的动画持续时间 , 当鼠标移动到 按钮 上方之后 , 宽高缩放为 原来的 2 倍 ;

            /* 设置 动画 持续时间 .5s 相当于 0.5s */transition: all .5s;li:hover {/* 宽高缩放为原来的 2 倍 */transform: scale(2);}




三、代码示例


代码示例 :

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><!-- 设置 meta 视口标签 --><meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>flex 弹性布局</title><style>li {width: 30px;height: 30px;/* 行高 = 高度 , 可实现居中对齐 */line-height: 30px;/* 文本内容水平居中 */text-align: center;/* 设置外边框 1 像素 实心 粉红色 */border: 1px solid pink;/* 设置左浮动 , 令 ul 列表中的 li 元素水平从左到右排列 */float: left;/* 设置四个方向的边距 10 像素 */margin: 10px;/* 取消 li 的样式 , 也就是列表前的小圆点 */list-style: none;/* 设置圆角 令按钮外部边框 为 圆形 */border-radius: 50%;/* 设置鼠标的指针样式 鼠标移动到按钮上之后变为 小手 */cursor: pointer;/* 设置 动画 持续时间 .5s 相当于 0.5s */transition: all .5s;}li:hover {/* 宽高缩放为原来的 2 倍 */transform: scale(2);}</style>
</head><body><ul><li>1</li><li>2</li><li>3</li></ul>
</body></html>




四、执行结果


执行结果 :

  • 默认状态如下 :
    在这里插入图片描述
  • 鼠标移动到 按钮 上之后的效果 :
    在这里插入图片描述
    在这里插入图片描述

相关文章：

【CSS3】CSS3 2D 转换 - scale 缩放 ③ ( 使用 scale 设置制作可缩放的按钮案例 )

文章目录 一、需求分析二、代码分析三、代码示例四、执行结果 一、需求分析 设置一个 按钮 , 默认状态下显示的样式如下 : 按钮 外部 有 圆形的外边框 ;按钮 中的文本 , 水平居中对齐 , 垂直居中对齐 ; 当鼠标移动到 按钮 上之后 , 鼠标 变为 小手 样式 , 并且 按钮 以 中心位…...

编程日记 2023/8/8 4:11:02

Stable Diffusion教程(6) - 图片高清放大

放大后细节 修复图片损坏 显存占用 速度 批量放大 文生图放大 好 是 高 慢 否 附加功能放大 一般 否 中 快 是 图生图放大 好 是 低 慢 是 tile模型放大 非常好 是 高 快 是 通过文生图页面的高清修复 优点&#xff1a;放大时能添加更多细节&am…...

编程日记 2023/8/8 4:10:00

freeswitch 1.10.10-dev录音早期媒体卡通道的bug分析

最近编译了fs 1.10.10-dev也就是 master版本&#xff08;2023年7月6日&#xff09; 给几个客户升级了一下&#xff0c;发现非常不稳定(每天都有几个通道卡在early状态)&#xff0c;最近才有空来分析原因。 之前跑的是1.10.8 release 版本&#xff0c;从来没出现过这个问题&…...

编程日记 2023/8/8 4:08:59

Zebec Protocol ，不止于 Web3 世界的 “Paypal”

Paypal 是传统支付领域的巨头企业&#xff0c;在北美支付市场占有率约为 77% 以上。从具体的业务数据看&#xff0c;在8月初&#xff0c;Paypal 公布的 2023 年第二季度财报显示&#xff0c;PayPal 第二季度净营收为 73 亿美元&#xff0c;净利润为 10.29 亿美元。虽然 Paypal …...

编程日记 2023/8/8 4:07:55

Gcd 2023牛客暑期多校训练营6 G

登录—专业IT笔试面试备考平台_牛客网 题目大意&#xff1a;给出一个集合&#xff0c;集合中初始有2个数x,y(x!y)&#xff0c;每次操作可以将集合中任意两个不等的数的差放入集合或者将两个不等的数的gcd放入集合&#xff0c;给出一个数z&#xff0c;问z有没有可能出现在集合里…...

编程日记 2023/8/8 4:06:53

常用C++编译器推荐

本文将为大家带来的是几款简单实用的C编译器&#xff08;非IDE&#xff09;&#xff0c;希望大家喜欢。 GCC&#xff08;GNU Compiler Collection&#xff09; 官方网站: GCC, the GNU Compiler Collection- GNU Project GCC有Windows移植版本&#xff0c;比较出名的就是Min…...

编程日记 2023/8/8 4:05:49

C++QT教程1——QT概述（下载与安装）

文章目录 1 Qt概述1.1 什么是Qt1.2 Qt的发展史1.3 Qt版本1.4 Qt的下载与安装下载地址&#xff1a;其实我是有点懵逼的&#xff0c;因为还有个qtcreator&#xff0c;我差点不知道下哪个。。。&#xff08;qt框架比qtcreator功能更多更强大&#xff09; 安装 1.5 Qt的优点1.6 QT成…...

编程日记 2023/8/8 4:04:47

在oracle SQL中创建返回表的函数

这是我的职责 create or replace FUNCTION split(i_str IN VARCHAR2,i_delim IN VARCHAR2 DEFAULT : ) RETURN TABLE AS BEGINRETURN SELECT trim(regexp_substr(i_str, [^||i_delim||], 1, LEVEL)) str FROM projetCONNECT BY instr(i_str, i_delim, 1, LEVEL - 1) …...

编程日记 2023/8/8 4:03:45

Kubernetes API Aggregation API聚合

Kubernetes API Aggregation - Kubernetes - Wiki.Shileizcc.com API 聚合机制是 Kubernetes 1.7 版本引入的特性&#xff0c;能够将用户扩展的 API 注册到 kube-apiserver 上&#xff0c;仍然通过 API Server 的 HTTP URL 对新的 API 进行访问和操作。为了实现这个机制&#…...

编程日记 2023/8/8 4:02:44

【雕爷学编程】Arduino动手做（184）---快餐盒盖，极低成本搭建机器人实验平台

吃完快餐粥&#xff0c;除了粥的味道不错之外&#xff0c;我对个快餐盒的圆盖子产生了兴趣&#xff0c;能否做个极低成本的简易机器人呢&#xff1f;也许只需要二十元左右 知识点&#xff1a;轮子&#xff08;wheel&#xff09; 中国词语。是用不同材料制成的圆形滚动物体。简…...

编程日记 2023/8/8 4:01:42

重生学c++系列第三课类和对象（上）

好的我们重生c系列的前两期已经介绍完了c祖师爷针对C语言补充的几个新功能&#xff0c;现在我们进入c的真正课题学习——类与对象: C语言是面向过程的&#xff0c;关注的是过程&#xff0c;分析出求解问题的步骤&#xff0c;通过函数调用逐步解决问题。 比如说我们洗菜做饭&am…...

编程日记 2023/8/8 4:00:40

驱动开发-按键中断

编写LED灯的驱动&#xff0c;使用GPIO子系统&#xff0c;里面添加按键的中断处理 1.应用程序发送指令控制LED亮灭 2.按键1 按下&#xff0c;led1电位反转 按键2按下&#xff0c;led2电位反转 按键3 按下&#xff0c;led3电位反转 功能函数 #include<stdlib.h> #inclu…...

编程日记 2023/8/8 3:59:37

数据结构 | 二叉树的应用

目录 一、解析树 二、树的遍历 一、解析树 我们可以用解析树来表示现实世界中像句子或数学表达式这样的构造。 我们可以将((73)*(5-2))这样的数学表达式表示成解析树。这是完全括号表达式&#xff0c;乘法的优先级高于加法和减法&#xff0c;但因为有括号&#xff0c;所以在…...

编程日记 2023/8/8 3:58:35

python：卡尔曼和贝叶斯滤波器

本文分享一个Filerpy的说明文档和代码示例文档&#xff0c;有关于 Python 中的卡尔曼和贝叶斯滤波器。该方法可以应用于气象遥感等领域。 说明文档&#xff1a;https://filterpy.readthedocs.io/en/latest/kalman/KalmanFilter.html 参考代码链接&#xff1a;https://nbviewer.…...

编程日记 2023/8/8 3:57:33

走进 Go 语言基础语法 | 青训营 (1)

Powered by:NEFU AB-IN 文章目录 走进 Go 语言基础语法 | 青训营 (1)代码注释代码模板 走进 Go 语言基础语法 | 青训营 (1) 代码注释 /** Author: NEFU AB-IN* Date: 2023-08-06 09:44:15* FilePath: \GoTest\a.go* LastEditTime: 2023-08-06 11:00:45*/ package mainimport (&…...

编程日记 2023/8/8 3:56:32

基于边缘无线协同感知的低功耗物联网LPIOT技术：赋能智慧园区方案以及数字工厂领域

回到2000年左右&#xff0c;物联网的底层技术支撑还是“ZigBee”&#xff0c;虽然当时ZigBee的终端功耗指标其实也并不庞大&#xff0c;但是&#xff0c;“拓扑复杂导致工程实施难度大”、“网络规模小导致的整体效率低下”都成为限制其发展的主要因素。 LPWAN&#xff0c;新一…...

编程日记 2023/8/8 3:55:31

【《快速构建AI应用——AWS无服务器AI应用实战》——基于云的解决方案快速完成人工智能项目的指南】

基于云的人工智能服务可以自动完成客户服务、数据分析和财务报告等领域的各种劳动密集型任务。其秘诀在于运用预先构建的工具&#xff0c;例如用于图像分析的Amazon Rekognition或用于自然语言处理的AWS Comprehend。这样&#xff0c;就无须创建昂贵的定制软件系统。 《快速构…...

编程日记 2023/8/8 3:54:30

vue运行在IE浏览器空白报错SCRIPT1006: 缺少‘)‘ -【vue兼容IE篇】

其他浏览器均正常&#xff0c;但是切换ie模式&#xff0c;打开空白&#xff0c;F12打开报错缺少‘)‘ &#xff0c;如下图 在搜狗浏览器下点开报错&#xff1a;定格在crypto-js处 解决&#xff1a; 步骤一&#xff1a;使用npm安装babel-polyfill 依赖&#xff08;已安装了可忽…...

编程日记 2023/8/8 3:53:22

接口自动化测试Mock Get和Post请求

Mock可以模拟一个http接口的后台响应&#xff0c;可以模拟request&#xff0c;response 下载 moco-runner-0.11.0-standalone.jar 下载链接: https://pan.baidu.com/s/1bmFzvJPRnDlQ-cmuJ_3iRg 提取码: kpjv 确保安装了jdk,cmd下可以运行java -version 一、模拟不带参的get请求…...

编程日记 2023/8/8 3:52:20

WPF上位机8——C#与MySQL

ADO.NET 数据库连接 数据插入、删除、更改 数据查询 带单个参数 带多个参数 using MySql.Data.MySqlClient; using System; using System.Collections.Generic; using System.Configuration; using System.Linq; using System.Text; using System.Threading.Tasks;namespace Wp…...

编程日记 2023/8/8 3:51:18

STM32单片机学习(27) —— SPI相关概念

文章目录概述SPI通信的核心特性I2C和SPI的简单对比SPI学习的补充说明SPI硬件电路设计SPI的四条通信线SPI通信的片选线低电平选中不支持广播通信SPI通信的时序结构&#xff08;重点&#xff09;SPI通信的比特序通信空闲状态&#xff0c;SPI时钟极性采样时机&#xff0c;SPI时钟相…...

编程新知 2026/5/26 3:44:10

Unity安卓构建72小时实战指南：从零到真机运行

1. 这不是“又一本Unity教程”&#xff0c;而是我带三个新人从零上线第一款安卓游戏的真实路径你点开这个标题&#xff0c;大概率正站在两个路口之间&#xff1a;一边是满屏“30天速成Unity”“零基础做爆款”的短视频封面&#xff0c;一边是你刚下载完Unity Hub、卡在Android …...

编程新知 2026/5/26 3:28:08

Onekey终极指南：如何5分钟快速获取Steam游戏清单的免费神器

Onekey终极指南&#xff1a;如何5分钟快速获取Steam游戏清单的免费神器 【免费下载链接】Onekey Onekey Steam Depot Manifest Downloader 项目地址: https://gitcode.com/gh_mirrors/one/Onekey 还在为复杂的Steam游戏清单下载而头疼吗&#xff1f;想要备份游戏资源却不…...

编程新知 2026/5/26 1:19:05

FeHelper前端助手：30+开发工具集，让你的浏览器变身效率神器

FeHelper前端助手&#xff1a;30开发工具集&#xff0c;让你的浏览器变身效率神器 【免费下载链接】FeHelper &#x1f60d;FeHelper--Web前端助手&#xff08;Awesome&#xff01;Chrome & Firefox & MS-Edge Extension, All in one Toolbox!&#xff09; 项目地址:…...

编程新知 2026/5/26 0:24:13

孤舟笔记 互联网常用框架篇二 Dubbo服务请求失败怎么处理？集群容错策略你用过几种

文章目录先说结论Failover&#xff1a;换家店试试Failfast&#xff1a;不行就算了Failsafe&#xff1a;忘了这事Failback&#xff1a;回头再说Forking&#xff1a;同时点几家Broadcast&#xff1a;通知所有人怎么选择回答技巧与点评加分回答面试官点评个人网站分布式系统中&…...

编程新知 2026/5/25 23:41:42

ssm207基于SSM的视频播放系统的设计与实现+vue(文档+源码)_kaic

第五章 系统的实现5.1 用户功能模块的实现5.1.1系统主界面用户进入本系统可查看系统信息&#xff0c;系统主界面展示如图5.1所示。图5.1网站主界面5.1.2视频详情界面用户可选择视频查看视频详情信息&#xff0c;并可进行视频播放操作&#xff0c;视频详情界面展示如图5.2所示。…...

编程新知 2026/5/25 23:23:03

破解材料数据荒：合成数据与随机森林预测聚合物阻燃性能

1. 项目概述与核心挑战在材料研发领域&#xff0c;尤其是涉及公共安全的聚合物阻燃性研究&#xff0c;传统实验方法正面临巨大瓶颈。想象一下&#xff0c;你是一位材料工程师&#xff0c;需要设计一种用于高铁内饰或高层建筑电缆护套的新型聚合物&#xff0c;其阻燃性能必须满足…...

编程新知 2026/5/25 22:26:31

Codex使用API Key授权无法使用插件？

小伙伴们&#xff0c;大家好&#xff0c;我是小溪&#xff0c;见字如面。对于没有ChatGPT账号的小伙伴来说&#xff0c;虽然可以通过API Key授权的方式使用Codex桌面端&#xff0c;但是会有一些限制。比如无法使用插件功能&#xff0c;无法使用Codex移动端进行远程控制等。为了…...

编程新知 2026/5/25 21:15:35

Unity/Unreal开发者必看：用手机和陀螺仪实验，5分钟搞懂万向节死锁（附避坑指南）

Unity/Unreal开发者实战指南&#xff1a;用手机陀螺仪5分钟破解万向节死锁当你调试第一人称视角时&#xff0c;角色突然卡在墙面无法转动&#xff1b;当无人机模型在俯冲90度时失控乱转——这些很可能都是万向节死锁(Gimbal Lock)在作祟。作为实时3D开发中最恼人的数学陷阱之一…...

编程新知 2026/5/25 20:55:13

PS5 NOR Modifier深度解析：如何通过Windows工具修复PS5硬件故障与实现光驱版转数字版

PS5 NOR Modifier深度解析&#xff1a;如何通过Windows工具修复PS5硬件故障与实现光驱版转数字版 【免费下载链接】PS5NorModifier The PS5 Nor Modifier is an easy to use Windows based application to rewrite your PS5 NOR file. This can be useful if your NOR is corru…...

编程新知 2026/5/25 18:32:45