前端学习（190）:transition实例之过渡导航

最新推荐文章于 2020-07-28 18:16:21 发布

前端小歌谣

最新推荐文章于 2020-07-28 18:16:21 发布

阅读量230

点赞数

分类专栏： # 歌谣--前端学习--总进程

本文链接：https://blog.csdn.net/weixin_43392489/article/details/103647443

版权

歌谣--前端学习--总进程专栏收录该内容

2758 篇文章 59 订阅

订阅专栏

本文详细介绍了前端开发中如何使用CSS3的transition属性实现过渡导航效果，通过实例代码展示了从静态导航到动态过渡的过程，帮助读者深入理解这一技术。

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    ul,li{margin: 0;padding: 0;list-style: none;}
    ul{width: 360px;}
    ul li{width: 60px;height: 70px;float: left;background: url(./img/43.jpg);transition: 0.5s;}
    ul li:nth-child(1){background-position: 0 -70px;}
    ul li:nth-child(2){background-position: -60px -70px;}
    ul li:nth-child(3){background-position: -120px -70px;}
    ul li:nth-child(4){background-position: -180px -70px;}
    ul li:nth-child(5){background-position: -240px -70px;}
    ul li:nth-child(6){background-position: -300px -70px;}

   
    ul li:hover:nth-child(1){background-position: 0 0px;}
    ul li:hover:nth-child(2){background-position: -60px 0px;}
    ul li:hover:nth-child(3){background-position: -120px 0px;}
    ul li:hover:nth-child(4){background-position: -180px 0px;}
    ul li:hover:nth-child(5){background-position: -240px 0px;}
    ul li:hover:nth-child(6){background-position: -300px 0px;}
    </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
</body>
</html>

运行结果