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