我有一个具有三个按钮的导航(某种导航)。我的目标是,当我单击导航上的按钮时,div
会淡出而不是出现硬转换(这是我目前正在进行的操作)。当您单击不同的导航按钮时,我希望它看起来像图像交叉淡入淡出。
@import url('https://fonts.googleapis.com/css?family=Biryani:900');
@import url('https://fonts.googleapis.com/css?family=Roboto:100');
body{
background: #fff;
}
a:visited, a:link, a:active{
color: white;
text-decoration: none;
}
#wrapper{
position: absolute;
width: 500px;
height: 680px;
background: transparent;
padding: 0px 40px 0px 40px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
overflow: hidden;
z-index: 0;
box-shadow: inset 0 0 12px #eee;
}
#images{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 180px;
height: 560px;
}
#navigation{
position: absolute;
top: 20px;
left: 20;
z-index: 5;
overflow: hidden;
}
.button{
background: black;
width: 30px;
height: 30px;
margin-right: 10px;
border-radius: 50%;
font-family: 'Roboto', sans-serif;
text-transform: uppercase;
text-align: center;
line-height: 30px;
overflow: hidden;
float: left;
}
<div id="wrapper">
<div id="navigation">
<div class="button"><a href="#one">01</a></div>
<div class="button"><a href="#two">02</a></div>
<div class="button"><a href="#three">03</a></div>
</div>
<div id="images">
<div style="height: 100%; overflow-y: hidden;">
<a name="one">
<div style="width:100%; height: 100%; overflow: none;" align="center">
<img src="https://image.ibb.co/crLo5L/outfit2.png" width="179">
</div>
</a>
<a name="two">
<div style="width:100%; height: 100%; overflow: none;" align="center">
<img src="https://image.ibb.co/jT7CX0/outfit1.png" width="179">
</div>
</a>
<a name="three">
<div style="width:100%; height: 100%; overflow: none;" align="center">
<img src="https://image.ibb.co/iNqMQL/outfit3.png" width="179">
</div>
</a>
</div>
</div>
</div>
我真的很想只使用 CSS 来实现这一点。我制作个人资料的网站只允许高级用户使用 JS,所以我正在尝试寻找解决方法。
最佳答案
根据您问题中给定的 HTML 结构,我想不出实现此目的的方法。但是通过一些结构上的改变,我设法实现了预期的行为。 检查一下:
(我简化了你的代码只是为了证明一点,这在没有任何 JS 运行的情况下工作得很好......)
@import url('https://fonts.googleapis.com/css?family=Biryani:900');
@import url('https://fonts.googleapis.com/css?family=Roboto:100');
body{
background: #fff;
}
#navigation{
position: relative;
display: flex;
}
button {
background: black;
color:white;
width: 30px;
height: 30px;
margin-right: 10px;
border-radius: 50%;
font-family: 'Roboto', sans-serif;
text-transform: uppercase;
text-align: center;
line-height: 30px;
}
button:focus {outline:0;}
button:focus img {opacity: 1;}
img {position:absolute;top:50px;left:50px;opacity:0;transition:opacity 800ms;}
<div id="wrapper">
<div id="navigation">
<button>01<img src="https://image.ibb.co/crLo5L/outfit2.png" width="179"></button>
<button>02<img src="https://image.ibb.co/jT7CX0/outfit1.png" width="179"></button>
<button>03<img src="https://image.ibb.co/iNqMQL/outfit3.png" width="179"></button>
</div>
</div>
关于html - 我可以仅使用 CSS 在单击导航按钮时淡入淡出 div 吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53358878/