#使用 cli-path 实现裁剪动画效果
HTML
<div class="shadow">
<div class="card">
<div class="card-header">联系信息</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>https://github.com/zhent1106</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>zhent1106@163.com</dd>
</span>
<span>
<dt>
<a href="tel:+8619850099292"
><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)19850099292</dd>
</span>
</dl>
</div>
</div>
</div>
CSS
/* 展示卡片 ，滑过卡片展示信息*/
@import url(https://fonts.googleapis.com/css?family=Lato);
body {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
height: 80vh;
font-family: Lato, sans-serif;
background: #eceffc;
}
.shadow {
-webkit-filter: drop-shadow(-2px 2px 8px rgba(50, 50, 0, 0.5));
filter: drop-shadow(-2px 2px 8px rgba(50, 50, 0, 0.5));
}
.card {
-webkit-clip-path: inset(0 0 70% 0);
clip-path: inset(0 0 70% 0);
-webkit-transform: translateY(30%);
transform: translateY(30%);
-webkit-transition: 0.5s ease;
transition: 0.5s ease;
}
.card .card-header {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 250px;
height: 100px;
font-size: 2em;
color: white;
background-color: #2979ff;
-webkit-clip-path: inset(0 19% 0 19%);
clip-path: inset(0 19% 0 19%);
-webkit-transition: 0.5s ease;
transition: 0.5s ease;
}
.card .card-body {
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 1.25em;
width: 250px;
height: 225px;
font-size: 17px;
background: white;
-webkit-clip-path: inset(0 19% 0 19%);
clip-path: inset(0 19% 0 19%);
-webkit-transition: 0.5s ease;
transition: 0.5s ease;
}
.card .card-body dl {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
width: 100%;
height: 100%;
margin: 0;
}
.card .card-body span {
opacity: 0;
-webkit-transform: translateY(100%);
transform: translateY(100%);
-webkit-transition: 0.5s ease-in;
transition: 0.5s ease-in;
}
.card .card-body span:nth-child(1) {
-webkit-transition-delay: 0.1s;
transition-delay: 0.1s;
}
.card .card-body span:nth-child(2) {
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.card .card-body span:nth-child(3) {
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s;
}
.card .card-body span dt,
.card .card-body span dd {
display: inline;
margin: 0;
}
.card .card-body span dt svg,
.card .card-body span dd svg {
margin-right: 0.3em;
}
.card:hover {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-clip-path: inset(0 0 0 0);
clip-path: inset(0 0 0 0);
}
.card:hover .card-header,
.card:hover .card-body {
-webkit-clip-path: inset(0 0 0 0);
clip-path: inset(0 0 0 0);
}
.card:hover span {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
