只能在CSS中对标签“内容”使用渐变过渡吗？ [英] Is possible use fade transition on tag 'content' only with css?

问题描述

请查看以下jsfiddle代码：
http://jsfiddle.net/rflfn/6wCp6/

Please view this code jsfiddle: http://jsfiddle.net/rflfn/6wCp6/

<div id="menu">
    <ul>
        <li><a href="#">Link #1</a></li>
        <li><a href="#">Link #2</a></li>
        <li><a href="#">Link #3</a></li>
        <li><a href="#">Link #4</a></li>
    </ul>
</div>

CSS：

*{
    margin: 0;
    padding: 0;
    text-decoration: none;
    font-family: arial;
    font-size: 16px;
}
a{
    color: #000000;
}
a:hover{
    color: #860000;    
}
#menu{
    margin: 15px auto;
    padding: 20px;
    width: 300px;
    background: #DDDDDD;

    border-radius: 5px;
    box-shadow: 0 0 5px #000000;
}
#menu ul{
    list-style: none;
}
#menu li:before{
    margin-right: 10px;
    content: url("http://st.deviantart.net/emoticons/s/smile.gif");

    transition: all 0.5s ease 0s;
    /* transition: content 0.5s ease 0s; */
}
#menu li:hover:before{
    content: url("http://st.deviantart.net/emoticons/r/razz.gif");
}

我在 li标签上有一张图片，在 li标签上有另一张图片：

I have one image on tag 'li' and other image on 'li:hover', is possible make transition with fade only using css?

推荐答案

您可以通过使用两个伪元素<$ c来完成此操作。 $ c>：before / after 并使用CSS3过渡为悬停时两者的不透明度设置动画。

You can do this by using both pseudo elements :before/after and using the CSS3 transition to animate the opacity of both on hover. This will create a fade transition between both images.

演示

DEMO

CSS：

*{
    margin: 0;
    padding: 0;
    text-decoration: none;
    font-family: arial;
    font-size: 16px;
}
a{
    color: #000000;
}
a:hover{
    color: #860000;    
}
#menu{
    margin: 15px auto;
    padding: 20px;
    width: 300px;
    background: #DDDDDD;

    border-radius: 5px;
    box-shadow: 0 0 5px #000000;
}
#menu ul{
    list-style: none;
}
#menu ul li{
    position:relative;
}
#menu li:before{
    margin-right: 10px;
    content: url("http://st.deviantart.net/emoticons/s/smile.gif");

    transition: opacity 0.5s ease;
    -webkit-transition: opacity 0.5s ease;
}
#menu li:after{
    content: url("http://st.deviantart.net/emoticons/r/razz.gif");
    position:absolute;
    left:0;
    opacity:0;

    transition: opacity 0.5s ease;
    -webkit-transition: opacity 0.5s ease;
}
#menu li:hover:after{
    opacity:1;
}
#menu li:hover:before{
    opacity:0;
}

---

编辑：

更好的是，您可以将两个图像都放置在另一个图像上，并使用z-index和css过渡为唯一一个图像设置不透明度：

Even better, you can position both images one on top of the other and with z-index and css transition animate the opacity of ony one image :

演示

DEMO

这篇关于只能在CSS中对标签“内容”使用渐变过渡吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！