likes
comments
collection
share

仅使用CSS完成扩展卡片

作者站长头像
站长
· 阅读数 62

描述

创建一张图片卡片并在悬停时展开该卡片。

开始教程

先创建一个文件夹里面分别创建在创建两个文件夹一个assets用于存放图片一个src用于存放代码。

图片的话随便找几大小一致的图就行了。

然后在src文件下新建一个index.html文件。

 <div>
        <img src="../assets/1.png" alt="">
        <img src="../assets/2.png" alt="">
        <img src="../assets/3.png" alt="">
        <img src="../assets/4.png" alt="">
        <img src="../assets/5.png" alt="">
    </div>

然后在页面上面给到<style></style>标签来进行编写样式，也可以新建style.css文件引入进来。

    div {
        display: flex;
        flex-direction: row;
    }

    img {
        width: 50px;
        height: 340px;
        object-fit: cover;
        border-radius: 40px;
        margin-right: 10px;
        cursor: pointer;
    }

图像将像这样开始显示。

仅使用CSS完成扩展卡片

现在我就可以给img去添加:hover了并给它增加宽度从而展示出卡片的。

:hover的定义

  • 选择器用于选择鼠标指针浮动在上面的元素

  • 选择器适用于所有元素

   img:hover {
        width: 400px;
    }

然后在给img 标签添加transition属性以使其变得平滑。

transition属性是个复合属性，她包括以下几个子属性：

  • transition-property ：规定设置过渡效果的css属性名称,常用值 “all”全部css属性进行动画效果添加

  • transition-duration ：规定完成过渡效果需要多少秒或毫秒

  • transition-timing-function ：指定过渡函数规定速度效果的速度曲线 常用值：

    关键字描述：linear ease-in ease-in-out

  • transition-delay ：指定开始出现的延迟时间

    img {
        width: 50px;
        height: 340px;
        object-fit: cover;
        border-radius: 40px;
        margin-right: 10px;
        cursor: pointer;
        transition: width 0.5s ease-in-out; 
    }

然后就是这样这样扩展卡片已经完成了。

效果如下

仅使用CSS完成扩展卡片

完整代码

图片记得修改哦

<!DOCTYPE html>
<html lang="en">

<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>css扩展卡片</title>
</head>
<style>
    div {
        display: flex;
        flex-direction: row;
    }

    img {
        width: 50px;
        height: 340px;
        object-fit: cover;
        border-radius: 40px;
        margin-right: 10px;
        cursor: pointer;
        transition: width 0.5s ease-in-out;
    }

    img:hover {
        width: 400px;
    }
</style>

<body>
    <div>
         <!-- 图片记得修改哦 -->
        <img src="../assets/1.png" alt=""> 
        <img src="../assets/2.png" alt="">
        <img src="../assets/3.png" alt="">
        <img src="../assets/4.png" alt="">
        <img src="../assets/5.png" alt="">
    </div>
</body>

</html>

最后

谢谢观看，如果你觉得本文对你有帮助的话，麻烦点个赞，加个关注，后续还会继续更新这方面的内容。

转载自:https://juejin.cn/post/7149379525015502878
评论
请登录