平面CSS3菜单图像淡入淡出

时间:2012-08-30 21:23:20

标签: css3

  1. 我想知道如何才能在此处显示此菜单http://toall.org以淡出背景图像,所以基本上是从透明图标切换到透明文字? 请不要jQuery 。这在平面CSS3中是否可行?

  2. 是否可以设置图标的活动链接,但不透明度为50%?

  3. 有人可以帮我这个吗?谢谢!

    CSS

    .home {
        display: inline-block;
        position: relative;
        text-indent: -9999px;
        width: 170px;
        height: 112px;
        background: url(../images/qui_menu.png) no-repeat;
        background-position: 0px 0px;
    }
    
    .home span {
        position: absolute;
        top: 0; left: 0; bottom: 0; right: 0;
        background: url(../images/qui_menu.png) no-repeat;
        background-position: 0px -112px;
        opacity: 0;
        -webkit-transition: opacity 0.5s;
        -moz-transition:    opacity 0.5s;
        -o-transition:      opacity 0.5s;
    }
    
    .home:hover span {
        opacity: 1;
    }
    
    .services {
        display: inline-block;
        position: relative;
        text-indent: -9999px;
        width: 170px;
        height: 112px;
        background: url(../images/qui_menu.png) no-repeat;
        background-position: -170px 0px;
    }
    
    .services span {
        position: absolute;
        top: 0; left: 0; bottom: 0; right: 0;
        background: url(../images/qui_menu.png) no-repeat;
        background-position: -170px -112px;
        opacity: 0;
        -webkit-transition: opacity 0.5s;
        -moz-transition:    opacity 0.5s;
        -o-transition:      opacity 0.5s;
    }
    
    .services:hover span {
        opacity: 1;
    }
    
    .portfolio {
        display: inline-block;
        position: relative;
        text-indent: -9999px;
        width: 170px;
        height: 112px;
        background: url(../images/qui_menu.png) no-repeat;
        background-position: -340px 0px;
    }
    
    .portfolio span {
        position: absolute;
        top: 0; left: 0; bottom: 0; right: 0;
        background: url(../images/qui_menu.png) no-repeat;
        background-position: -340px -112px;
        opacity: 0;
        -webkit-transition: opacity 0.5s;
        -moz-transition:    opacity 0.5s;
        -o-transition:      opacity 0.5s;
    }
    
    .portfolio:hover span {
        opacity: 1;
    }
    
    .contacts {
        display: inline-block;
        position: relative;
        text-indent: -9999px;
        width: 170px;
        height: 112px;
        background: url(../images/qui_menu.png) no-repeat;
        background-position: -510px 0px;
    }
    
    .contacts span {
        position: absolute;
        top: 0; left: 0; bottom: 0; right: 0;
        background: url(../images/qui_menu.png) no-repeat;
        background-position: -510px -112px;
        opacity: 0;
        -webkit-transition: opacity 0.5s;
        -moz-transition:    opacity 0.5s;
        -o-transition:      opacity 0.5s;
    }
    
    .contacts:hover span {
        opacity: 1;
    }
    

0 个答案:

没有答案