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