内容简介
这是小y学习css、js的记录和分享。
绝大部分内容将会是非原创,侵删。
原链接
不可跳过的说明
1. 原链接的代码为收费下载,有需求可自行购买
2.小y为支持原作者,已付费下载代码
3.原本小y想看效果自己实现,却在最后1%上卡住了:“悬停在div上时同时触发多个子标签tranform效果”,最终还是打开了原作者代码,解决了这个问题。因此本篇文章类型依旧为转载。
.photo-frame:hover h2,
.photo-frame:hover p,
.photo-frame:hover img{/*就是这,过去只用img:hover,这次卡住一两个小时后发现
使用.class:hover label 能轻松控制多个标签,既觉得“妙!”,又感自己学习不够灵活*/
transform: translate3d(0,0,0);
}
以上是付费的证明,vip可以自由下载。
效果展示
文案为原创自拟。
代码
<body>
<div class="photo-frame">
<img class="img" src="../img/relax_0004_01.png"/>
<div>
<h2>
古剑奇谭 三:鄢陵
</h2>
<p>鄢陵,水光潋滟耍千秋。如此人界灵地,却被魔入侵后毁得面目全非,生灵涂炭。</p>
</div>
</div>
</body>
body{
display: grid;
place-items: center;
height: 100vh;
background-color: #2f3238;
font-family: 'Raleway', Arial, sans-serif;
}
.photo-frame{
position: relative;
width:640px;
height:360px;
overflow: hidden;
}
.photo-frame img{
position: absolute;
left: -30px;
width: 110%;
height: 110%;
opacity: 1;
transition: transform .5s;
transform: translate3d(-30px,0,0);
}
.photo-frame div{
position: absolute;
bottom: 0;
left: 0;
padding: 2em;
width: 100%;
height: 30%;
}
.photo-frame h2{
font-size: 2em;
color:#fff;
margin: 0.2em 0 0.1em 0;
transition: transform 0.5s;
}
.photo-frame p{
color: rgba(255,255,255,0.8);
margin: 0.1em 0 0 0;
opacity: 0;
transition: opacity 0.2s, transform 0.5s;
}
.photo-frame:hover p{
opacity: 0.9;
}
.photo-frame:hover img{
opacity: 0.3;
}
.photo-frame h2{
transform: translate3d(0,10px,0);
}
.photo-frame p{
transform: translate3d(0,15px,0);
}
.photo-frame:hover h2,
.photo-frame:hover p,
.photo-frame:hover img{
transform: translate3d(0,0,0);
}