css3 文字卡片折叠效果

最新推荐文章于 2025-09-11 14:32:10 发布

原创

最新推荐文章于 2025-09-11 14:32:10 发布 · 444 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3

这段代码展示了如何使用HTML和CSS创建一个扭曲字体的卡片式布局。通过应用`display:inline-block`和`display:flex`，以及`transform:skewY()`属性，实现了文字在悬停时产生扭曲效果。背景颜色为浅桃红色，每个卡片元素为白色正方形，当鼠标悬停在奇数元素上时，元素向左扭曲，偶数元素向右扭曲，同时添加阴影效果。

主要代码说明

包裹字体的卡片必须display: inline-block; display: flex;
transform: skewY(-20deg); /扭曲属性/
nth:-child(odd)odd代表奇数 even代表偶数

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</