【每日一练】103—纯CSS实现的一款炫酷卡片效果

每日一练1年前 (2023)更新 admin

2,612 0 4

我们经常会在各大平台看到很多产品的卡片效果，以及一些个人单页网站上的个人资料介绍时，也会用到各种卡片效果来展示信息，这种卡片式的设计，可以帮助我们分门别类的归类各种信息，让内容更加有条理。

因此，今天，我们就来写一个卡片效果，它的最终效果如下：

【每日一练】103—纯CSS实现的一款炫酷卡片效果

HTML:

<!DOCTYPE html>

<html>

<head>

<title>【每日一练】103—纯CSS实现的一款炫酷卡片效果</title>

<link rel=”stylesheet” href=”https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css”>

<link rel=”stylesheet” type=”text/css” href=”style.css”>

</head>

<body>

<div class=”container”>

<div class=”box” style=”–clr:#00a6bc;”>

<div class=”content”>

<div class=”icon”><i class=”fa fa-paint-brush”></i></div>

<div class=”text”>

<h3>UI设计</h3>

<p>UI设计（或称界面设计）UI即User Interface(用户界面)的简称，它分为实体UI和虚拟UI，互联网常用的UI设计是虚拟UI。</p>

<a href=”http://www.webqdkf.com” target=”_blank”>了解更多</a>

</div>

</div>

</div>

<div class=”box” style=”–clr:#f75bea;”>

<div class=”content”>

<div class=”icon”><i class=”fa fa-file-code-o”></i></div>

<div class=”text”>

<h3>前端开发</h3>

<p>前端开发,是通过HTML，CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互。</p>

<a href=”http://www.webqdkf.com” target=”_blank”>了解更多</a>

</div>

</div>

</div>

<div class=”box” style=”–clr:#e9ca18;”>

<div class=”content”>

<div class=”icon”><i class=”fa fa-random”></i></div>

<div class=”text”>

<h3>后端开发</h3>

<p>后端开发即“服务器端”开发，主要涉及软件系统“后端”的东西。比如，用于托管网站、App数据的服务器、放置在后端服务器与浏览器。</p>

<a href=”http://www.webqdkf.com” target=”_blank”>了解更多</a>

</div>

</div>

</div>

</div>

</body>

</html>

CSS:

@import url(‘https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900’);

*

{

margin: 0;

padding: 0;

box-sizing: border-box;

font-family: ‘Poppins’, sans-serif;

}

body

{

display: flex;

justify-content: center;

align-items: center;

min-height: 100vh;

background: #666;

}

.container

{

position: relative;

display: flex;

justify-content: center;

align-items: center;

flex-wrap: wrap;

gap: 60px;

padding: 50px 0;

}

.container.box

{

position: relative;

width: 300px;

height: 350px;

background: #2e2e2e;

display: flex;

justify-content: center;

align-items: center;

}

.container.box::before

{

content: ”;

position: absolute;

border-top: 4px solid var(–clr);

border-bottom: 4px solid var(–clr);

inset: -10px 50px;

z-index: -2;

transform: skewY(15deg);

transition: 0.5s ease-in-out

}

.container.box:hover::before

{

transform: skew(0deg);

inset: -10px 40px;

}

.container.box::after

{

content: ”;

position: absolute;

border-left: 4px solid var(–clr);

border-right: 4px solid var(–clr);

inset: 60px -10px;

z-index: -1;

transform: skew(15deg);

transition: 0.5s ease-in-out

}

.container.box:hover::after

{

transform: skew(0deg);

inset: 40px -10px;

}

.container.box.content

{

position: relative;

display: flex;

justify-content: center;

align-items: center;

flex-direction: column;

text-align: center;

gap: 20px;

padding: 0 20px;

overflow: hidden;

width: 100%;

height: 100%;

}

.container.box.content.icon

{

color: var(–clr);

font-size: 2.5em;

width: 80px;

height: 80px;

display: flex;

justify-content: center;

align-items: center;

background: #2e2e2e;

color: var(–clr);

transition: 0.5s ease-in-out;

box-shadow: 0 0 0 4px #2e2e2e,

0 0 0 6px var(–clr);

}

.container .box:hover .content .icon

{

color : #2e2e2e;

background: var(–clr);

box-shadow: 0 0 0 4px #2e2e2e,

0 0 0 300px var(–clr);

}

.container .box .content .text h3

{

font-size: 1.5em;

color: #fff;

font-weight: 500;

transition: 0.5s ease-in-out;

}

.container .box:hover .content .text h3

{

color: #2e2e2e;

}

.container .box .content .text p

{

color: #777;

transition: 0.5s ease-in-out;

}

.container .box:hover .content .text p

{

color: #333;

}

.container .box .content .text a

{

position: relative;

background: var(–clr);

color: #2e2e2e;

padding: 8px 15px;

display: inline-block;

text-decoration: none;

font-weight: 500;

margin-top: 10px;

transition: 0.5s ease-in-out;

}

.container .box:hover .content .text a

{

background: #2e2e2e;

color: var(–clr);

}

写在最后

以上就是我今天跟你分享的【每日一练】全部内容，希望今天的小练习对你有用，如果你觉得有帮助的话，请点赞我，关注我，并将它分享给你身边做开发的朋友，也许能够帮助到他。

我是杨小爱，我们明天见。

# 每日一练 # 练习项目 # CSS实现卡片效果 # 每日一练

© 版权声明

文章版权归作者所有，未经允许请勿转载。

相关文章

【每日一练】223—JS实现一款计算器效果

admin

2,204 4

【每日一练】02-CSS实现发光按钮Hover效果

admin

2,649 8

【每日一练】222—JS实现的打字效果

admin

2,317 4

【每日一练】205—折叠菜单栏效果

admin

1,546 5

【每日一练】243—JS实现折叠效果

admin

2,716 5

【每日一练】210—视频预告片弹出窗口

admin

1,499 7

暂无评论

暂无评论...

【web前端开发】一个专业而懂你的前端开发技术研究学习交流平台，每天不定时分享前端技术内容与案例，编程图书与课程，前端开发工具等学习资源，我们坚持每天学习一点点，每天进步一点点，关注我们，一起学习成长进步。
同名公众号【web前端开发】

友链申请免责声明广告合作关于我们

Copyright © 2024 【web前端开发】公号平台官网平台