使div折叠显示内容 [英] make a div fold out to show content
本文介绍了使div折叠显示内容的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想实现此处的相同效果,因此当您将鼠标悬停在div上时,显示内容,但我不知道该如何做。
I am trying to achieve the same effect here so when you hover on the div it folds out and shows the content, but I cannot figure out how to do this.
到目前为止,我可以使用下面的代码使内容幻灯片。下面的代码和 jsfiddle可在此处查看。
So far I am able to make the content slide in by using the following code. Code underneath and jsfiddle can be seen here.
html
html
<div class="artist artist-1"></div>
<div id="artist-text">Hi there</div>
css
.artist-1:hover + #artist-text {
display: block;
}
#artist-text {
display: none;
background-color: #000000;
width: 130px;
padding: 10px;
position: absolute;
left: 50%;
top: 60%;
animation-duration: 1s;
animation-name: slideLeft;
}
.artist {
height: 100px;
width: 100px;
}
.artist-1 {
background-color: red;
position: absolute;
left: 20%;
top: 40%;
}
@keyframes slideLeft {
from {
margin-left: 100%;
width: 100%;
}
to {
margin-left: 0%;
width: 100%;
}
}
推荐答案
动画处于:hover,它称为翻转卡效果。
The animation is in :hover, it's called the flip card effect.
您可以通过使用transform&过渡值。
You can alter the effect by playing around with the transform & transition values.
立方贝塞尔,如果您想知道在哪里获取立方贝塞尔函数的值。
Cubic bezier if you're wondering where to get the values for the cubic-bezier function.
.outer-wrapper {
position: absolute;
left: 0;
top: 0;
}
.outer-wrapper:nth-child(2) {
left: 600px;
}
.outer-wrapper:nth-child(3) {
top: 300px;
}
.wrapper {
position: relative;
width: 200px;
height: 200px;
margin: 0 0 20px;
}
.background-out,
.background-over {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.background-info {
position: absolute;
left: 200px;
top: 0;
width: 100%;
height: 100%;
visibility: hidden;
opacity: 0.2;
transform-origin: 0% 50% 0px;
transform: rotateY(-90deg);
background-color: grey;
}
.background-info .text {
padding: 5px;
}
.background-out {
background-color: red;
}
.background-over {
background-color: green;
visibility: hidden;
opacity: 0;
transform-origin: 100% 50% 0px;
transform: rotateY(-90deg);
}
.wrapper:hover .background-out {
visibility: hidden;
}
.wrapper:hover .background-over,
.wrapper:hover .background-info {
transform: translate3d(0px,0px,0px) rotateY(0deg);
transition: opacity 600ms cubic-bezier(0.55, 0.31, 0.15, 0.93) 0ms,
-moz-transform 600ms cubic-bezier(0.55, 0.31, 0.15, 0.93) 0ms,
-webkit-transform 600ms cubic-bezier(0.55, 0.31, 0.15, 0.93) 0ms;
visibility: visible;
opacity: 1;
}
<div class="outer-wrapper">
<div class="wrapper">
<div class="background-out"></div>
<div class="background-over"></div>
<div class="background-info">
<div class="text">Text 1</div>
</div>
</div>
</div>
<div class="outer-wrapper">
<div class="wrapper">
<div class="background-out"></div>
<div class="background-over"></div>
<div class="background-info">
<div class="text">Text 2</div>
</div>
</div>
</div>
<div class="outer-wrapper">
<div class="wrapper">
<div class="background-out"></div>
<div class="background-over"></div>
<div class="background-info">
<div class="text">Text 2</div>
</div>
</div>
</div>
这篇关于使div折叠显示内容的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文