作者 | 杨小爱

写在前面

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

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

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">
</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代码：

*
{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);
}

写在最后

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

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

推荐阅读

【每日一练】01~100练大合集汇总

学习更多技能

请点击下方公众号

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

  1. 13.纯CSS实现新拟物炫酷时钟

    效果 (源码最后面) 视频演示 纯CSS实现新拟物炫酷时钟 视频地址一:https://www.bilibili.com/video/BV1pQ4y1K76g/ 视频地址一:https://www.i ...

  2. 【每日一练】31—CSS 实现一个彩色旋转方块loading动画效果

    写在前面 今天练习的这个项目是一个加载动画,这个加载动画主要是为了在网络不好,页面加载缓慢时给用户的一个提示,一个好的加载动画,可以缓解用户的焦虑情绪,让等待变得有趣,现在很多产品也越来越注重这一块的 ...

  3. 【每日一练】68—CSS实现一组渐变按钮动画效果

    在之前,我们也练习过一些按钮动画的效果,今天我们再来练习一组CSS实现的按钮动画效果,下面是今天练习的最终效果: 接下来,我们再来看一下这个案例的源码. HTML代码: <!doctype ht ...

  4. 【每日一练】56—CSS实现一款实用的响应式卡片悬停效果

    写在前面 今天这个练习,是目前很多网站上非常常见的一个效果,主要是这个效果干净简洁,它没有任何多余的内容,看起来也很舒服. 具体效果,请看下面的gif动画: 因为是GIF录屏,背景的渐变色有点色块,衔 ...

  5. 【每日一练】19—CSS 实现撕纸的效果

    写在前面 今天我们来练习一个CSS实现的撕纸效果,这个效果,也会在一些设计网站上经常看到,但是这个用PS可以直接做成一张图片,但是,今天我们用CSS通过两张图片就实现了,这样做的好处,就是当我们替换图 ...

  6. 【每日一练】138—CSS实现炫酷背景动画效果

    以下是今天练习的最终效果: HTML代码: <!DOCTYPE html> <html lang="en"> <head><meta na ...

  7. 【每日一练】36—CSS实现一款炫酷的3D 文本旋转效果

    写在前面 关于CSS 3D的效果,我之前也分享过一些,在视频号上也有,当然,视频号上没有源码,有兴趣的小伙伴,可以跟着视频自己敲代码,当然,这些代码,我后面也会分享到我们的网站上,大家可以直接到网站上 ...

  8. 【每日一练】20—CSS实现文字动画效果

    写在前面 今天来到了我们的第20个小项目的练习,距离我们100个小项目的练习,我们已经完成了五分之一了,剩下的五分之四,我们一起加油练习. 今天练习的这个小项目是一个CSS实现的文字动画效果,主要就是 ...

  9. 【每日一练】105—CSS实现一款输入文本动画的效果

    文 | 杨小爱 写在前面 关于这个CSS实现的文本动画效果,我们在前面也分享过很多,今天这个是一个输入文本框样式的动画效果,它的最终效果如下: 它的HTML代码很简单,主要是在CSS这块,具体的实现过 ...

最新文章

  1. KVM libvirt的CPU热添加
  2. oracle 里 符号 || 表示什么意思？？
  3. 4-2 ADO.NET－查询和检索数据5
  4. 《HTML 5与CSS 3 权威指南（第3版·上册）》——3.2　新增的非主体结构元素
  5. 大中型网站集群架构企业级高标准全自动实战项目征集
  6. 合成模式(Composite)
  7. Call和Apply的区别
  8. mybatis-plus自动生成文件
  9. V-Charts中使用extend属性定制词云图
  10. 怎么彻底关闭计算机应用程序,电脑自动关机前如何强行关闭应用程序
  11. 内核移植(4)移植yaffs文件系统
  12. oracle rac实例停止,oracle rac启停命令使用实例
  13. 怎么用计算机编程算术,总算认识怎么用scratch做计算题答题程序
  14. 手撸Mybatis源码-基础版
  15. texstudio语法检查
  16. github搜索语法-信息搜集指南----总结
  17. arcsde93安装好了之后，配置连接sde库失败， 提示st_domain_methods报错
  18. matlab 求obb,实验六MATLAB神经网络工具箱DOC
  19. Linux alias编写
  20. [H5]HTML5样式、链接和表格

热门文章

  1. 保护云安全的7个安全锦囊
  2. EditText自定义下划线
  3. 【PCIE-1】---Pcie基本概念普及（扫盲篇--巨适合新手）
  4. 他是第一个到达学校的人英语_新视野英语unit1-unit6翻译答案(中英对照)
  5. 读《道法自然-面向对象实践指南》
  6. [Python] Matchering2.0自动匹配式母带最全应用
  7. 服务器如何做中转进行端口映射，使服务器之间通信，然后访问目标网站（baidu.com)
  8. java.net.NoRouteToHostException: No route to host(Host unreachable)
  9. Linux-部署web程序
  10. AIX更改逻辑卷属性的两种方法（smit和命令行）