HTML+CSS 动态卡片

最新推荐文章于 2024-08-22 13:25:59 发布
最新推荐文章于 2024-08-22 13:25:59 发布
阅读量976 收藏 23
点赞数 27
分类专栏： 若冰说CSS css 文章标签： css 前端 若冰说CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_72553980/article/details/139640003
版权

效果演示

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，即背景颜色的结束位置。

若冰说
关注
专栏目录
HTML+CSS 文本动画卡片
正在创作系列：【若冰说CSS】
06-02 360
实现了一个图片叠加文本动画效果的卡片（Card）布局。当鼠标悬停在卡片上时，卡片上的图片会变为半透明，同时显示隐藏在图片上的文本内容，并且文本内容有一个从左到右的渐显动画效果，伴随着一个白色渐变背景的动画效果。
用html+css设计一个列表清单小卡片
weixin_56334307的博客
07-05 839
这个HTML代码片段是一个简单的列表清单设计。它包含一个卡片元素（class为"card"），内部包含一个无序列表（ul），列表项（li）前面有一个特殊的符号（△）。整个卡片元素设计成300px宽，150px高，具有圆角边框和阴影效果。你可以将这段代码复制到一个HTML文件中，并在浏览器中打开以查看效果。希望这个设计能对大家的学习有所帮助！
html+css卡片
12-18
网页制作中，静态页面书写代码时方便查看的代码卡片
前端练习＜Html&CSS＞——悬浮抽卡片（附完整代码及实现效果）
Blusher1的博客
08-05 2835
这个小练习来源于b站up小K师兄，大家可以通过下面的链接学习哦~up讲的非常详细。先看一下效果：1.鼠标没有放置到card上2.鼠标放到card上，所有card呈角度散开3.单击选中某一张卡片，卡片上浮高亮，其他卡片变暗。
【样式】Html CSS卡片样式
我是Superman丶的博客
03-20 822
【样式】Html 卡片样式。
html5卡片效果
Amare丶的部落格
06-08 9861
html5卡片效果
HTML+CSS前端简单卡片动态效果
hexuhui0920的博客
01-16 2567
HTML+CSS前端简单卡片动态效果
HTML+CSS：3D卡片组件
正在创作系列：【若冰说CSS】
01-30 1124
实现了一个名为“卡片”的效果，当鼠标悬停在一个特定的元素上时，该元素会变得更亮，并且会在其他元素上方显示一个卡片。当鼠标悬停在卡片上时，卡片会变得更亮，并且会在其他元素上方显示一个提示信息。这个效果可以用来展示一些信息或者链接，让用户更好地了解和交互。
HTML+CSS动态卡片的制作（快去写给你的女朋友吧！！！）
qq_67996188的博客
12-26 767
HTML+CSS动态卡片的制作（快去写给你的女朋友吧！！！）
HTML+CSS div卡片翻转视角 帧.
最新发布
我们好像在哪见过~
08-22 268
🌟 CSS卡片翻转效果不仅能够为网站增添动态的视觉效果，还能以一种新颖的方式展示信息，激发用户的探索兴趣。本文将详细介绍如何利用CSS的动画和转换特性，实现一个引人入胜的卡片翻转动画，让您的网站设计更具吸引力和现代感。
HTML5+CSS3卡片抽出动画特效代码
03-20
总的来说，"HTML5+CSS3卡片抽出动画特效代码"是一个结合了HTML5结构化标记、CSS3动态效果和JavaScript交互的优秀示例，它展示了现代Web开发的灵活性和创新性。通过学习和理解这个代码，开发者可以提升自己在创建互动...
html+css轮滑式卡片
09-14
html+css轮滑式卡片
html+css3电影卡片
03-15
本项目“html+css3电影卡片”旨在利用这两种技术来创建一个具有专业外观的电影展示卡片，通常用于电影推荐、在线视频平台或者个人收藏分享等场景。 在HTML5中，我们首先会使用`<div>`元素作为卡片的基础结构，通过...
jQuery+CSS3+HTML5折叠卡片式下拉菜单特效
06-05
**jQuery+CSS3+HTML5折叠卡片式下拉菜单特效详解** 在网页设计中，下拉菜单是一种常见的交互元素，用于展示多级导航结构。本特效利用jQuery的事件处理、DOM操作，结合CSS3的动画效果和HTML5的新特性，构建出一种...
HTML5+CSS3卡片抽出动画.zip
11-18
综上所述，"HTML5+CSS3卡片抽出动画.zip"这个项目展示了如何结合使用HTML5、CSS3、JavaScript和jQuery创建一个动态、交互的网页效果。通过理解和学习这个示例，开发者可以提升自己的前端技能，进一步提升网页设计的...
HTML 卡片样式学习
金戈铁马
08-13 2750
参考： https://www.runoob.com/cssref/css3-pr-box-shadow.html 先看前两个参数的效果： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>卡片效果</title> <style type="text/css"> #card{
html css完成响应式卡片悬停效果
yunduanaoligei的博客
09-02 777
这篇文章关键介绍了 html css完成响应式卡片悬停实际效果,文中根据案例编码给大伙儿介绍的特别详尽，对我们的学习培训或工作中具备一定的参考参考使用价值，必须的小伙伴能够参考下 话不多，进入主题 卡片悬停，响应式卡片，简约效果。 实现： 定义标签，.kapian为最底层盒子，然后两个子盒子一个放图片，一个放文本： <div class="kapian"> <div class="tu"> <img src="3.2.png"&
卡片样式 html源码,这个彩色卡片样式，可以自定义颜色！
weixin_30663839的博客
06-15 1446
原标题：这个彩色卡片样式，可以自定义颜色！大家好，我是老沙。新的一周又来送教程啦。每周老沙都会送上与排版、运营有关的各种干货，并及时更新到i排版公众号的菜单栏里。所以，哪天你错过了某篇干货文章，或者想再看几遍，按照如图所示的位置便能找到。 上周老沙曾教大家制作 文字彩色背景(戳蓝字可直接查看)，教程中涉及到代码，有些小伙伴被样式吸引，转眼又被代码劝退。其实，大可不必。老沙的教程凡是涉及到代码的，基...
实现美图官网活动卡片——html、css
u013430418的博客
07-13 533
通过使用HTML+CSS实现美图官网的卡片样式
html+css动态人物介绍网页代码
05-31
以下是一个简单的HTML+CSS动态人物介绍网页代码示例： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>人物介绍网页</title> <style> /* 布局和字体样式 */ body { font-family: "微软雅黑", sans-serif; background-color: #f2f2f2; margin: 0; padding: 0; } header { background-color: #333; color: #fff; padding: 20px; text-align: center; } h1 { font-size: 36px; margin: 0; } main { display: flex; flex-wrap: wrap; justify-content: center; margin: 20px; } .card { background-color: #fff; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); display: flex; flex-direction: column; margin: 20px; padding: 20px; text-align: center; transition: transform 0.2s; width: 300px; } .card:hover { transform: scale(1.05); } .card img { border-radius: 50%; height: 200px; margin-bottom: 20px; width: 200px; } .card h2 { font-size: 24px; margin: 0; } .card p { font-size: 16px; margin: 10px 0; } .card button { background-color: #333; border: none; color: #fff; cursor: pointer; padding: 10px 20px; transition: background-color 0.2s; } .card button:hover { background-color: #666; } /* 动画效果 */ @keyframes slideInLeft { from { opacity: 0; transform: translateX(-100px); } to { opacity: 1; transform: translateX(0); } } .animation { animation: slideInLeft 1s; } </style> </head> <body> <header> <h1>人物介绍网页</h1> <p>一个简单的HTML+CSS动态人物介绍网页示例</p> </header> <main> <div class="card animation"> <img src="https://via.placeholder.com/200x200" alt="人物照片"> <h2>人物名称</h2> <p>人物介绍</p> <button>了解更多</button> </div> <div class="card animation"> <img src="https://via.placeholder.com/200x200" alt="人物照片"> <h2>人物名称</h2> <p>人物介绍</p> <button>了解更多</button> </div> <div class="card animation"> <img src="https://via.placeholder.com/200x200" alt="人物照片"> <h2>人物名称</h2> <p>人物介绍</p> <button>了解更多</button> </div> </main> </body> </html> ``` 这个示例网页包括一个头部、一个主体，以及三个人物介绍卡片。使用了HTML标签和CSS样式来创建和美化布局，以及CSS3的动画效果来添加动态效果。希望这个示例对您有所帮助。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值