css中英切换导航特效

最新推荐文章于 2024-05-07 11:30:15 发布

lucky芬

最新推荐文章于 2024-05-07 11:30:15 发布

阅读量689

点赞数

分类专栏： H5和Css3

本文链接：https://blog.csdn.net/daimomo000/article/details/53759971

版权

H5和Css3 专栏收录该内容

15 篇文章 1 订阅

订阅专栏

感觉这个特效挺好用~特效描述：当鼠标移到导航的时候，由原来的英文字上滑为中文的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{padding:0; margin:0;}
        li{ list-style:none; }
        a{ text-decoration:none;}
        .nav{ width:100%; height:50px; background:#222;  overflow:hidden;}
        .list{ width:800px; height:50px; margin:0 auto;}
        .list li{ float:left;width:20%;}
        .list li a{ display:block; transition:0.3s;}
        .list b,.list i{ display:block; color:#aaa; line-height:50px; text-align:center;}
        .list b{ font-weight:100}
        .list i{ font-style:normal; background:#333; color:#fff;}
        .list a:hover{ margin-top:-50px;}
    </style>
</head>
<body>
    <div class="nav">
    <ul class="list">
        <li>
            <a href="#">
                <b>Index</b>
                <i>首页</i>
            </a>
        </li>
        <li>
            <a href="#">
                <b>course</b>
            </a>
                <i>职业课程</i>
        </li>
        <li>
            <a href="#">
                <b>study</b>
                <i>就业学习</i>
            </a>
        </li>
        <li>
            <a href="#">
                <b>BBS</b>
                <i>我的社区</i>
            </a>
        </li>
        <li>
            <a href="#">
                <b>more++</b>
                <i>更多+</i>
            </a>
        </li>
    </ul>
</div>
</body>
</html>

lucky芬

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
3
评论
css中英切换导航特效

特效描述当鼠标移到导航的时候，由英文上滑为中文的。 Document *{padding:0; margin:0;} li{ list-style:none; } a{ text-decoration:none;} .nav{ width:100%; height:50p
复制链接

扫一扫