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

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

news 文章来源：https://blog.csdn.net/han1202012/article/details/132141288 2025/5/5 17:22:11

文章目录

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





一、需求分析


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

在这里插入图片描述

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

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

[JAVAee]网络编程-套接字Socket

目录 基本概念 发送端与接收端 请求与响应 ​编辑客户端与服务器 Socket套接字 分类 数据报套接字 流套接字传输模型 UDP数据报套接字编程 DatagramSocket API DatagramPacket API InetSocketAddress API 示例一: 示例二: TCP流数据报套接字编程 ServerSock…...

编程日记 2023/8/8 3:50:13

批量导出pdf为zip文件（可以修改zip中pdf名称）

核心代码 public static void compressZip1(HashMap<String,File> map, String rootPath, String zipFileName) throws FileNotFoundException {FileOutputStream fileOutputStream new FileOutputStream(zipFileName);ZipOutputStream zipOutputStream new ZipOutputS…...

编程日记 2023/8/8 3:49:12

[国家集训队] Tree II 题解报告

[国家集训队] Tree II 一道真板子题 就是练习LCT懒标记的题目 除了翻转标记以外还要维护乘法标记和加法标记 注意加法标记和乘法标记的维护&#xff01;&#xff01;&#xff01; 加法标记 因为splay的区间大小不是固定的&#xff0c;所以我们要维护size&#xff0c;并且…...

编程日记 2023/8/8 3:48:11

【redis】docker搭建redis集群

docker搭建redis集群&#xff0c;超级简单方便。 # 1. 拉取redis. 目前我拉取最新的是7.0.12 docker pull redis # 2. 下载配置文件 wget https://raw.githubusercontent.com/redis/redis/7.0/redis.conf # 3. 移到对应目录 mkdir -p /opt/docker/redis mv redis.conf /opt/d…...

编程日记 2023/8/8 3:47:10

前端个人年度工作述职报告（二十篇）

前端个人年度工作述职报告篇1 尊敬的各位领导、各位同仁&#xff1a; 大家好!按照20__年度我公司就职人员工作评估的安排和要求&#xff0c;我认真剖析、总结了自己的工作情况&#xff0c;现将本人工作开展情况向各位领导、同仁做以汇报&#xff0c;有不妥之处&#xff0c;希…...

编程日记 2023/8/8 3:46:07

TypeScript 编译配置

TypeScript的编译配置&#xff1a; 对单独一个ts文件进行监听编译 可使用tsc demo.ts -w 如果想对所有ts文件进行监听编译&#xff0c;监听到变化就自己编译&#xff0c;可以直接创建一个tsconfig.json文件。内容空着也OK&#xff1a;{}&#xff0c;执行 tsc 或 tsc -w 如果有…...

编程日记 2023/8/8 3:45:04

使用DMA传输实现单片机高效串口转发——以STM32系列为例

使用DMA传输实现单片机高效串口转发——以STM32系列为例 DateAuthorVersionNote2023.08.06Dog TaoV1.01. 完成了文档的撰写。 文章目录 使用DMA传输实现单片机高效串口转发——以STM32系列为例应用场景实现流程源码示例串口与中断配置DMA外设配置DMA发送数据函数串口中断服务函…...

编程日记 2023/8/8 3:44:03

一文了解 Android Auto 车载开发～

作者&#xff1a;牛蛙点点申请出战 背景 我的的产品作为一个海外音乐播放器&#xff0c;在车载场景听歌是一个很普遍的需求。在用户反馈中&#xff0c;也有很多用户提到希望能在车上播放音乐。同时车载音乐也可以作为提升用户消费时长一个抓手。 出海产品&#xff0c;主要服务…...

编程日记 2023/8/8 3:43:02

Pixel4 安卓源码及内核修改编译教程 | 基于Android12 AOSP

之前整理了 Pixel4上的源码过程&#xff0c;下载的话大家可以去镜像网站下载&#xff0c;可以节约很多时间。 实验设备&#xff1a;Ubuntu18.04 32G2T Pixel4 文章目录 一、安卓源码下载1.准备下载环境&#xff08;1&#xff09;安装Python 3.9&#xff08;2&#xff09;安装g…...

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

如何做好Code Review

本文主要从我们为什么需要CR&#xff1f;CR面临哪些挑战&#xff1f;CR的最佳实践几个方面分析&#xff0c;希望可以给读者一些参考。 为什么需要CR&#xff1f; 代码质量 定性来看&#xff0c;大家都认可Code Review&#xff08;后文简称CR&#xff09;能显著改善代码质量&…...

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