一、CSS卡片翻转
卡片翻转是一种非常常用的交互效果,可以将卡片的正面和反面展现出来,增加信息呈现的方式和效果。下面是一个基础的CSS卡片翻转代码实现。
.card { position: relative; width: 300px; height: 200px; transform-style: preserve-3d; transition: all 0.6s ease; } .front, .back { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; transition: all 0.6s ease; } .front { transform: rotateY(0deg); background-color: #eee; } .back { transform: rotateY(180deg); background-color: #ccc; } .card:hover { transform: rotateY(180deg); }
这段代码使用了CSS3中的3D变换,将卡片翻转展示。其中,preserve-3d是保留元素自己的3D空间,backface-visibility用于控制反面可见性,避免翻转时出现奇怪的效果。需要注意的是,代码中card:hover用于在鼠标经过时触发翻转效果。
二、CSS卡片翻转效果
卡片翻转依然是本节的主题,但是这里我们讨论的是不同的翻转效果展现方式。如下是一种气泡翻转卡片效果:
.card { position: relative; width: 300px; height: 200px; transform-style: preserve-3d; cursor: pointer; transition: all 0.5s ease; } .front, .back { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; transform-style: preserve-3d; } .front { background-color: #fff; box-shadow: 0 2px 0 rgba(0, 0, 0, 0.1); transform: rotateX(0deg) rotateY(0deg) scale(1); z-index: 2; } .back { background-color: #fff; box-shadow: 0 2px 0 rgba(0, 0, 0, 0.1); transform: rotateX(90deg) rotateY(0deg) scale(1); } .card:hover .front { transform: rotateX(-80deg) rotateY(0deg) scale(0.8); z-index: 1; } .card:hover .back { transform: rotateX(0deg) rotateY(0deg) scale(1); z-index: 2; }
该代码中使用了rotateX,rotateY和scale等属性,实现了卡片在不同方向的旋转展现,同时实现了鼠标经过时的翻转效果。需要注意的是,card:hover选择器仅在鼠标经过时生效,这也是该效果的亮点之一。
三、CSS卡片布局
除了翻转效果外,卡片的布局也是非常重要的一个方面。下面是一种基础的卡片布局形式:
.card-wrapper { display: flex; justify-content: center; flex-wrap: wrap; } .card { flex: 0 1 300px; margin: 20px; height: 200px; background-color: #fff; box-shadow: 0 2px 0 rgba(0, 0, 0, 0.1); transition: all 0.2s ease; cursor: pointer; position: relative; } .card::before { content: ''; position: absolute; top: -1px; bottom: -1px; left: -1px; right: -1px; z-index: -1; background-color: rgba(0, 0, 0, 0.1); transform: skew(2deg) scale(1.2); transition: all 0.2s ease; opacity: 0; } .card:hover::before { opacity: 1; transform: skew(2deg) scale(1.3); }
这段代码使用了flex布局方式,实现了卡片在一行中的居中展现。同时,代码中::before用于实现鼠标经过时的高亮展现,用户体验非常不错。
四、CSS卡片叠加效果
除了基本的布局形式和交互效果外,卡片的叠加展现方式也是非常重要的一个方面。以下代码实现了一种卡片叠加效果:
.card { position: relative; width: 300px; height: 200px; margin-right: 50px; box-shadow: 0 2px 0 rgba(0, 0, 0, 0.1); transition: all 0.3s ease; cursor: pointer; transform: rotate(0deg); z-index: 1; } .card:hover { transform: rotate(-10deg); box-shadow: 2px 10px 50px rgba(0, 0, 0, 0.3); z-index: 999999; } .card-wrapper .card:nth-of-type(2) { position: absolute; top: 50px; right: -80px; transform: rotate(-10deg); z-index: 2; transition: all 0.3s ease; } .card-wrapper .card:nth-of-type(2):hover { transform: rotate(-20deg); right: -40px; z-index: 99999; box-shadow: 2px 10px 50px rgba(0, 0, 0, 0.3); }
这段代码中,我们使用了transform属性实现卡片在鼠标经过时的旋转变形效果。同时,代码中嵌套使用了nth-of-type选择器,实现了两张卡片的叠加效果。需要注意的是,卡片的z-index属性需要进行适当的设置,避免遮挡问题。
五、CSS卡片样式
卡片的样式非常多样化,下面是一种漂亮的卡片效果展现,可以为页面提供很好的视觉效果:
.card-wrapper { display: flex; flex-wrap: wrap; } .card { position: relative; width: 300px; height: 200px; margin-right: 50px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); transition: all 0.3s ease; cursor: pointer; overflow: hidden; transform-style: preserve-3d; } .card::before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-image: linear-gradient(160deg, #f30, #fc0, #ff0); opacity: 0.8; z-index: 1; transform: translateX(-100%); transition: all 0.3s ease; } .card:hover::before { transform: translateX(0%); } .card .card-inner { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform-style: preserve-3d; } .card .card-back { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #f7f7f7; transform: rotateY(180deg); } .card:hover .card-inner { transform: rotateY(-180deg); } .card .card-front { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: linear-gradient(160deg, #fff, #f7f7f7); } .card-caption { position: absolute; top: 130px; left: 20px; z-index: 2; } .card-caption h3 { margin: 0; font-size: 20px; font-weight: 700; color: #282828; text-transform: uppercase; letter-spacing: 2px; } .card-caption p { margin: 10px 0 0 0; font-size: 14px; line-height: 1.5; color: #282828; }
该代码使用了transform-style属性实现了卡片正反面文字内容展现,同时使用了背景渐变色,组合box-shadow阴影效果,使卡片呈现出浓郁质感。需要注意的是,卡片内部的内容需要使用.card-inner进行包裹,将卡片正反面分别展现出来。
六、CSS卡片框架
卡片框架是卡片呈现效果的基础,下面是一个基础的卡片框架:
.card { position: relative; margin-bottom: 50px; overflow: hidden; min-width: 280px; height: 420px; margin-right: 24px; background: #fff; border: 1px solid #f1f1f1; box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.12); transition: 0.3s; } .card:hover { box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.16); } .card .card-header { width: 100%; height: 160px; position: relative; overflow: hidden; } .card .card-header img { width: 100%; height: 100%; object-fit: cover; z-index: -1; } .card .card-body { padding: 24px; text-align: center; } .card .card-body h2 { font-size: 36px; font-weight: 600; margin-bottom: 12px; color: #282828; } .card .card-body p { font-size: 18px; line-height: 1.6; color: #7a7a7a; margin-bottom: 24px; } .card .card-footer { display: flex; justify-content: space-between; align-items: center; padding: 12px 24px; background: #f7f7f7; border-top: 1px solid #f1f1f1; position: absolute; bottom: 0; width: 100%; } .card .card-footer .card-author { font-size: 14px; font-weight: 600; color: #282828; text-transform: uppercase; } .card .card-footer .card-date { font-size: 14px; color: #7a7a7a; }
该代码使用了基础的CSS样式,呈现出了一种简约、大气的卡片效果。卡片框架是卡片效果的基础,无论是翻转、层叠还是其他效果都必须基于卡片框架而展开。
七、CSS图片效果
图片效果是卡片展现效果的一个重要方面,下面是一个基础的图片卡片效果:
.card { position: relative; margin-bottom: 50px; overflow: hidden; min-width: 280px; height: 420px; margin-right: 24px; background: #fff; border: 1px solid #f1f1f1; box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.12); transition: 0.3s; } .card:hover { box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.16); } .card .card-header { width: 100%; height: 160px; position: relative; overflow: hidden; display: flex; } .card .card-header img { width: 100%; height: 100%; object