卡片展开效果
Sora
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
More
Umi
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
More
Mori
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
More实现代码
html 代码
<div class="container">
<div class="card">
<img :src="img1" alt="Sora" class="card-img-top" />
<div class="card-body">
<h5 class="card-title">Sora</h5>
<p class="card-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua.
</p>
<a href="#" class="btn">More</a>
</div>
</div>
<div class="card">
<img :src="img2" alt="Umi" class="card-img-top" />
<div class="card-body">
<h5 class="card-title">Umi</h5>
<p class="card-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua.
</p>
<a href="#" class="btn">More</a>
</div>
</div>
<div class="card">
<img :src="img3" alt="Mori" class="card-img-top" />
<div class="card-body">
<h5 class="card-title">Mori</h5>
<p class="card-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua.
</p>
<a href="#" class="btn">More</a>
</div>
</div>
</div>
css 代码
.container {
width: 1000px;
display: flex;
justify-content: space-between;
.card {
margin: 1em;
.card-img-top {
position: relative;
z-index: 2;
width: 302px;
height: 222px;
transform: translateY(52%);
transition: 0.5s;
}
.card-body {
z-index: 1;
box-sizing: border-box;
padding: 1.25em;
height: 220px;
background: white;
box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.056), 0 6.7px 5.3px rgba(0, 0, 0, 0.081),
0 12.5px 10px rgba(0, 0, 0, 0.1), 0 22.3px 17.9px rgba(0, 0, 0, 0.119), 0 41.8px 33.4px rgba(0, 0, 0, 0.144),
0 100px 80px rgba(0, 0, 0, 0.2);
transform: translateY(-50%);
transition: 0.5s;
}
.card-title {
margin: 0 0 0.75em 0;
font-size: 1.25em;
font-weight: bold;
line-height: 1.2;
}
.card-text {
margin: 0 0 1em 0;
}
.btn {
padding: 0.375em 0.75em;
color: black;
text-decoration: none;
line-height: 1.5;
border: 1px solid black;
border-radius: 0.25em;
transition: 0.5s;
&:hover {
color: white;
background: black;
}
}
&:hover {
.card-img-top {
transform: translateY(2%);
}
.card-body {
transform: translateY(0);
}
}
}
}
卡片多方向展开效果
实现代码
html 代码
<div class="shadow">
<div class="card">
<div class="card-header">Contact</div>
<div class="card-body">
<dl>
<span>
<dt>
<a href="https://github.com/alphardex" target="_blank"
><svg
t="1580195147272"
class="icon"
viewBox="0 0 1024 1024"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
p-id="737"
width="27"
height="27"
>
<path
d="M950.930286 512q0 143.433143-83.748571 257.974857t-216.283429 158.573714q-15.433143 2.852571-22.601143-4.022857t-7.168-17.115429l0-120.539429q0-55.442286-29.696-81.115429 32.548571-3.437714 58.587429-10.313143t53.686857-22.308571 46.299429-38.034286 30.281143-59.977143 11.702857-86.016q0-69.12-45.129143-117.686857 21.138286-52.004571-4.534857-116.589714-16.018286-5.12-46.299429 6.290286t-52.589714 25.161143l-21.723429 13.677714q-53.174857-14.848-109.714286-14.848t-109.714286 14.848q-9.142857-6.290286-24.283429-15.433143t-47.689143-22.016-49.152-7.68q-25.161143 64.585143-4.022857 116.589714-45.129143 48.566857-45.129143 117.686857 0 48.566857 11.702857 85.723429t29.988571 59.977143 46.006857 38.253714 53.686857 22.308571 58.587429 10.313143q-22.820571 20.553143-28.013714 58.88-11.995429 5.705143-25.746286 8.557714t-32.548571 2.852571-37.449143-12.288-31.744-35.693714q-10.825143-18.285714-27.721143-29.696t-28.306286-13.677714l-11.410286-1.682286q-11.995429 0-16.603429 2.56t-2.852571 6.582857 5.12 7.972571 7.460571 6.875429l4.022857 2.852571q12.580571 5.705143 24.868571 21.723429t17.993143 29.110857l5.705143 13.165714q7.460571 21.723429 25.161143 35.108571t38.253714 17.115429 39.716571 4.022857 31.744-1.974857l13.165714-2.267429q0 21.723429 0.292571 50.834286t0.292571 30.866286q0 10.313143-7.460571 17.115429t-22.820571 4.022857q-132.534857-44.032-216.283429-158.573714t-83.748571-257.974857q0-119.442286 58.88-220.306286t159.744-159.744 220.306286-58.88 220.306286 58.88 159.744 159.744 58.88 220.306286z"
p-id="738"
fill="#4289ff"
></path></svg
></a>
</dt>
<dd>alphardex</dd>
</span>
<span>
<dt>
<a href="mailto:2582347430@qq.com"
><svg
t="1580195271469"
class="icon"
viewBox="0 0 1025 1024"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
p-id="9773"
width="27"
height="27"
>
<path
d="M1024.073143 405.723429l0 453.705143q0 37.741714-26.843429 64.585143t-64.585143 26.843429l-841.142857 0q-37.741714 0-64.585143-26.843429t-26.843429-64.585143l0-453.705143q25.161143 28.013714 57.709714 49.737143 206.848 140.580571 284.013714 197.12 32.548571 23.990857 52.882286 37.449143t53.979429 27.428571 62.829714 13.970286l1.170286 0q29.110857 0 62.829714-13.970286t53.979429-27.428571 52.882286-37.449143q97.133714-70.290286 284.598857-197.12 32.548571-22.308571 57.124571-49.737143zM1024.073143 237.714286q0 45.129143-28.013714 86.308571t-69.705143 70.290286q-214.820571 149.138286-267.410286 185.709714-5.705143 4.022857-24.283429 17.408t-30.866286 21.723429-29.696 18.578286-32.841143 15.433143-28.598857 5.12l-1.170286 0q-13.165714 0-28.598857-5.12t-32.841143-15.433143-29.696-18.578286-30.866286-21.723429-24.283429-17.408q-52.004571-36.571429-149.723429-104.301714t-117.174857-81.408q-35.401143-23.990857-66.852571-65.974857t-31.451429-77.970286q0-44.544 23.698286-74.313143t67.730286-29.696l841.142857 0q37.156571 0 64.292571 26.843429t27.136 64.585143z"
p-id="9774"
fill="#4289ff"
></path></svg
></a>
</dt>
<dd>2582347430@qq.com</dd>
</span>
<span>
<dt>
<a href="tel:+8613063509980"
><svg
t="1580195327065"
class="icon"
viewBox="0 0 1024 1024"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
p-id="10241"
width="27"
height="27"
>
<path
d="M914.285714 708.534857q0 15.433143-5.705143 40.301714t-11.995429 39.131429q-11.995429 28.598857-69.705143 60.562286-53.686857 29.110857-106.276571 29.110857-15.433143 0-29.988571-1.974857t-32.841143-7.168-27.136-8.265143-31.744-11.702857-28.013714-10.313143q-56.027429-19.968-99.986286-47.396571-73.142857-45.129143-151.113143-123.172571t-123.172571-151.113143q-27.428571-44.032-47.396571-99.986286-1.682286-5.12-10.313143-28.013714t-11.702857-31.744-8.265143-27.136-7.168-32.841143-1.974857-29.988571q0-52.589714 29.110857-106.276571 32.036571-57.709714 60.562286-69.705143 14.262857-6.290286 39.131429-11.995429t40.301714-5.705143q7.972571 0 11.995429 1.682286 10.313143 3.437714 30.281143 43.446857 6.290286 10.825143 17.115429 30.866286t19.968 36.278857 17.700571 30.573714q1.682286 2.267429 10.020571 14.262857t12.288 20.260571 4.022857 16.310857q0 11.410286-16.310857 28.598857t-35.401143 31.451429-35.401143 30.281143-16.310857 26.258286q0 5.12 2.852571 12.873143t4.827429 11.702857 7.972571 13.677714 6.582857 10.825143q43.446857 78.262857 99.401143 134.290286t134.290286 99.401143q1.170286 0.585143 10.825143 6.582857t13.677714 7.972571 11.702857 4.827429 12.873143 2.852571q10.313143 0 26.258286-16.310857t30.281143-35.401143 31.451429-35.401143 28.598857-16.310857q7.972571 0 16.310857 4.022857t20.260571 12.288 14.262857 10.020571q14.262857 8.557714 30.573714 17.700571t36.278857 19.968 30.866286 17.115429q40.009143 19.968 43.446857 30.281143 1.682286 4.022857 1.682286 11.995429z"
p-id="10242"
fill="#4289ff"
></path></svg
></a>
</dt>
<dd>(+86)13063509980</dd>
</span>
</dl>
</div>
</div>
</div>
css 代码
@import url(https://fonts.googleapis.com/css?family=Lato);
// box-shadow will be effected by clip-path, so use a wrapper + drop-shadow to make shadow.
.shadow {
filter: drop-shadow(-2px 2px 8px rgba(50, 50, 0, 0.5));
}
.card {
clip-path: inset(0 0 70% 0);
transform: translateY(30%);
transition: 0.5s ease;
.card-header {
display: flex;
justify-content: center;
align-items: center;
width: 400px;
height: 100px;
font-size: 2em;
color: white;
background-color: #2979ff;
clip-path: inset(0 19% 0 19%);
transition: 0.5s ease;
}
.card-body {
box-sizing: border-box;
padding: 1.25em;
width: 400px;
height: 225px;
font-size: 1.5em;
background: white;
clip-path: inset(0 19% 0 19%);
transition: 0.5s ease;
dl {
display: flex;
flex-direction: column;
justify-content: space-between;
width: 100%;
height: 100%;
margin: 0;
}
span {
opacity: 0;
transform: translateY(100%);
transition: 0.5s ease-in;
@for $i from 1 through 3 {
&:nth-child(#{$i}) {
transition-delay: $i * 0.1s;
}
}
dt,
dd {
display: inline;
margin: 0;
svg {
margin-right: 0.3em;
}
}
}
}
&:hover {
transform: translateY(0);
clip-path: inset(0 0 0 0);
.card-header,
.card-body {
clip-path: inset(0 0 0 0);
}
span {
opacity: 1;
transform: translateY(0);
}
}
}