基于CSS3实现元素宽度向两侧延伸

最新推荐文章于 2023-04-11 19:31:36 发布

原创最新推荐文章于 2023-04-11 19:31:36 发布 · 1.5k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css3

前端同时被 2 个专栏收录

80 篇文章

订阅专栏

案例练习

11 篇文章

订阅专栏

本文介绍了两种利用CSS3实现元素宽度向两侧延伸的方法：一是通过转换中的角度转换，二是运用转换中的缩放转换。这两种方法可以帮助开发者创建出富有动态效果的布局。

效果图

在这里插入图片描述

方法一：使用转换中的角度转换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
    <link rel="stylesheet" href="../css/reset.css">
    <style type="text/css">
        nav{
            width: 200px; height: 40px; 
            background: #363636; margin: 50px auto; 
            display:flex; justify-content: space-between;
        }
        div{
            width: 100px; height: 40px;
            position: relative;;
        }
        a{
            display: block; width: 100px; height: 40px; color: #fff; 
            line-height: 40px; text-align: center;
            position: absolute; top: 0; left: 0;
        }
        div:hover a{
            background: red; color:#fff
        }
        span{
            width: 100px; height: 5px; background: red;
            position: absolute; top: -5px; left: 0;
            transform: rotateY(90deg);
        }
        div:hover span{
            transform: rotateY(0deg);
            transition: transform 0.5s;
        }
    </style>
</head>
<body>
    <nav>
        <div>
            <a href="#">首页</a>
            <span></span>
        </div>
        <div>
            <a href="#">论坛</a>
            <span></span>
        </div>
    </nav>
</body>
</html>

方法二：使用转换中的缩放转换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
    <link rel="stylesheet" href="../css/reset.css">
    <style type="text/css">
        nav{
            width: 200px; height: 40px; background: #363636;
            margin: 50px auto; display: flex; justify-content: space-between;
        }
        div{
            width: 100px; height: 40px; position: relative;
        }
        a{
            display: block; width: 100px; height: 40px;
            line-height: 40px; text-align: center; color: #fff;
        }
        span{
            width: 10px; height: 5px;
            position: absolute; top: -5px; left: 50%;
            margin-left: -5px;
        }
        div:hover a{
            background: red; color: #fff;
        }
        div:hover span{
            transform: scaleX(10); background: red;
            transition: transform 0.5s;
        }
    </style>
</head>
<body>
    <nav>
        <div>
            <a href="#">首页</a>
            <span></span>
        </div>
        <div>
            <a href="#">论坛</a>
            <span></span>
        </div>
    </nav>
</body>
</html>