一些 CSS 微交互和一些卡片
我最近重新设计了我的网站，在首页上添加了卡片，作为我最近创作的一些画作的画廊。
最初，我给卡片添加了阴影效果，让鼠标悬停时卡片看起来更醒目。我尝试了各种其他属性几个小时，最终得到了以下效果。
上面的 GIF 动画中发生了一些微交互。
- 图像的缩放效果
- 标题中字母间距增大
- 阴影在微妙/明显状态之间过渡
这些都与 CSS 过渡效果结合使用，以获得平滑的入场和出场效果。
为了创建这个效果，我首先使用了三个div元素。一个是卡片本身，第二个是用来放置背景图片的，第三个是标题框。
<div class="card">
<div class="card_background"> </div>
<div class="title">
<h2>Parallax Galaxy</h2>
</div>
</div>
CSS部分稍微复杂一些。我还得反复调整过渡效果，直到达到理想效果。
.card {
position: relative;
cursor: pointer;
overflow: hidden;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
transition: all .3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.card:hover {
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0, 0, 0, 0.295);
}
.card_background {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
width: 100%;
height: 50vh;
transition: all 2s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.card:hover .card_background {
transform: scale(1.1);
}
.card:hover .title {
letter-spacing: 4px;
}
.title {
position: absolute;
left: 0;
top: 2rem;
padding: 0.5rem 1rem;
background: rgba(255, 255, 255, 1);
max-width: 400px;
transition: all 3s cubic-bezier(0.25, 0.8, 0.25, 1);
letter-spacing: 2px;
text-transform: uppercase;
}
.title h2 {
display: inline-block;
width: auto;
font-size: 1.3rem;
font-weight: 700;
margin: 0;
}
最终效果可应用于多张图片。这是一种相对快捷简便的方法，可以为任何图库增添亮点。
