大神们,那面那种的导航 不用js 用纯的css3怎么写出来?

打飞机的猪猪侠 发布于 2017/03/08 10:42
阅读 229
收藏 0

这是网址:http://mall.jd.com/index-611962.html

加载中
0
梦想岛
梦想岛
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>动画效果导航-css3</title>
    <style type="text/css">
        *{margin:0px;padding:0px;list-style:none;}
        .menu{
            width:400px;
            height:30px;
            text-align:center;
            overflow: hidden;
        }
        .c{position: relative;width: 20%;overflow: hidden;float: left;}
        .c .memu{
            transition: all 0.2s ease-out;
            -moz-transition: all 0.2s ease-out;
        }
        .c1,.c2{display:block;width:100%;height:30px;line-height:30px;cursor:pointer;background: DarkRed;}
        .c2{background: FireBrick;}
        .c:hover .memu{
            margin-top:-30px;
            transition: all 0.2s ease-out;
            -moz-transition: all 0.2s ease-out;
        }/*animation: xx 2s;position: absolute;z-index:2;*/
    </style>
</head>
<body><div></div>
<ul class="menu" >
    <li class="c">
        <div class="memu">
            <span class="catName c1">首页1</span>
            <span class="ctaName c2" >首页2</span>
        </div>

    </li>
    <li class="c">
        <div class="memu">
            <span class="catName c1">物品1</span>
            <span class="ctaName c2">物品2</span>
        </div>
    </li>
    <li class="c">
        <div class="memu">
            <span class="catName c1">手机1</span>
            <span class="ctaName c2">手机2</span>
        </div>
    </li>
    <li  class="c">
        <div class="memu">
            <span class="catName c1">数码1</span>
            <span class="ctaName c2">数码2</span>
        </div>
    </li>
    <li class="c">
        <div class="memu">
            <span class="catName c1">菜单1</span>
            <span class="ctaName c2">菜单2</span>
        </div>
    </li>
</ul>
</body>
</html>

 

0
陈铁匠
陈铁匠

用css写不难呀。主要是hover

0
梦想岛
梦想岛

.user-dh-846507 .lv1:hover .c1 {

    margin-top: -30px;

}

打飞机的猪猪侠
打飞机的猪猪侠
那我这个应该怎么改大神,那面那串
0
gitlab_sam
gitlab_sam

css的话,需要大量的伪样式,建议用js结合css效果会更好,个人感觉js在动画效果方面稍微强一些

打飞机的猪猪侠
打飞机的猪猪侠
嗯,对这个我认同
0
打飞机的猪猪侠
打飞机的猪猪侠

那我这个应该怎么改 大神

 

<!DOCTYPE html>
<html>
<head>
    <title>动画效果导航</title>
    <style type="text/css">
        *{margin:0px;padding:0px;list-style:none;}
        .menu{width:400px;height:30px;position:relative;}
        .c1{float:left;width:78px;height:30px;text-align:center;line-height:30px;cursor:pointer;background: DarkRed;}
        .c2{position:absolute;top:30px;width:78px;margin-left:-78px;text-align:center;height:30px;background:FireBrick;overflow: hidden;}
        .c:hover .c2{margin-top:-30px;}/*animation: xx 2s;position: absolute;z-index:2;*/
    </style>
</head>
<body><div></div>
    <ul class="menu" >
        <li class="c">
            <span class="catName c1">首页</span>
            <span class="ctaName c2" >首页</span>
        </li>    
        <li class="c">
            <span class="catName c1">物品</span>
            <span class="ctaName c2">物品</span>
        </li>
        <li class="c">
            <span class="catName c1">手机</span>
            <span class="ctaName c2">手机</span>
        </li>
        <li  class="c">
            <span class="catName c1">数码</span>
            <span class="ctaName c2">数码</span>
        </li>
        <li class="c">
            <span class="catName c1">菜单</span>
            <span class="ctaName c2">菜单</span>
        </li>
    </ul>
</body>
<script type="text/javascript">

</script>
</html>

0
昵称什么的最讨厌了
昵称什么的最讨厌了

最简单的方法就是直接把它的网站扒下来 改改就好啦

0
紫泉-kwer
紫泉-kwer
f12去瞅瞅代码。◕‿◕。
返回顶部
顶部