中国红客联盟国际站联盟介绍联盟架构联盟文化联盟事记联盟邮箱购买特权捐助我们收藏本站
请登录
立即注册
首页Portal
资讯
圈子Group
贡献榜
关于我们
红客起源事记
搜索
当前位置:»交流社区 › 中国红客联盟【技术分享区】 › 编程代码交流 › html+css实现响应式卡片悬停效果

[前端] html+css实现响应式卡片悬停效果

1508 0
Honkers 2022-10-19 15:37:33 | 显示全部楼层 |阅读模式
目录

    实现：总结：

话不多，看效果先：


卡片悬停，响应式卡片，简约效果。

实现：

1. 定义标签，.kapian为最底层盒子，然后两个子盒子一个放图片，一个放文本：
  1. <div class="kapian">
  2.           <div class="tu">
  3.             
  4.           </div>
  5.           <div class="wenben">
  6.                 <h2>The aurora borealis</h2>
  7.                 <p style="padding-bottom: 20px;">natural</p>
  8.                 <p>
  9.                     Aurora Borealis is a colorful luminous phenomenon that appears over the high magnetic latitude region of the planet's North Pole.
  10.                     I love the aurora borealis. It's so beautiful.
  11.                     </p>
  12.           </div>
  13.     </div>
复制代码
2.先定义底层盒子的css基本样式，长宽等，就不详细说明了：
  1. .kapian{
  2.             position: relative;
  3.             width: 300px;
  4.             height: 400px;
  5.             border-radius: 3px;
  6.             background-color: #fff;
  7.             box-shadow: 2px 3px 3px rgb(139, 138, 138);
  8.             overflow: hidden;
  9.             cursor: pointer;
  10.             transition: all 0.3s;
  11.         }
  12.         .kapian:hover{
  13.             box-shadow: 2px 3px 10px rgb(36, 35, 35);
  14.         }
复制代码
:hover鼠标经过后盒子阴影变化。
transition: all 0.3s;过渡效果，阴影在0.3s内慢慢变化
3. 图片的基本样式，采用绝对定位：
  1. .tu{
  2.             position: absolute;
  3.             top: 0;
  4.             left: 0;
  5.             width: 100%;
  6.             height: 300px;
  7.             overflow: hidden;
  9.         }
  10.         .tu img{
  11.             width: 100%;
  12.             height: 100%;
  13.             transition: all 0.5s;
  14.         }
  15.         .kapian:hover .tu img{
  16.             transform: scale(1.2);
  17.             filter: blur(1px);
  18.         }
复制代码
:hover鼠标经过后图片变大，而且变模糊；
transform: scale(1.2);图片变大为1.2倍；
filter: blur(1px);图片变模糊；
4 .定义装文本这个盒子的基本样式，采用绝对定位：
  1. .wenben{
  2.             position: absolute;
  3.             bottom: -200px;
  4.             width: 100%;
  5.             height: 300px;
  6.             background-color: rgb(247, 242, 242);
  7.             transition: 0.5s;
  8.         }
  9.         .kapian:hover .wenben{
  10.             bottom: 0px;
  11.         }
复制代码
:hover鼠标经过后文本框绝对定位的bottom发生改变，使得呈现文本框向上展开的效果；
5 .文本框里字符的样式：
  1. .wenben h2{
  2.             color: rgb(21, 74, 172);
  3.             line-height: 60px;
  4.             text-align: center;
  6.         }
  7.         .wenben p{
  8.             padding: 0 30px;
  9.             font-family: 'fangsong';
  10.             font-size: 16px;
  11.             font-weight: bold;
  12.             line-height: 20px;
  13.             text-align: center;
  14.         }
复制代码
完整代码：
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7.     <style>
  8.         *{
  9.             margin: 0;
  10.             padding: 0;
  11.             box-sizing: border-box;
  12.         }
  13.         body{
  14.             height: 100vh;
  15.             display: flex;
  16.             justify-content: center;
  17.             align-items: center;
  18.            background-image: radial-gradient(rgb(241, 238, 238),black);
  19.         }
  20.         .kapian{
  21.             position: relative;
  22.             width: 300px;
  23.             height: 400px;
  24.             border-radius: 3px;
  25.             background-color: #fff;
  26.             box-shadow: 2px 3px 3px rgb(139, 138, 138);
  27.             overflow: hidden;
  28.             cursor: pointer;
  29.             transition: all 0.3s;
  30.         }
  31.         .kapian:hover{
  32.             box-shadow: 2px 3px 10px rgb(36, 35, 35);
  33.         }
  34.         .tu{
  35.             position: absolute;
  36.             top: 0;
  37.             left: 0;
  38.             width: 100%;
  39.             height: 300px;
  40.             overflow: hidden;
  42.         }
  43.         .tu img{
  44.             width: 100%;
  45.             height: 100%;
  46.             transition: all 0.5s;
  47.         }
  48.         .kapian:hover .tu img{
  49.             transform: scale(1.2);
  50.             filter: blur(1px);
  51.         }
  52.         .wenben{
  53.             position: absolute;
  54.             bottom: -200px;
  55.             width: 100%;
  56.             height: 300px;
  58.             background-color: rgb(247, 242, 242);
  59.             transition: 0.5s;
  60.         }
  61.         .kapian:hover .wenben{
  62.             bottom: 0px;
  63.         }
  64.         .wenben h2{
  65.             color: rgb(21, 74, 172);
  66.             line-height: 60px;
  67.             text-align: center;
  69.         }
  70.         .wenben p{
  71.             padding: 0 30px;
  72.             font-family: 'fangsong';
  73.             font-size: 16px;
  74.             font-weight: bold;
  75.             line-height: 20px;
  76.             text-align: center;
  77.         }
  78.     </style>
  79. </head>
  80. <body>
  81.     <div class="kapian">
  82.           <div class="tu">
  83.             
  84.           </div>
  85.           <div class="wenben">
  86.                 <h2>The aurora borealis</h2>
  87.                 <p style="padding-bottom: 20px;">natural</p>
  88.                 <p>
  89.                     Aurora Borealis is a colorful luminous phenomenon that appears over the high magnetic latitude region of the planet's North Pole.
  90.                     I love the aurora borealis. It's so beautiful.
  91.                     </p>
  92.           </div>
  93.     </div>
  94. </body>
  95. </html>
复制代码
总结：

希望在路上~


到此这篇关于 html+css实现响应式卡片悬停效果的文章就介绍到这了,更多相关html css卡片悬停内容请搜索中国红客联盟以前的文章或继续浏览下面的相关文章，希望大家以后多多支持中国红客联盟！

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

×
回复

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Honkers

特级红客

关注
  • 3136
    主题
  • 36
    粉丝
  • 0
    关注
这家伙很懒，什么都没留下！

中国红客联盟公众号

联系站长QQ：5520533

admin@chnhonker.com
Copyright © 2001-2025 Discuz Team. Powered by Discuz! X3.5 ( 粤ICP备13060014号 )|天天打卡 本站已运行天