css3之导航transition图标的变化

最新推荐文章于 2022-11-16 16:14:00 发布

等待的L先生

最新推荐文章于 2022-11-16 16:14:00 发布

阅读量182

点赞数

分类专栏： # html+css 文章标签： css3 html 网页设计 transition transform

本文链接：https://blog.csdn.net/weixin_42590083/article/details/110877362

版权

html+css 专栏收录该内容

29 篇文章 1 订阅

订阅专栏

这篇博客介绍了如何使用CSS3的transition属性为导航栏的图标创建平滑的过渡效果。通过设置背景图片的不同位置，结合:hover伪类，实现了鼠标悬停时图标颜色的变化。代码示例展示了具体实现方式，包括定位、背景图片切换和过渡时间设置。

摘要由CSDN通过智能技术生成

css3之导航transition图标的变化

原理：用了两个图片，一个有颜色，一个没有，都放在精灵图中。再用position定位，和transition变化。
在这里插入图片描述
代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>导航transition图标变化</title>
    <style>
        *{margin: 0;padding: 0;}
        li ,ul {
            list-style: none;
        }
        a{text-decoration: none;}
        nav{
            width: 300px;
            height: 50px;
            margin: 100px auto;
            /* border: springgreen solid 1px; */

        }
        nav ul li{
            float: left;
        }
        nav li a{
            display: block;
            padding-left: 20px;
            /* border: solid red 1px ; */
            width: 50px; 
            height: 50px;
            text-align: center;
            line-height: 50px;
            color: green;
            font-weight: 600;
        }
        ul li:nth-child(1) a{
            background: url(images/360bg.png) no-repeat 0px 21px ;
           
            
        }
        ul li:nth-child(1):hover a{
            background: url(images/360bg.png) no-repeat 0px -13px ;
            
              
            transition: 1s;
        }
        ul li:nth-child(2) a{
            background: url(images/360bg.png) no-repeat 0px -48px ;
        }
        ul li:nth-child(2):hover a{
            background: url(images/360bg.png) no-repeat 0px -87px ;
            
              
            transition: 1s;
        }
        ul li:nth-child(3) a{
            background: url(images/360bg.png) no-repeat 0px -125px ;
        }
        ul li:nth-child(3):hover a{
            background: url(images/360bg.png) no-repeat 0px -166px ;
            
              
            transition: 1s;
        }
        ul li:nth-child(4) a{
            background: url(images/360bg.png) no-repeat 0px -207px ;
        }
        ul li:nth-child(4):hover a{
            background: url(images/360bg.png) no-repeat 0px -248px ;
            
              
            transition: 1s;
        }
    </style>
</head>
<body>
    
    <nav>
        <ul>
            <Li><a href="">热点</a></Li>
            <Li><a href="">首页</a></Li>
            <Li><a href="">新闻</a></Li>
            <Li><a href="">视频</a></Li>
        </ul>
    </nav>
</body>
</html>