HTML5+CSS3小实例：人物介绍卡片2.0

最新推荐文章于 2024-08-05 22:20:56 发布

耀南.

最新推荐文章于 2024-08-05 22:20:56 发布

阅读量760

点赞数 8

分类专栏：前端好玩炫酷的动画小案例文章标签： html5 前端 html

本文链接：https://blog.csdn.net/YN2000609/article/details/135742810

版权

前端好玩炫酷的动画小案例专栏收录该内容

103 篇文章 11 订阅

订阅专栏

制作不易安利给大家前端实用的小实例 cv可直接运行使用

效果图：

HTML：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>人物介绍卡片2.0</title>
    <link rel="stylesheet" href="206.css">
</head>
<body>
    <div class="container">
        <ul>
            <li>
                <img src="/images/op/asl/l.jpg" alt="">
                <div class="text">
                    <h3>艾斯</h3>
                    <span>烧烧果实前任能力者，绰号“火拳”。</span>
                    <a href="#">了解更多</a>
                </div>
            </li>
            <li>
                <img src="/images/op/asl/s.jpg" alt="">
                <div class="text">
                    <h3>萨博</h3>
                    <span>烧烧果实现任能力者，革命军二把手。</span>
                    <a href="#">了解更多</a>
                </div>
            </li>
            <li>
                <img src="/images/op/asl/l.jpg" alt="">
                <div class="text">
                    <h3>路飞</h3>
                    <span>橡胶果实能力者，草帽小子路飞。</span>
                    <a href="#">了解更多</a>
                </div>
            </li>
        </ul>
    </div>
</body>
</html>

css：

*{
    /* 初始化 */
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    /* 100%窗口宽高 */
    min-height: 100vh;
    /* 弹性布局 水平+垂直居中 */
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #eff5ff;
}
.container ul{
    list-style: none;
    text-align: center;
}
.container li{
    width: 320px;
    height: 320px;
    display: inline-block;
    margin: 5px;
    text-align: left;
    position: relative;
}
.container li img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    position: relative;
    z-index: 10;
    /* 设置transform的过渡 */
    transition: transform 0.35s;
}
/* 文本层 */
.container li .text{
    width: 100%;
    height: 100%;
    background-color: #2c3f52;
    color: #b7ccde;
    position: absolute;
    left: 0;
    top: 0;
    padding: 20px;
    /* 默认缩小0.7倍、不透明度为0 */
    transform: scale(0.7);
    opacity: 0;
    /* 设置过渡 */
    transition: 0.35s;
}
.container li h3{
    color: #fff;
}
.container li a{
    position: absolute;
    bottom: 20px;
    right: 20px;
    background-color: #2b80ae;
    color: #fff;
    text-decoration: none;
    padding: 5px 10px;
    border-radius: 2px;
}
/* 悬停时图片变化 */
.container li:hover img{
    transform: scale(0.45);
    border-radius: 50%;
    border: 15px solid rgba(255,255,255,0.25);
}
/* 悬停时文本层变化 */
.container li:hover .text{
    transform: scale(1);
    opacity: 1;
}

图片素材：

images/op/asl（这是我放置图片的路径，若要修改别忘了代码里的路径也要改噢~）

还有一张图莫名其妙违规了。。大家自己随便找图片吧

更多干货🎁

如果我的博客对你有帮助、如果你喜欢我的博客内容，请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦！
【👇🏻👇🏻👇🏻关注我| 获取更多源码 | 优质文章】带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板、大学生毕业HTML模板、期末大作业模板、等!
以上内容技术相关问题😈欢迎一起交流学习🔥嘉vx+18634371151