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

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

news 2026/6/3 9:51:30

文章目录

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





一、需求分析


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

在这里插入图片描述

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

当鼠标移动到 按钮 上之后 , 鼠标 变为 小手 样式 , 并且 按钮 以 中心位置 为准 , 放大到原来的 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

LLM API安全攻防实战：从提示词注入到自动化测试方案

1. 项目概述&#xff1a;被忽视的LLM API安全前线最近在帮几个团队做上线前的安全审计&#xff0c;发现一个挺有意思的现象&#xff1a;大家对于传统API的鉴权、限流、SQL注入这些常规检查已经形成了肌肉记忆&#xff0c;但一旦涉及到LLM&#xff08;大语言模型&#xff09;的A…...

编程新知 2026/5/26 4:58:26

从电磁炉到户外电源：拆解单相SVPWM如何让你的逆变器更安静、更高效

从电磁炉到户外电源&#xff1a;单相SVPWM如何实现静音与高效的双重突破当你深夜用电磁炉煮面时&#xff0c;是否曾被突然的蜂鸣声吓一跳&#xff1f;或是发现户外电源给设备充电时&#xff0c;散热风扇的噪音盖过了山林鸟鸣&#xff1f;这些常见问题背后&#xff0c;隐藏着一个…...

编程新知 2026/5/26 2:31:36

ROS Noetic实战：从bag包里‘抠’出雷达点云和IMU数据的保姆级教程（Ubuntu 20.04）

ROS Noetic实战&#xff1a;从bag包里提取雷达点云和IMU数据的完整指南&#xff08;Ubuntu 20.04&#xff09;在机器人开发中&#xff0c;ROS bag文件就像是一个装满珍贵数据的宝箱&#xff0c;而雷达点云和IMU数据则是其中最闪亮的宝石。作为一名长期与ROS打交道的开发者&…...

编程新知 2026/5/26 0:28:17

PCL 法向量夹角剔除错误匹配点对【2026最新版】

目录 一、 算法简介 1、主要函数 2、参考文献 二、 代码实现 三、 结果展示 四、 参考链接 博客长期更新，本文最新更新时间为：2026年5月24日。代码在PCL1.15.1中测试通过 一、 算法简介 在三维点云配准中，对应点（correspondence）的准确性直接决定了配准算法的精度和鲁棒性…...

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

终极STL到STEP转换指南：如何实现3D打印模型到CAD设计的无缝衔接

终极STL到STEP转换指南&#xff1a;如何实现3D打印模型到CAD设计的无缝衔接 【免费下载链接】stltostp Convert stl files to STEP brep files 项目地址: https://gitcode.com/gh_mirrors/st/stltostp 在数字化制造和工程设计领域&#xff0c;STL到STEP转换已成为连接3D…...

编程新知 2026/5/25 17:21:50

京东自动购物终极指南：告别缺货烦恼，智能抢购神器

京东自动购物终极指南&#xff1a;告别缺货烦恼&#xff0c;智能抢购神器 【免费下载链接】Jd-Auto-Shopping 京东商品补货监控及自动下单 项目地址: https://gitcode.com/gh_mirrors/jd/Jd-Auto-Shopping 还在为心仪商品瞬间售罄而苦恼吗&#xff1f;还在熬夜等待补货却…...

编程新知 2026/5/25 17:13:02

使用Taotoken CLI工具一键配置多开发环境下的统一模型接入点

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 使用Taotoken CLI工具一键配置多开发环境下的统一模型接入点 在团队协作或管理多个AI应用项目时&#xff0c;一个常见的痛点是每个…...

编程新知 2026/5/27 7:10:08

3分钟掌握抖音视频批量下载：解放双手的素材收集革命

3分钟掌握抖音视频批量下载&#xff1a;解放双手的素材收集革命 【免费下载链接】douyinhelper 抖音批量下载助手 项目地址: https://gitcode.com/gh_mirrors/do/douyinhelper 还在为一个个手动保存抖音视频而烦恼吗&#xff1f;想要高效收集创作者素材却苦于没有合适的…...

编程新知 2026/5/25 15:37:41

3分钟掌握Topit：Mac窗口置顶终极指南，让多任务处理效率翻倍！

3分钟掌握Topit&#xff1a;Mac窗口置顶终极指南&#xff0c;让多任务处理效率翻倍&#xff01; 【免费下载链接】Topit Pin any window to the top of your screen / 在Mac上将你的任何窗口强制置顶 项目地址: https://gitcode.com/gh_mirrors/to/Topit 你是否曾经在Ma…...

编程新知 2026/5/25 14:21:40

量子机器学习多编码框架MEDQ：提升模型泛化能力与参数效率

1. 项目概述&#xff1a;为什么量子机器学习需要“多编码”&#xff1f;量子机器学习&#xff08;QML&#xff09;这几年火得不行&#xff0c;但真正上手做过的人都知道&#xff0c;它有个挺让人头疼的“怪病”&#xff1a;模型在某些数据集上表现神勇&#xff0c;换到另一个看…...

编程新知 2026/5/25 14:17:39