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

韩曙亮

发布于 2023-10-11 20:22:31

24600

代码可运行

文章被收录于专栏：韩曙亮的移动开发专栏韩曙亮的移动开发专栏

运行总次数：0

代码可运行

一、需求分析

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

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

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