卡片布局样式弹出页面html页面前端源码

家好，今天给大家介绍一款，卡片布局样式弹出页面html页面前端源码（图1）。送给大家哦，获取方式在本文末尾。

图1

点击卡片会弹出相应子页面，四种卡片弹出四种不同的页面布局（图2）

图2

源码完整，需要的朋友可以下载学习（图3）

图3

本源码编码：20226，需要的朋友，访问下面链接后，搜索20226，即可获取。

「链接」

面

在现代网页设计中，个人主页是一个展示个人信息、技能、事件等的重要载体。为了吸引访客的注意力并提供良好的用户体验，设计师通常会运用各种技巧和效果来增加页面的吸引力。本文将介绍如何使用CSS创建一个惊叹的个人主页介绍卡片，展示独特魅力；

PREVIEW

创建HTML结构

首先，需要定义基本的HTML结构来容纳个人主页介绍卡片；

这里外层使用一个div包裹，里面使用三个<div>元素作为包裹容器布局，并在其中添加所需的图像、内容和按钮等：

<div class="card">
  <div class="box">
    <div class="img_box">
      <video 
        src="./assets/video.mp4"
        muted
        autoplay
        loop
      />
    </div>
  </div>

  <div class="box">
    <div class="content">
      <h2>
        Alexa
        <br>
        <span>
          Professional Artist
        </span>
      </h2>

      <ul>
        <li>
          Posts
          <span>22</span>
        </li>
        <li>
          Followers
          <span>999+</span>
        </li>
        <li>
          Following
          <span>7</span>
        </li>
      </ul>

      <button>Follow</button>
    </div>
  </div>

  <div class="circle">
    <div class="img_box">
      <img src="./assets/user.jpg" alt="">
    </div>
  </div>
</div>

外层是card容器，视频和文本内容区域是上下布局的，分别使用box容器包裹，最后是circle容器包裹头像在定位在中间左边超出；

注：
video设置属性：静音(muted)可实现自动播放(autoplay)，接着设置循环播放(loop)；
img>和video>的父容器是一个类名img_box；

添加元素样式

接下来，我们将使用CSS来为个人主页介绍卡片添加样式。以下是一些关键的样式属性和技巧，可以使卡片看起来更加漂亮和吸引人；

Base CSS

使用通配符选择器*来为页面中的所有元素设置相同的样式，清除默认样式，使用怪异盒子模型；
选择文档的根元素（HTML中的 <html>）定义颜色CSS变量；
body使用flex把card容器布局在页面水平、垂直居中；
card使用flex把三个子容器实现垂直排列并两端对齐；

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --clr: #083d41
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: var(--clr);
}

