爬行的蜗牛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索
热搜: golang Linux PHP
查看: 119|回复: 0

HTML+CSS 动态卡片

[复制链接]

152

主题

48

回帖

1137

积分

管理员

积分
1137
发表于 2024-11-23 16:33:04 | 显示全部楼层 |阅读模式
效果

111.gif

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>动态卡片</title>
  7.     <link rel="stylesheet" href="./21-动态卡片.css">
  8. </head>
  9. <body>
  10.     <div class="container">
  11.         <div class="box"><img src="./images/male.png" alt=""></div>
  12.         <div class="box"><img src="./images/female.png" alt=""></div>
  13.     </div>
  14. </body>
  15. </html>
复制代码
CSS

  1. * {
  2.     margin: 0;
  3.     padding: 0;
  4. }

  5. body {
  6.     min-height: 100vh;
  7.     display: flex;
  8.     justify-content: center;
  9.     align-items: center;
  10.     background-color: #333;
  11. }

  12. .container {
  13.     display: flex;
  14. }

  15. .container .box {
  16.     position: relative;
  17.     display: flex;
  18.     justify-content: center;
  19.     width: 320px;
  20.     height: 400px;
  21.     --c1: #c7cc97;
  22.     --c2: #e6a28c;
  23.     background: linear-gradient(45deg, var(--c1) 25%, #444 25%, #444 50%, var(--c1) 50%, var(--c1) 75%, #444 75%, #444 100%);
  24.     background-size: 40px 40px;
  25.     border-radius: 20px;
  26.     margin: 0 20px;
  27.     filter: grayscale(1);
  28.     transition: filter 1s;
  29.     animation: animateBg 0.5s linear infinite;
  30.     animation-play-state: paused;
  31. }

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

  36. .container .box img {
  37.     height: 90%;
  38.     position: absolute;
  39.     bottom: 0;
  40.     transition: 0.5s;
  41. }

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

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

  49. @keyframes animateBg {
  50.     0% {
  51.         background-position: 0;
  52.     }
  53.     100% {
  54.         background-position: 40px;
  55.     }
  56. }
复制代码
实现思路拆分

  1. * {
  2.     margin: 0;
  3.     padding: 0;
  4. }
复制代码
这段代码是将所有元素的外边距和内边距都设置为0,以便更好地控制页面布局。

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

  1. .container {
  2.     display: flex;
  3. }
复制代码
这段代码设置了一个名为.container的元素,将其display属性设置为flex,使得其内部的元素可以使用flex布局。

  1. .container .box {
  2.     position: relative;
  3.     display: flex;
  4.     justify-content: center;
  5.     width: 320px;
  6.     height: 400px;
  7.     --c1: #c7cc97;
  8.     --c2: #e6a28c;
  9.     background: linear-gradient(45deg, var(--c1) 25%, #444 25%, #444 50%, var(--c1) 50%, var(--c1) 75%, #444 75%, #444 100%);
  10.     background-size: 40px 40px;
  11.     border-radius: 20px;
  12.     margin: 0 20px;
  13.     filter: grayscale(1);
  14.     transition: filter 1s;
  15.     animation: animateBg 0.5s linear infinite;
  16.     animation-play-state: paused;
  17. }
复制代码
这段代码设置了一个名为.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,即初始状态下动画不播放。

  1. .container .box:nth-child(2) {
  2.     background: linear-gradient(135deg, var(--c2) 25%, #444 25%, #444 50%, var(--c2) 50%, var(--c2) 75%, #444 75%, #444 100%);
  3.     background-size: 40px 40px;
  4. }
复制代码
这段代码设置了.container元素下的第二个.box元素的背景颜色为另一种斜线条纹,由两种颜色交替组成。background-size属性设置了斜线条纹的大小为40px * 40px。

  1. .container .box img {
  2.     height: 90%;
  3.     position: absolute;
  4.     bottom: 0;
  5.     transition: 0.5s;
  6. }
复制代码
这段代码设置了.box元素内的img元素的高度为90%,即占据.box元素的90%高度。position属性设置为absolute,使得img元素可以使用绝对定位。bottom属性设置为0,使得img元素位于.box元素的底部。transition属性设置了img元素的过渡效果,当高度发生变化时,过渡时间为0.5秒。

  1. .container .box:hover img {
  2.     height: 480px;
  3. }
复制代码
这段代码设置了当鼠标悬停在.box元素上时,其内部的img元素的高度变为480px,即放大效果。

  1. .container .box:hover {
  2.     filter: grayscale(0);
  3.     animation-play-state: running;
  4. }
复制代码
这段代码设置了当鼠标悬停在.box元素上时,其内部的灰度值变为0,即恢复彩色。同时,将动画的播放状态设置为running,即播放动画。

  1. @keyframes animateBg {
  2.     0% {
  3.         background-position: 0;
  4.     }
  5.     100% {
  6.         background-position: 40px;
  7.     }
  8. }
复制代码
这段代码定义了一个名为animateBg的动画,它控制了.box元素的背景颜色的滚动效果。0%表示动画的起始状态,background-position属性设置为0,即背景颜色的起始位置。100%表示动画的结束状态,background-position属性设置为40px,即背景颜色的结束位置。

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

快速回复 返回顶部 返回列表