• 设为首页
  • 收藏本站
  • 积分充值
  • VIP赞助
  • 手机版
  • 微博
  • 微信
    微信公众号 添加方式：
    1:搜索微信号（888888）
    2:扫描左侧二维码
  • 登录 立即注册
    • 切换风格
    快捷导航
    福建二哥 › 门户 › 查看主题

    html+css实现响应式卡片悬停效果

    发布者: 竹韵 | 发布时间: 2025-8-16 20:25| 查看数: 77| 评论数: 0|帖子模式

    话不多，看效果先：

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

    实现：

    1. 定义标签，.kapian为最底层盒子，然后两个子盒子一个放图片，一个放文本：
    1. <div class="kapian">
    2.           <div class="tu">
    3.              <img src="3.2.png">
    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;
    8.             
    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><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Document</title>    <style>        *{            margin: 0;            padding: 0;            box-sizing: border-box;        }        body{            height: 100vh;            display: flex;            justify-content: center;            align-items: center;           background-image: radial-gradient(rgb(241, 238, 238),black);        }        .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.         }        .tu{
    15.             position: absolute;
    16.             top: 0;
    17.             left: 0;
    18.             width: 100%;
    19.             height: 300px;
    20.             overflow: hidden;
    21.             
    22.         }
    23.         .tu img{
    24.             width: 100%;
    25.             height: 100%;
    26.             transition: all 0.5s;
    27.         }
    28.         .kapian:hover .tu img{
    29.             transform: scale(1.2);
    30.             filter: blur(1px);
    31.         }        .wenben{
    32.             position: absolute;
    33.             bottom: -200px;
    34.             width: 100%;
    35.             height: 300px;
    36.             background-color: rgb(247, 242, 242);
    37.             transition: 0.5s;
    38.         }
    39.         .kapian:hover .wenben{
    40.             bottom: 0px;
    41.         }        .wenben h2{
    42.             color: rgb(21, 74, 172);
    43.             line-height: 60px;
    44.             text-align: center;

    46.         }
    47.         .wenben p{
    48.             padding: 0 30px;
    49.             font-family: 'fangsong';
    50.             font-size: 16px;
    51.             font-weight: bold;
    52.             line-height: 20px;
    53.             text-align: center;
    54.         }    </style></head><body>    <div class="kapian">
    55.           <div class="tu">
    56.              <img src="3.2.png">
    57.           </div>
    58.           <div class="wenben">
    59.                 <h2>The aurora borealis</h2>
    60.                 <p style="padding-bottom: 20px;">natural</p>
    61.                 <p>
    62.                     Aurora Borealis is a colorful luminous phenomenon that appears over the high magnetic latitude region of the planet's North Pole.
    63.                     I love the aurora borealis. It's so beautiful.
    64.                     </p>
    65.           </div>
    66.     </div></body></html>
    复制代码
    总结：

    希望在路上~

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

    来源：互联网
    免责声明：如果侵犯了您的权益，请联系站长（1277306191@qq.com），我们会及时删除侵权内容，谢谢合作！

    本帖子中包含更多资源

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

    ×

    最新评论

    浏览过的版块

    新人须知

    常见问题

    维权申诉

    关注微博

    扫描微信

    关于合作

    通讯联系

    QQ Archiver 手机版 小黑屋 福建二哥 ( 闽ICP备2022004717号|闽公网安备35052402000345号 )

    Powered by Discuz! X3.5 © 2001-2023

    快速回复 返回顶部 返回列表