用CSS3写动态导航

最新推荐文章于 2022-04-25 16:28:02 发布

粥要熬

最新推荐文章于 2022-04-25 16:28:02 发布

阅读量751

点赞数 1

CC 4.0 BY-SA版权

分类专栏： CSS3 文章标签： css3 导航

本文链接：https://blog.youkuaiyun.com/qq_36009964/article/details/71241883

CSS3 专栏收录该内容

9 篇文章

订阅专栏

这篇博客介绍了如何使用CSS3的Gradient、transform等属性创建动态导航。内容包括线性渐变和径向渐变的用法，以及transform属性的rotate、scale、skew和translate方法，详细阐述了它们在导航设计中的应用，如旋转、缩放、倾斜和移动元素，并提到了transform-origin用于设置变换基准点的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS3 Gradient 分为linear-gradient(线性渐变)和radial-gradient(径向渐变)，linear-gradient共有三个参数，第一个参数表示线性渐变的方向，可以使用角度或者关键字来设置。to left设置渐变从右到左，相当于270deg;to right 设置渐变从左到右，相当于90deg；to top设置渐变从下到上，相当于0deg；to buttom(默认值，等于留空)设置渐变从上到下，相当于180deg；第二个和第三个参数分别表示起点颜色和终点颜色。
CSS3 中利用transform来实现文字或图像的旋转、缩放、倾斜、移动。
transform:rotate()来实现旋转，只有一个参数：角度，单位deg，角度为正数时表示顺时针旋转，为负数时表示逆时针旋转。
transform:scale()来实现缩放，参数表示缩放的倍数，一个参数时表示水平和垂直同时缩放，两个参数时，第一个指定水平方向的，第二个指定垂直方向的。
transform:skew()来实现倾斜,参数表示倾斜角度，单位deg，一个参数时表示水平方向的倾斜角度，两个参数时，第一个指定水平方向的，第二个指定垂直方向的。
transform:translate()来实现移动，参数表示移动距离，单位px，一个参数时表示水平方向的移动距离，两个参数时，第一个指定水平方向的，第二个指定垂直方向的。
transform-origin:5px 5px;设置基准点，默认的基点是其中心位置，共有两个参数，单位px，第一个参数表示相对左上角原点水平方向的距离，第二个参数表示相对左上角原点垂直方向的距离。其中除了指定为具体的像素值以外，第一个参数可以指定为left、center、right，第二个参数可以指定为top、center、bottom。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态导航</title>
    <style type="text/css">
        li{
            list-style: none;
            width: 100px;
            margin:10px;
            padding: 10px;
            background: linear-gradient(to right,orange,red);/*线性渐变*/
            border-radius: 10px;
        }
        a{
            text-decoration: none;
            font-family: 楷书;
            font-size: 14px;
            color: #F2E0E0;
        }
        .ul1 li{
            float: left;
        }
        li:hover{
            background: linear-gradient(to left,orange,red);
            transform: rotate(15deg);/*顺时针旋转15度*/
            transform-origin: left top;/*变形原点为左上角*/
        }
        hr{
            clear: both;
            border: 3px dotted orange;
        }
    </style>
</head>
<body>
    <ul class="ul1">
        <li><a href="#">html5</a></li>
        <li><a href="#">css</a></li>
        <li><a href="#">javascript</a></li>
        <li><a href="#">jquery</a></li>
    </ul>
    <hr>
    <ul class="ul2">
        <li><a href="#">html5</a></li>
        <li><a href="#">css</a></li>
        <li><a href="#">javascript</a></li>
        <li><a href="#">jquery</a></li>
    </ul>
</body>
</html>