我们经常会在各大平台看到很多产品的卡片效果，以及一些个人单页网站上的个人资料介绍时，也会用到各种卡片效果来展示信息，这种卡片式的设计，可以帮助我们分门别类的归类各种信息，让内容更加有条理。
因此，今天，我们就来写一个卡片效果，它的最终效果如下：
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);}
写在最后
以上就是我今天跟你分享的【每日一练】全部内容，希望今天的小练习对你有用，如果你觉得有帮助的话，请点赞我，关注我，并将它分享给你身边做开发的朋友，也许能够帮助到他。
我是杨小爱，我们明天见。
© 版权声明
文章版权归作者所有，未经允许请勿转载。
相关文章
暂无评论...
【web前端开发】一个专业而懂你的前端开发技术研究学习交流平台，每天不定时分享前端技术内容与案例，编程图书与课程，前端开发工具等学习资源，我们坚持每天学习一点点，每天进步一点点，关注我们，一起学习成长进步。
同名公众号【web前端开发】
