CSS实现服务卡片

CSS实现服务卡片

效果展示

CSS 知识点

• 回顾整体CSS知识点
• 灵活运用CSS知识点

页面整体布局

<div class="container"><div class="card"><div class="box"><div class="icon"><ion-icon name="color-palette-outline"></ion-icon></div><div class="content"><h2>Design</h2><p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.Consectetur in maiores dolor ducimus at quod nisi reiciendisvoluptate, quasi dolorum repudiandae et obcaecati suscipitcorrupti molestias sequi voluptas adipisci dolorem.</p><a href="#">Read More</a></div></div></div>
</div>

实现整体布局和容器整体样式

.container {position: relative;display: flex;justify-content: center;align-items: center;flex-wrap: wrap;gap: 60px;padding: 80px 40px;
}.container .card {position: relative;display: flex;justify-content: center;align-items: center;width: 300px;padding: 40px 20px;border-radius: 30px;cursor: pointer;background: rgba(0, 0, 0, 0.2);transition: 0.5s;
}

实现卡片图标和整体布局

.container .card .box {display: flex;flex-direction: column;align-items: center;text-align: center;
}.container .card .box .icon {position: relative;width: 80px;height: 80px;background: rgba(0, 0, 0, 0.25);border-radius: 50%;display: flex;justify-content: center;align-items: center;font-size: 3em;color: #fff7;transition: 0.5s;
}

实现卡片内容部分样式

.container .card .content {margin-top: 20px;
}.container .card .content h2 {color: #fff7;font: 1.25em;text-transform: uppercase;letter-spacing: 1px;transition: 0.5s;
}.container .card .content p {margin-top: 10px;color: #fff7;font-weight: 400;letter-spacing: 1px;transition: 0.5s;
}

实现卡片按钮效果

.container .card .content a {display: inline-block;background: rgba(0, 0, 0, 0.25);padding: 10px 20px;margin-top: 20px;font-weight: 500;letter-spacing: 1px;color: #fff7;border-radius: 30px;text-decoration: none;
}

设置卡片悬停效果

.container .card:hover {background: #1f83f2;box-shadow: 25px 25px 75px rgba(0, 0, 0, 0.25),10px 10px 70px rgba(0, 0, 0, 0.25),inset 5px 5px 20px rgba(255, 255, 255, 0.25),inset -5px -5px 15px rgba(0, 0, 0, 0.75);transform: translateY(-20px);
}.container .card:hover .box .icon {background: #2f363e;color: #fff;box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.25),inset -3px -3px 5px rgba(0, 0, 0, 0.5);
}.container .card:hover .content h2,
.container .card:hover .content p {color: #fff;
}.container .card:hover .content a {background: #2f363e;color: #fff;box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.25),inset -3px -3px 5px rgba(0, 0, 0, 0.5);
}

完整代码下载

完整代码下载