HTML+CSS 动态卡片

news2024/12/23 22:19:11

效果演示

21-动态卡片.gif

实现了一个带有动态背景和图片放大效果的卡片展示。卡片的背景是由两种颜色交替组成的斜线条纹，同时背景会以一定速度循环滚动。当鼠标悬停在卡片上时，卡片的图片会放大，并且卡片的背景会变为彩色。

Code

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态卡片</title>
    <link rel="stylesheet" href="./21-动态卡片.css">
</head>
<body>
    <div class="container">
        <div class="box"><img src="./images/male.png" alt=""></div>
        <div class="box"><img src="./images/female.png" alt=""></div>
    </div>
</body>
</html>

CSS

* {
    margin: 0;
    padding: 0;
}

body {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #333;
}

.container {
    display: flex;
}

.container .box {
    position: relative;
    display: flex;
    justify-content: center;
    width: 320px;
    height: 400px;
    --c1: #c7cc97;
    --c2: #e6a28c;
    background: linear-gradient(45deg, var(--c1) 25%, #444 25%, #444 50%, var(--c1) 50%, var(--c1) 75%, #444 75%, #444 100%);
    background-size: 40px 40px;
    border-radius: 20px;
    margin: 0 20px;
    filter: grayscale(1);
    transition: filter 1s;
    animation: animateBg 0.5s linear infinite;
    animation-play-state: paused;
}

.container .box:nth-child(2) {
    background: linear-gradient(135deg, var(--c2) 25%, #444 25%, #444 50%, var(--c2) 50%, var(--c2) 75%, #444 75%, #444 100%);
    background-size: 40px 40px;
}

.container .box img {
    height: 90%;
    position: absolute;
    bottom: 0;
    transition: 0.5s;
}

.container .box:hover img {
    height: 480px;
}

.container .box:hover {
    filter: grayscale(0);
    animation-play-state: running;
}

@keyframes animateBg {
    0% {
        background-position: 0;
    }
    100% {
        background-position: 40px;
    }
}

实现思路拆分

* {
    margin: 0;
    padding: 0;
}

这段代码是将所有元素的外边距和内边距都设置为0，以便更好地控制页面布局。

body {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #333;
}

这段代码设置了body元素的最小高度为100vh，使得页面的高度至少占满整个视口。同时，将body元素的display属性设置为flex，使得其内部的元素可以使用flex布局。justify-content和align-items属性分别设置了flex容器的主轴和交叉轴的对齐方式，这里都设置为居中对齐。background-color属性设置了body元素的背景颜色为#333。

.container {
    display: flex;
}

这段代码设置了一个名为.container的元素，将其display属性设置为flex，使得其内部的元素可以使用flex布局。

.container .box {
    position: relative;
    display: flex;
    justify-content: center;
    width: 320px;
    height: 400px;
    --c1: #c7cc97;
    --c2: #e6a28c;
    background: linear-gradient(45deg, var(--c1) 25%, #444 25%, #444 50%, var(--c1) 50%, var(--c1) 75%, #444 75%, #444 100%);
    background-size: 40px 40px;
    border-radius: 20px;
    margin: 0 20px;
    filter: grayscale(1);
    transition: filter 1s;
    animation: animateBg 0.5s linear infinite;
    animation-play-state: paused;
}

这段代码设置了一个名为.box的元素，它是.container元素的子元素。position属性设置为relative，使得其内部的元素可以使用相对定位。display属性设置为flex，使得其内部的元素可以使用flex布局。justify-content属性设置为center，使得其内部的元素在主轴上居中对齐。width和height属性分别设置了.box元素的宽度和高度。–c1和–c2是自定义的CSS变量，分别表示两种颜色。background属性设置了.box元素的背景颜色为一个斜线条纹，由两种颜色交替组成。background-size属性设置了斜线条纹的大小为40px * 40px。border-radius属性设置了.box元素的圆角半径为20px。margin属性设置了.box元素的外边距为0 20px，即左右各20px。filter属性设置了.box元素的灰度值为1，即将其变为灰色。transition属性设置了.box元素的过渡效果，当filter属性发生变化时，过渡时间为1秒。animation属性设置了.box元素的动画效果，即背景颜色的滚动效果。animateBg是一个自定义的动画名称，0.5s表示动画的持续时间，linear表示动画的缓动函数，infinite表示动画无限循环。animation-play-state属性设置了动画的播放状态为paused，即初始状态下动画不播放。

.container .box:nth-child(2) {
    background: linear-gradient(135deg, var(--c2) 25%, #444 25%, #444 50%, var(--c2) 50%, var(--c2) 75%, #444 75%, #444 100%);
    background-size: 40px 40px;
}

这段代码设置了.container元素下的第二个.box元素的背景颜色为另一种斜线条纹，由两种颜色交替组成。background-size属性设置了斜线条纹的大小为40px * 40px。

.container .box img {
    height: 90%;
    position: absolute;
    bottom: 0;
    transition: 0.5s;
}

这段代码设置了.box元素内的img元素的高度为90%，即占据.box元素的90%高度。position属性设置为absolute，使得img元素可以使用绝对定位。bottom属性设置为0，使得img元素位于.box元素的底部。transition属性设置了img元素的过渡效果，当高度发生变化时，过渡时间为0.5秒。

.container .box:hover img {
    height: 480px;
}

这段代码设置了当鼠标悬停在.box元素上时，其内部的img元素的高度变为480px，即放大效果。

.container .box:hover {
    filter: grayscale(0);
    animation-play-state: running;
}

这段代码设置了当鼠标悬停在.box元素上时，其内部的灰度值变为0，即恢复彩色。同时，将动画的播放状态设置为running，即播放动画。

@keyframes animateBg {
    0% {
        background-position: 0;
    }
    100% {
        background-position: 40px;
    }
}

这段代码定义了一个名为animateBg的动画，它控制了.box元素的背景颜色的滚动效果。0%表示动画的起始状态，background-position属性设置为0，即背景颜色的起始位置。100%表示动画的结束状态，background-position属性设置为40px，即背景颜色的结束位置。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1821240.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！