html - 悬停时触发可翻转卡片的问题
问题描述
我在使用三张可翻转悬停卡时遇到问题。卡片似乎完成了大部分工作,但是 li 中的内容似乎在刷新时消失/消失了,即使 li 的边框在卡片本身的正面没有消失,加载页面也是如此。虽然卡片的标题始终可见。
当您尝试(重新)加载页面时,问题非常明显。每当您刷新页面时,您都可以清楚地看到页面内容消失在卡片的正面。虽然卡片的背景图像和标题保持不变
我认为内容会通过卡片本身的转换而丢失。
我几乎尝试了所有关于变换和过渡的属性。至少我认为它与转换或过渡有关,因为您会看到内容在刷新页面时消失。奇怪的是卡片中的标题和背景图像保持不变并完成他们的工作。
这是我的代码笔,所以更容易看到问题: https ://codepen.io/MaxVervaeke/pen/LvjzVO
HTML
<div class="tour-card">
<div class="card__side card__side--front">
<div class="card__picture picture-one"> </div>
<h4 class="card__heading">
<span class="card__heading--span card__heading--span-one">The sea <br> explorer</span>
</h4>
<div class="card__details">
<ul>
<li>3 day tours</li>
<li>Up to 20 people</li>
<li>2 tour guides</li>
<li>Sleep in cozy hotels</li>
<li>Difficulty: very easy</li>
</ul>
</div>
</div>
<div class="card__side card__side--back card__side--back-one">
BACKSIDE
</div>
</div>
<div class="tour-card">
<div class="card__side card__side--front">
<div class="card__picture picture-two"> </div>
<h4 class="card__heading">
<span class="card__heading--span card__heading--span-two">The forest <br> hiker</span>
</h4>
<div class="card__details">
<ul>
<li>5 day tours</li>
<li>Up to 10 people</li>
<li>6 tour guides</li>
<li>Sleep in snuggy hotels</li>
<li>Difficulty: medium</li>
</ul>
</div>
</div>
<div class="card__side card__side--back card__side--back-two">
BACKSIDE
</div>
</div>
<div class="tour-card">
<div class="card__side card__side--front">
<div class="card__picture picture-three"> </div>
<h4 class="card__heading">
<span class="card__heading--span card__heading--span-three">The snow <br> adventurer</span>
</h4>
<div class="card__details">
<ul>
<li>7 day tours</li>
<li>Up to 5 people</li>
<li>3 tour guides</li>
<li>Sleep in provided hotels</li>
<li>Difficulty: hard</li>
</ul>
</div>
</div>
<div class="card__side card__side--back card__side--back-three">
BACKSIDE
</div>
</div>
CSS
.tour-grid {
display:grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 2rem;
padding: 0 5rem;}
.tour-card {
position: relative;
height:700px;
-webkit-perspective: 90rem;
perspective: 90rem;
width:100%;
}
.card__side {
color: #fff;
font-size:1.5rem;
height:700px;
border-radius: 3px;
box-shadow: 0 1rem 2rem rgba(0,0,0,.15);
transition: all 1s ease;
overflow:hidden;
backface-visibility: hidden;
}
.tour-card:hover .card__side--front {
transform: rotateY(-180deg);
}
.tour-card:hover .card__side--back {
transform: rotateY(0deg);
}
.card__side--front{
background-color: #FFF;
position:relative;
}
.card__picture {
height:15rem;
background-blend-mode: screen;
-webkit-clip-path:polygon(0 0, 100% 0, 100% 85%, 0 100%);
clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
background-size: cover;
}
.picture-one {
background-image: linear-gradient(to right bottom,rgba(255,185,0,1.000),rgba(255,119,48,1.000)), url(../images/trees-sm.jpg);
}
.picture-two {
background-image: linear-gradient(to right bottom,rgba(126,213,11,.7),rgba(40,180,131,.7)),url(../images/lake-bench-sm.jpg);
}
.picture-three {
background-image: linear-gradient(to right bottom,rgba(41,152,255,1.000),rgba(85,67,250,1.000)),url(../images/snowy-route-sm_640.jpg);}
.card__heading {
font-size: 1.5rem;
font-weight:300;
text-transform: uppercase;
text-align: right;
color:#FFF;
position: absolute;
top:30%;
left:60%;
}
.card__heading--span{
padding: .6rem 1rem;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
.card__heading--span-one{background-image: linear-gradient(to right bottom, rgba(255,185,0,.85),rgba(255,119,48,.85))}
.card__heading--span-two{background-image: linear-gradient(to right bottom,rgba(126,213,11,.85),rgba(40,180,131,.85));}
.card__heading--span-three{background-image:linear-gradient(to right bottom,rgba(41,152,255,.85),rgba(85,67,250,.85));}
.card__details ul {
list-style: none;
width:80%;
margin: 0 auto;
}
.card__details ul li {
text-align:center;
font-size: .8rem;
margin: 4rem 0 1rem 0;
border-bottom: 1px solid #777;
}
.card__side--back{
transform: rotateY(180deg);
position: absolute;
top:0;
left:0;
width:100%;
}
预期结果:我有 li 标签之间的内容在页面的字体侧变得可见,而现在它在刷新页面后消失/消失
解决方案
也许我没有遇到问题,但li
' 继承color: #fff
自.card__side
. 只需添加以下内容即可查看列表项中的文本。
.card__details {
color: #111;
}
transition: all
顺便说一句,不错的设计和 CSS 代码,但如果您想考虑性能,请不要使用。
推荐阅读
- python - 将输入十六进制 0A 转换为 \n 转义字符
- android-10.0 - 如何在 android Q 及更高版本中获取已连接 wifi 的 SSID?
- macros - 为什么对“defmacro”的调用评估为无?
- python - 比较地理位置的最有效途径?解决方案请
- reactjs - Material UI Autocomplete:显示部分选择
- flutter - Flutter splashScreen for Android 如何更改背景颜色
- python - 创建具有预定义长度的 2D python 列表
- vba - 是否可以在 MS Access 数据库中使用 VBA 列出宏的所有操作?
- javascript - react-virtuoso:过扫描道具不起作用
- javascript - Jest 中的覆盖范围不包括分支