在一个div上使用两个按钮，你如何慢慢淡入淡出？

-1

淡出动画不起作用。我认为你不能把两个ID放在一个div上。
你如何得到淡出效果？
here is the jsFiddle 在一个div上使用两个按钮，你如何慢慢淡入淡出？

HTML

<a href="#pop">appear</a> 

<div id="pop" id="pop_close"> 
    <a href="#pop_close">disappear</a> 
</div>

CSS

body { 
    padding: 10em; 
} 
#pop{ 
    height: 10em; 
    width: 10em; 
    background: yellow; 
    opacity:0; 
    position: relative; 
    top: -20px; 
    z-index: -1; 
} 

#pop:target { 
    opacity: 1; 
    z-index: 1; 
    -webkit-animation: fadein 1s; /* Safari, Chrome and Opera > 12.1 */ 
     -moz-animation: fadein 1s; /* Firefox < 16 */ 
     -ms-animation: fadein 1s; /* Internet Explorer */ 
     -o-animation: fadein 1s; /* Opera < 12.1 */ 
      animation: fadein 1s; 
} 

#pop_close:target { 
    opacity: 0; 
    z-index: -1; 
    -webkit-animation: fadeOut 1s; /* Safari, Chrome and Opera > 12.1 */ 
     -moz-animation: fadeOut 1s; /* Firefox < 16 */ 
     -ms-animation: fadeOut 1s; /* Internet Explorer */ 
     -o-animation: fadeOut 1s; /* Opera < 12.1 */ 
      animation: fadeOut 1s; 
} 



@keyframes fadeOut { 
    from { opacity: 1; } 
    to { opacity: 0; } 
} 

/* Firefox < 16 */ 
@-moz-keyframes fadeOut { 
    from { opacity: 1; } 
    to { opacity: 0; } 
} 

/* Safari, Chrome and Opera > 12.1 */ 
@-webkit-keyframes fadeOut { 
    from { opacity: 1; } 
    to { opacity: 0; } 
} 

/* Internet Explorer */ 
@-ms-keyframes fadeOut { 
    from { opacity: 1; } 
    to { opacity: 0; } 
} 

@keyframes fadein { 
    from { opacity: 0; } 
    to { opacity: 1; } 
} 

/* Firefox < 16 */ 
@-moz-keyframes fadein { 
    from { opacity: 0; } 
    to { opacity: 1; } 
} 

/* Safari, Chrome and Opera > 12.1 */ 
@-webkit-keyframes fadein { 
    from { opacity: 0; } 
    to { opacity: 1; } 
} 

/* Internet Explorer */ 
@-ms-keyframes fadein { 
    from { opacity: 0; } 
    to { opacity: 1; } 
}

来源

2015-01-04 Sprig Mendle

这里是工作提琴http://jsfiddle.net/oogley_boogley/wqju9jh6/19/

的CSS：

#pop{ 
height: 10em; 
width: 10em; 
background: yellow; 
opacity:0; 
position: relative; 
top: -20px; 
z-index: -1; 
transition: opacity 1s; /* key style here, look into -webkit and -moz etc as well */ 
}

来源

2015-01-04 19:54:10

-1

没错，你不能有多个ID在同一页上，
因此，你需要修改ID，使:target一个特定弹出：

div[id^=popUp] // means: target DIV element who's ID "starts with".

比在HTML中，您只需通过添加一个数字使该ID唯一。

div[id^=popUp]{ 
 
    height: 5em; 
 
    width: 5em; 
 
    background: yellow; 
 
    opacity:0; 
 
    position: relative; 
 
    top: -20px; 
 
    z-index: -1; 
 
    transition: opacity 1s; 
 
} 
 

 
div[id^=popUp]:target { 
 
    opacity: 1; 
 
    z-index: 1; 
 
}

<a href="#popUp1">appear</a> 
 
<div id="popUp1"> 
 
    <a href="#">disappear</a> 
 
</div> 
 

 
<a href="#popUp2">appear</a> 
 
<div id="popUp2"> 
 
    <a href="#">disappear</a> 
 
</div>

来源

2015-01-04 20:10:08

在一个div上使用两个按钮，你如何慢慢淡入淡出？

回答

相关问题