.card {
  background-color: var(--clr);
  position: relative;

  width: 320px;
  height: 430px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* 先把容器基本样式调整一下 */
.card .box {
  background-color: tomato;
  position: relative;
  
  width: 110%;
  height: 200px;
  /* 文本内容区域圆角 */
  border-radius: 20px;
}

/* 头像容器则使用定位布局 */
.card .circle {
  width: 180px;
  height: 180px;
  position: absolute;
  left: -70px;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 50%;
  border: 10px solid var(--clr);
}

/* 调整img和video共有的父容器样式 */
.card .box .img_box,
.card .circle .img_box {
  position: absolute;
  inset: 0;
  overflow: hidden;
  /* img的圆角 */
  border-radius: 50%; 
}
.card .box .img_box {
  /* video的圆角 */
  border-radius: 15px;
}

/* 调整图片和视频的样式 */
.card .box .img_box video,
.card .circle .img_box img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

视频区域CSS

调整card下的第一个box容器样式，也就是包裹视频的容器：

包围图片的边框部分，优化成圆角使其看上去不是那么突兀；
使用::before，::after创建两个伪元素用于需要优化的两角；
设置伪元素的左下角边框圆角程度与box保持一致，当然也可以自行调整；
最后给伪元素添加阴影效果覆盖住box的角，然后阴影颜色设置为与背景色一致，就能实现了：属性可设置的值包括阴影的 X 轴偏移量、Y 轴偏移量、模糊半径、扩散半径和颜色；比如本次设置的值对应：X轴偏移-6px Y轴偏移6px 颜色；

.card .box:nth-child(1)::before {
  content: "";
  width: 20px;
  height: 20px;
  background-color: transparent;
  
  position: absolute;
  z-index: 10;
  top: 106px;
  left: -1px;
  border-bottom-left-radius: 20px;
  box-shadow: -6px 6px var(--clr);
}

/* 样式同before类似，注意定位样式 */
.card .box:nth-child(1)::after {
  content: "";
  width: 20px;
  height: 20px;
  background-color: transparent;
  
  position: absolute;
  z-index: 10;
  bottom: -1px;
  left: 105px;
  border-bottom-left-radius: 20px;
  box-shadow: -6px 6px var(--clr);
}

目前添加样式效果图，可以在调试阶段更改明显色彩用于调整距离、位置等；

文本内容CSS

调整card下的第二个box容器样式，也就是包含文字信息的容器：

包围图片的边框部分，优化成圆角样式同上面类似，部分需要调整的看代码；
注意这里设置的是伪元素的左上角圆角程度，然后添加阴影颜色实现；
此外，还对卡片内部的标题、段落和列表应用了特定的样式，以使其在视觉上更加吸引人；

.card .box:nth-child(2) {
  background-color: #fff;

  width: 100%;
  height: 220px;
}

.card .box:nth-child(2)::before {
  content: "";
  width: 20px;
  height: 20px;
  background-color: transparent;

  position: absolute;
  z-index: 10;
  bottom: 106px;
  left: -1px;
  border-top-left-radius: 20px;
  box-shadow: -6px -6px var(--clr);
}
.card .box:nth-child(2)::after {
  content: "";
  width: 20px;
  height: 20px;
  background-color: transparent;

  position: absolute;
  z-index: 10;
  top: -1px;
  left: 109px;
  border-top-left-radius: 20px;
  box-shadow: -6px -6px var(--clr);
}

.card .box .content {
  position: absolute;
  inset: 0;
  padding: 30px 10px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

/* 姓名和Title样式 */
.card .box .content h2 {
  width: 100%;
  padding-left: 120px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  line-height: 1.1em;
  font-size: 1.15em;
  font-weight: 600;
  color: #333;
}
.card .box .content h2 span {
  letter-spacing: 0.05em;
  font-size: 0.75em;
  font-weight: 400;
  color: tomato;
  text-transform: initial;
}

/* 列表样式 */
.card .box .content ul {
  position: relative;
  top: 15px;

  width: 100%;
  padding: 0 10px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.card .box .content ul li {
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 10px;
  font-size: 0.85em;
  font-weight: 500;
  color: #999;
}
.card .box .content ul li:not(:last-child)
{
 border-right: 1px solid #ccc; 
}
.card .box .content ul li span{
  font-size: 1.65em;
  color: #333;
}

/* 按钮样式 */
.card .box .content button {
  position: relative;
  top: 25px;
  padding: 8px 30px;
  border: none;
  outline: none;
  background-color: #03a9f4;
  border-radius: 30px;
  color: #fff;
  font-size: 1em;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 500;
  cursor: pointer;
  border: 5px solid var(--clr);
  box-shadow: 0 0 0 10px #fff;
  transition: .5s;
}
.card .box .content button:hover {
  letter-spacing: 0.5em;
  background-color: #ff3d7f;
}

进一步优化

由于按钮的圆角与文本内容卡片的交界处看上去显得有些过于突兀了；所以现在把它们的交界处优化成弧形，样式类似box的伪元素，这里也给按钮创建两个伪元素，用于优化两边的交界处：

.card .box .content button::before {
  content: "";
  width: 20px;
  height: 20px;
  background-color: transparent;
  position: absolute;
  top: 23px;
  left: -29px;
  border-top-right-radius: 20px;
  box-shadow: 5px -7px #fff;
}

.card .box .content button::after {
  content: "";
  width: 20px;
  height: 20px;
  background-color: transparent;
  position: absolute;
  top: 23px;
  right: -29px;
  border-top-left-radius: 20px;
  box-shadow: -5px -7px #fff;
}

最后

除了基本样式之外，还进一步优化个人主页介绍卡片的细节。一些可选的技巧包括：

添加过渡效果：通过为button的容器元素添加过渡效果，使卡片在鼠标悬停时平滑地改变样式(背景色、字符间距)；
使用伪元素添加box-shadow技巧覆盖比较突兀的地方，使各个元素之间的交界处有过渡感，可以增加视觉上的吸引力；
通过给元素设置与body背景相同的颜色，可以使其在页面中更加突出和立体；

通过运用CSS的各种样式属性和技巧，我们可以轻松地创建漂亮的个人主页介绍卡片。这些卡片不仅能够有效地展示个人信息和技能，还能够吸引访客的注意力并提供良好的用户体验。记得尝试不同的样式和效果来定制你自己独特的个人主页卡片！

CSS创作个人主页介绍卡片，展示独特魅力
原文链接：https://juejin.cn/post/7260709771870060603

CSS实现弧形卡片的3种方式：打造优雅的现代网页设计

**导语：** 在网页设计中，弧形元素以其柔和而富有动态感的设计深受青睐，尤其在卡片设计上，弧形边缘能赋予其独特的视觉效果。本文将详细介绍利用CSS创建弧形卡片的3种不同方法，包括但不限于CSS border-radius、clip-path及mask属性，让您的网页更具吸引力。下面我们将通过实战代码演示每种方法的具体应用。

---

### **一、基础方法：border-radius 弧度控制**

**简介：**

`border-radius` 是最常见且兼容性最好的创建圆角或弧形卡片的方式，适用于创建简单弧形边角的卡片设计。

```html

</div>

```

```css

.card-rounded {

background-color: #f5f5f5;

width: 200px;

height: 100px;

border-radius: 20px; /* 可根据需要调整数值 */

overflow: hidden;

}

```

上述代码将创建一个具有弧形边角的卡片。通过调整 `border-radius` 的值，您可以创建出不同程度的弧形效果，但请注意，这种方法无法创建非对称或复杂弧形。

---

### **二、进阶技巧：clip-path 实现自由形状**

**介绍：**

`clip-path` 属性允许我们创建任意形状的裁剪区域，从而实现更为复杂和定制化的弧形卡片设计。

```html

</div>

```

```css

.card-clip-path {

background-color: #f5f5f5;

width: 200px;

height: 100px;

-webkit-clip-path: circle(50% at right 50%);

clip-path: circle(50% at right 50%);

}

```

上述代码创建了一个右半部分呈弧形的卡片。`clip-path` 提供了更多创造性可能，可以创建椭圆、多边形甚至路径裁剪等多种弧形效果。然而需要注意的是，`clip-path` 的浏览器兼容性不如 `border-radius` 理想。

---

### **三、创新方案：CSS Masks 打造灵活曲线**

**原理：**

CSS Masks 可以通过 `mask-image` 或 `mask-shape` 属性为元素添加遮罩，同样可以用来创建弧形卡片效果。

```html

</div>

```

```css

.card-mask {

background-color: #f5f5f5;

width: 200px;

height: 100px;

-webkit-mask-image: radial-gradient(circle, transparent 50%, white 51%);

mask-image: radial-gradient(circle, transparent 50%, white 51%);

}

```

以上代码利用径向渐变作为遮罩，实现了卡片顶部弧形边缘的效果。CSS Masks 具有高度灵活性，可以用于创建更复杂的形状，但它的浏览器兼容性也相对有限。

---

### **结论与比较**

- **border-radius** 方法最为简单易用且兼容性最好，适合日常项目和快速原型设计；

- **clip-path** 提供了更丰富的形状裁剪能力，适合需要突破常规、追求独特视觉效果的场景；

- **CSS Masks** 能够创建基于图像或者渐变的复杂蒙版效果，适用范围较广，但需要注意旧版本浏览器的支持情况。

选择何种方式实现弧形卡片取决于项目的实际需求和兼容性要求。通过巧妙运用这些CSS特性，您可以轻松打造出别具一格的弧形卡片设计，增添网站的视觉吸引力。

---

**补充实践案例：**

对于一些高级应用场景，您还可以结合以上技术，比如使用CSS Grid布局和Flexbox进行容器布局，同时利用CSS变量和媒体查询适应不同屏幕尺寸，让弧形卡片设计更加灵活和响应式。

切记，在实际开发过程中，务必关注浏览器兼容性问题，必要时借助PostCSS、Autoprefixer等工具增强跨浏览器兼容性。同时，保持对新兴CSS特性的关注，与时俱进地更新您的设计与开发技术栈。

在线咨询

上一篇：超详细MP4格式分析
下一篇：电信网关重置后注册失败的方法

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

卡片布局样式弹出页面html页面前端源码

家好，今天给大家介绍一款，卡片布局样式弹出页面html页面前端源码（图1）。送给大家哦，获取方式在本文末尾。

点击卡片会弹出相应子页面，四种卡片弹出四种不同的页面布局（图2）

源码完整，需要的朋友可以下载学习（图3）

本源码编码：20226，需要的朋友，访问下面链接后，搜索20226，即可获取。

面

PREVIEW

创建HTML结构

添加元素样式

Base CSS

视频区域CSS

文本内容CSS

进一步优化

最后

您的项目需求