卡片式列表（Card List）CSS样式效果

最新推荐文章于 2024-02-27 11:40:35 发布
最新推荐文章于 2024-02-27 11:40:35 发布
阅读量6k 收藏 23
点赞数 7
分类专栏： css 文章标签： 列表 css html css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gamenoover/article/details/115111582
版权

页面效果如下：
在这里插入图片描述
Html + Css代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Card List</title>
</head>
<body>
    <div class="warp">
        <div class="card one">
            <div class="title">Title 1</div>
            <div class="content">Content 1</div>
        </div>
        <div class="card two">
            <div class="title">Title 2</div>
            <div class="content">Content 2</div>
        </div>
        <div class="card three">
            <div class="title">Title 3</div>
            <div class="content">Content 3</div>
        </div>
        <div class="card four">
            <div class="title">Title 4</div>
            <div class="content">Content 4</div>
        </div>
        <div class="card five">
            <div class="title">Title 5</div>
            <div class="content">Content 5</div>
        </div>
    </div>
</body>
<style>
    body{
      margin: 0;
      padding: 0;
    }
    .warp{
        background-color: rgb(222, 230, 230);
        width: 100vw;
        height: 100vh;
        
        overflow: hidden; 
        /* position: absolute; */
        /*避免子元素margin 影响外层元素 overflow和position都可以*/ 
        
        
        display: flex;
        justify-content: center;
		align-items: center;
        flex-direction: column; 
        /* flex弹性布局 居中（水平、垂直） */
    }
    .card{
        width: 90vw;
        height: 16vh;
        background-color: darkcyan;
        border-radius: 2vh;
        margin: 2vh;
        
        /* 文本垂直居中 */
        /* text-align: center; */
        /* line-height: 20vh; */

        /*外层相对位置*/
        /* position: relative; */

        border-radius: 12px;
        color: #ffc0cb;
        cursor: pointer;
        transition: all 1s ease;
        display: block;
    }
    .one{
        background-color: #8063e1;
        background-image: linear-gradient(135deg, #bd7be8, #8063e1);
        box-shadow: 20px 20px 60px rgba(34,50,84,0.5), 1px 1px 0px 1px #8063e1;
        z-index: 5;
        opacity: 0.9;
    }
    .two{
        background-color: #3f58e3;
        background-image: linear-gradient(135deg, #7f94fc, #3f58e3);
        box-shadow: 20px 20px 60px rgba(34,50,84,0.5), 1px 1px 0px 1px #3f58e3;
        z-index: 4;
        opacity: 0.9;
    }
    .three{
        background-color: #2c6fd1;
        background-image: linear-gradient(135deg, #21bbfe, #2c6fd1);
        box-shadow: 20px 20px 60px rgba(34,50,84,0.5), 1px 1px 0px 1px #2c6fd1;
        z-index: 3;
        opacity: 0.9;
    }
    .four{
        background-color: #352f64;
        background-image: linear-gradient(135deg, #415197, #352f64);
        box-shadow: 20px 20px 60px rgba(34,50,84,0.5), 1px 1px 0px 1px #352f64;
        z-index: 2;
        opacity: 0.9;
    }
    .five{
        background-color: #63e1b7;
        background-image: linear-gradient(135deg, #4e9666, #63e1a6);
        box-shadow: 20px 20px 60px rgba(34,50,84,0.5), 1px 1px 0px 1px #63e178;
        z-index: 1;
        opacity: 0.9;
    }
    .card .title {
        /*内层绝对位置*/
        /* position: absolute; */
        border-bottom: rgb(149, 158, 158) 1px solid;
        width: calc(100% - 2vw);
        height: 25%;
        padding-left :2vw;
        font-size: 26px;
        font-weight: bold;
        }
    .card .content {
        /* position: absolute; */
        
        width: 100%;
        height: 74%;
        
        /* 文本垂直居中 */
        /* text-align: center; */
        line-height: 11vh;

        padding-left :2vw;
        font-weight: 700;
        font-size: 16px;
    }
    .card:hover {
        transform: rotateX(0deg) rotateY(0deg) rotate(0deg) translate(15px, 0px);
        opacity: 0.6;
    }
    .card:hover:after {
        transform: translateX(100%);
        transition: all 1.5s ease-in-out;
    }
    .card::after {
        content: '';
        position: absolute;
        top: 0px;
        left: 0;
        width: 100%;
        height: 100%;
        transform: translateX(-100%);
        background-image: linear-gradient(60deg, rgba(255,255,255,0) 20%, rgba(255,255,255,0.1), rgba(255,255,255,0) 80%);
    }
</style>
</html>

总结

1.页面的尺寸，建议使用vh，vw这样更好的适配页面；
2.利用transition实现动画特效，页面更有亲和度；
3.如果对页面的布局不清楚，可以在每个标签上使用 border: 1px red solid 可视化的看见要操作的标签，更好的去调整页面；
4.display:flex 内容很多，建议拿出点事件自己看看 display flex 菜鸟教程
5.由简单到高级，提升前台页面的设计能力。

onizukayao
关注
  • 7
    点赞
  • 踩
  • 23
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Bootstrap卡片图文列表布局样式代码
06-11
基于jQuery和Bootstrap实现的卡片图文列表布局样式代码，包括普通的卡片布局、等高卡片布局等。
[前端设计]卡片式列表
热门推荐
小赤石的Code Space
12-03 1万+
注：本设计由赤石俊哉原创设计，您可以随意使用本设计，但是请在注释中标注来源。 注：本文不允许任何形式的转载。 概述这个设计是之前给我们系里做网页的时候想到的，外表看似列表，实际上在鼠标移动到列表条目上的时候，显示一个摘要卡片，效果就像这样： 虽然可以纯CSS实现，但是在IE9以下等对CSS3动画支持不好的浏览器就悲剧了。于是动画还是使用JQuery来实现比较好。缺陷 暂时还没有办法让摘要
常见需求：CSS 实现弧形卡片的 3 种方式
最新发布
weixin_45727472的博客
02-27 1136
以上就是本文的全部内容了，共介绍了 3 种不同的方式，下面总结一下各自优缺点border-radius 支持斜杠语法，可以单独控制圆弧的x、y半径，实现“外凸”圆弧最简单，缺点是圆弧不能自定义弧度，也不能实现“内凹”效果伪元素最符合常规思维，可以解决以上问题，缺点是需要占用伪元素，略微麻烦渐变实现和伪元素拼接思路类似，缺点是语法复杂，需要熟练掌握渐变语法大家可以根据自己的实际场景自行选择适当的方式，当然最好都能够掌握，这样碰到类似需求时才能游刃有余，如果你有其他的思路，欢迎留言讨论。
纯CSS实现超美选项卡
宋承佑
03-31 316
纯静态的，后续的内容可以自己加上去哟！！！ <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <t.
jQuery+CSS3折叠卡片式下拉列表框实现效果
01-19
jQuery下拉列表框特效将每一个列表项都制作为卡片的样式，打开和关闭它有打开和关闭百叶窗的感觉，效果非常不错，分享给大家。 简要教程 HTML结构 该下拉列表框特效的列表项使用一个无序列表来制作，用于切换打开和关闭状态的元素是一个超链接元素。 <div class=container> <div class=card-drop> <a class='toggle'> <i class='fa fa-suitcase'></i> <span class='label-active'>Everyting</span> </a> <ul>
办公桌面背景卡片样式商务PPT模板
07-14
这是一套办公桌面背景的，卡片样式商务PPT模板，共23张； PPT模板使用了摆放绿色植物与笔记本电脑的办公桌面PPT背景图片。中间放置白色带有阴影效果的白色卡片，作为PPT内容展示区。PPT模板封面，左侧填写商务演示PPT标题文字。界面简洁商务。 PowerPoint模板内容页，由21张绿色动态PPT图表制作。另外使用了人物插图、风景插图、手机平板插图等排版。 本模板具有良好的通用性，适合用于制作办公主题的PowerPoint，如：工作总结汇报PPT、个人述职报告PPT、工作计划PPT等。.PPTX格式；
CardList.zip
05-16
分享一个安卓开发中经常碰到的，实现列表菜单卡片式布局！
10个实用的CSS样式之悬浮卡片
一个专注于客户端开发的技术er，不定期更新Android，Flutter，HormonyOS等方向的使用心得和感悟
10-23 8108
对于初学前端的小白来说css样式的设计很考验基本功和创意想法，而在项目开发中我们不可能将大部分的时间用于CSS代码的编写，能复用的就复用。因此我特意总结了16个在项目开发中常用的CSS样式，因为自己也是初学者，所以以小白的视角来记录和学习这16款样式的设计与编写。今天我为大家带来的是悬浮卡片首先我们来看看最终的效果到此为止一个简单的悬浮卡片就做好啦，当然在常见的网站中不会这样去配色哈，还是要简约大气为主。但是学习阶段好看就完事了。如果觉得不错的话记得哈。
【css布局】卡片布局
qinnzheng
12-01 2074
卡片布局
Android中的cardlist组件,Android零基础入门第71节：CardView简单实现卡片式布局
weixin_36423062的博客
05-25 704
还记得我们一共学过了多少UI控件了吗？都掌握的怎么样啊。安卓中一些常用控件学习得差不多了，今天再来学习一个新的控件CardView，在实际开发中也有非常高的地位。一、CardView简介CardView是Android 5.0系统引入的控件，相当于FragmentLayout布局控件然后添加圆角及阴影的效果。CardView继承自Framelayout，所以FrameLayout所有属性CardV...
11个使用CSS制作产品展示卡片样例
#include
03-13 1万+
作者：John Mantas 使用技术：HTML / CSS (SCSS) 是否自适应：否 依赖库：- 浏览器兼容：Chrome, Edge, Firefox, Opera, Safari 源码链接：https://codepen.io/john-mantas/full/bxmrBq 作者：George Gedox 使用技术：HTML / CSS (SCSS) 是否自适应：否 依赖库：font...
CSS3社交图文卡片式布局特效
07-24
CSS3社交图文卡片式布局特效是一款可用于相册图片，产品图片介绍展示特效。
CSS3卡片式登录注册表单
07-24
CSS3卡片式登录注册表单是一款基于js+css3制作的登录注册框表单动画切换布局特效。
jQuery时钟翻转卡片样式
07-20
创意jQuery时钟，使用卡片翻转样式动画效果。
卡片样式的工作总结汇报PPT模板
07-14
这一套卡片样式的，工作总结汇报PPT模板，共30张； PowerPoint模板内容页，使用了城市夜景PPT背景图片。首页放置白色卡片样式的矩形图案，填写工作总结汇报PPT标题文字。界面简洁大气实用。 PowerPoint模板内容页，由28张红黑配色的动态PPT图表制作。另外使用了职场人物、黑白数据报表、虚拟手势等图案排版。 工作总结汇报PPT目录： 一、工作回顾 二、完成情况 三、项目展示 四、工作不足 五、未来计划 ... ... ... 本模板设计简洁实用，适合用于制作各类通用商务PPT、工作总结PPT、述职报告PowerPoint等。.PPTX格式；
bootstrap卡片图文列表布局特效代码
03-20
bootstrap卡片图文列表布局代码是一款基于jQuery跟Bootstrap实现的3种列表布局样式代码。
分享CSS3制作卡片式图片的方法
09-24
主要为大家分享了CSS3制作卡片式图片的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
前端基础——CSS3
qq_63373917的博客
01-24 806
CSS3CSS3边框CSS3背景CSS3渐变CSS3阴影CSS3字体 CSS3边框 新边框属性： border-image 设置所有边框图像的速记属性。 border-radius 设置所有四个边框半径属性的属性。 四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。 三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角。 两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角。 一个值： 四个圆角值相同。 border-shadow 附加一个或
前端样式-卡片01
Anolzo
03-19 3139
运用到的技术： html + css+ js 样式： HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-sc
css 卡片切换效果
07-28
你可以使用CSS来实现卡片切换效果。下面是一个简单的示例代码： HTML: ```html <div class="card-container"> <div class="card active"> <h3>Card 1</h3> <p>This is the content of card 1.</p> </div> <div class="card"> <h3>Card 2</h3> <p>This is the content of card 2.</p> </div> <div class="card"> <h3>Card 3</h3> <p>This is the content of card 3.</p> </div> </div> ``` CSS: ```css .card-container { display: flex; } .card { flex: 1; border: 1px solid #ccc; padding: 10px; transition: transform 0.3s ease; } .card.active { transform: scale(1.1); } ``` 在上面的示例中，`.card-container` 是一个包含所有卡片的容器。每个卡片都有一个 `.card` 类，并且默认情况下都具有相同的样式。通过将 `.active` 类添加到某个卡片上，可以实现该卡片的放大效果。 你可以使用JavaScript或其他方式来切换 `.active` 类的位置，从而切换卡片的显示效果。这只是一个简单的示例，你可以根据自己的需求进行扩展和调整。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

onizukayao

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值