二十个案例入门CSS3

知识点总结：

1. 基础样式与选择器

颜色与背景：通过 background-color 设置背景颜色，color 设置文本颜色。
字体与文本：使用 font-family 设置字体，font-size 设置字体大小，text-align 控制文本对齐。
内外边距：使用 padding 设置内边距，margin 设置外边距。

2. CSS 盒模型

了解元素的 width、height、border、padding、margin 以及盒模型的布局机制。

3. 定位与布局

浮动布局 (Float)：通过 float 实现元素的左右浮动布局，搭配 clear 属性清除浮动。
弹性布局 (Flexbox)：使用 display: flex 创建弹性布局，配合 flex-direction、justify-content、align-items 等属性实现灵活的布局方式。
网格布局 (CSS Grid)：通过 display: grid 创建网格布局，使用 grid-template-columns、gap 等属性定义网格结构。

4. 响应式设计

使用 媒体查询 (Media Queries) 实现根据屏幕宽度动态调整布局。
弹性网格布局：利用 auto-fit 和 minmax 创建可自动适应屏幕宽度的网格布局。

5. CSS3 视觉效果

渐变 (Gradient)：通过 linear-gradient 和 radial-gradient 创建线性与径向渐变效果。
边框与阴影：使用 border-radius 实现圆角效果，使用 box-shadow 添加阴影效果。
透明与滤镜：通过 opacity 设置元素透明度，使用 filter 实现灰度、模糊等滤镜效果。
背景图像：使用 background-image 设置背景图像，并配合 background-size、background-position、background-attachment 实现固定背景、覆盖背景等效果。

6. CSS3 动画

过渡 (Transition)：使用 transition 创建平滑的过渡效果。
关键帧动画 (Keyframes Animation)：通过 @keyframes 定义动画关键帧，使用 animation 属性调用动画，实现旋转、缩放等效果。

7. 伪类与伪元素

伪类 (Pseudo-classes)：通过 :hover、:active、:focus 实现元素的悬停、点击、焦点等交互效果。
伪元素 (Pseudo-elements)：使用 ::before 和 ::after 添加内容或装饰性元素。

8. 文本处理

文本溢出与裁剪：通过 text-overflow、white-space 和 overflow 控制文本溢出时的处理方式，如显示省略号。

9. 工具提示 (Tooltip)

使用伪元素和定位技巧创建悬停时显示的工具提示。

10. CSS3 图像处理

圆形头像：使用 border-radius 将图像裁剪成圆形。
滤镜效果：通过 filter 属性为图像添加滤镜，如灰度、模糊等效果。

11. 表单与输入

响应式表单：使用 Flexbox 或 Grid 创建自动适应屏幕宽度的表单布局。

12. 加载动画

CSS3 加载动画：通过边框、旋转动画模拟常见的加载动画效果。

13. 图像库与卡片布局

弹性图片库：使用 Flexbox 创建弹性、响应式的图片库布局。
卡片布局：使用 Grid 创建响应式的卡片布局。

案例：

1. 制作渐变背景

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Gradient Background</title><style>/* 线性渐变背景 */.linear-gradient-bg {background: linear-gradient(to right, #ff7e5f, #feb47b);height: 100vh;}/* 径向渐变背景 */.radial-gradient-bg {background: radial-gradient(circle, #ff7e5f, #feb47b);height: 100vh;}</style>
</head>
<body><!-- 线性渐变背景 --><div class="linear-gradient-bg"></div><!-- 径向渐变背景 --><div class="radial-gradient-bg"></div>
</body>
</html>

2. 创建圆角按钮

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Round Button</title><style>/* 创建圆角按钮的样式 */.round-button {background-color: #4CAF50; /* 按钮的背景颜色 */color: white; /* 按钮文本的颜色 */padding: 10px 20px; /* 内边距，控制按钮的大小 */border: none; /* 去掉按钮的边框 */border-radius: 25px; /* 圆角半径，控制按钮的圆角效果 */cursor: pointer; /* 鼠标悬停时显示指针 */}</style>
</head>
<body><!-- 一个圆角按钮 --><button class="round-button">Click Me</button>
</body>
</html>

3. 添加阴影效果

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Box and Text Shadow</title><style>/* 盒子阴影 */.box-shadow {width: 200px; /* 盒子的宽度 */height: 200px; /* 盒子的高度 */background-color: #fff; /* 盒子的背景颜色 */box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 阴影效果 */}/* 文本阴影 */.text-shadow {font-size: 24px; /* 文本大小 */color: #333; /* 文本颜色 */text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); /* 文本阴影效果 */}</style>
</head>
<body><!-- 盒子阴影效果 --><div class="box-shadow"></div><!-- 文本阴影效果 --><p class="text-shadow">Shadowed Text</p>
</body>
</html>

4. CSS3 过渡效果

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Transition Effect</title><style>/* 初始状态的样式 */.transition-effect {width: 200px; /* 元素宽度 */height: 200px; /* 元素高度 */background-color: #4CAF50; /* 元素的背景颜色 */transition: background-color 0.3s ease; /* 过渡效果，背景颜色在0.3秒内变换 */}/* 悬停时的样式 */.transition-effect:hover {background-color: #ff5722; /* 改变背景颜色 */}</style>
</head>
<body><!-- 一个带有过渡效果的元素 --><div class="transition-effect"></div>
</body>
</html>

5. CSS3 动画

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>CSS3 Animation</title><style>/* 定义一个名为 "slide" 的动画 */@keyframes slide {0% {transform: translateX(0); /* 动画开始时的位置 */}100% {transform: translateX(100px); /* 动画结束时的位置 */}}/* 应用动画效果的元素 */.animation {width: 100px; /* 元素宽度 */height: 100px; /* 元素高度 */background-color: #4CAF50; /* 元素的背景颜色 */animation: slide 2s infinite alternate; /* 动画设置为无限次播放，并在每次完成后反向播放 */}</style>
</head>
<body><!-- 一个带有动画效果的元素 --><div class="animation"></div>
</body>
</html>

6. 3D 旋转卡片

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>3D Rotating Card</title><style>/* 定义3D效果的容器 */.card-container {perspective: 1000px; /* 设置视距，控制3D效果的强度 */}/* 定义卡片的基本样式 */.card {width: 200px; /* 卡片宽度 */height: 300px; /* 卡片高度 */transform-style: preserve-3d; /* 使子元素保持3D效果 */transition: transform 0.6s; /* 旋转时的动画过渡效果 */}/* 悬停时，卡片旋转180度 */.card:hover {transform: rotateY(180deg); /* 绕Y轴旋转180度 */}/* 定义卡片的正面和背面样式 */.card-front, .card-back {position: absolute; /* 绝对定位 */width: 100%; /* 宽度填满卡片 */height: 100%; /* 高度填满卡片 */backface-visibility: hidden; /* 隐藏背面内容 */}/* 定义卡片背面旋转180度 */.card-back {transform: rotateY(180deg); /* 使背面倒置 */}</style>
</head>
<body><!-- 3D旋转卡片的容器 --><div class="card-container"><div class="card"><!-- 卡片的正面 --><div class="card-front">这是正面</div><!-- 卡片的背面 --><div class="card-back">这是反面</div></div></div>
</body>
</html>

7. 响应式导航栏

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Responsive Navbar</title><style>/* 导航栏的基本样式 */.navbar {display: flex; /* 使用 Flexbox 布局 */justify-content: space-between; /* 在子元素之间均匀分布空间 */background-color: #333; /* 设置导航栏背景颜色 */}/* 导航栏链接的样式 */.navbar a {color: white; /* 链接文本颜色 */padding: 14px 20px; /* 链接的内边距 */text-decoration: none; /* 去掉链接的下划线 */}/* 媒体查询：当屏幕宽度小于600px时，导航栏改为纵向布局 */@media (max-width: 600px) {.navbar {flex-direction: column; /* 导航栏纵向排列 */}}</style>
</head>
<body><!-- 导航栏容器 --><div class="navbar"><a href="#">首页</a><a href="#">关于</a><a href="#">联系我们</a><a href="#">产品</a></div>
</body>
</html>

8. 弹性盒模型 (Flexbox) 布局

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Flexbox Layout</title><style>/* Flexbox容器 */.flex-container {display: flex; /* 使用 Flexbox 布局 */justify-content: center; /* 水平方向居中对齐 */align-items: center; /* 垂直方向居中对齐 */height: 100vh; /* 使容器填满整个视窗高度 */}/* Flexbox子元素 */.flex-item {background-color: #4CAF50; /* 元素的背景颜色 */padding: 20px; /* 元素的内边距 */margin: 10px; /* 元素的外边距 */}</style>
</head>
<body><!-- Flexbox 容器，包含多个子元素 --><div class="flex-container"><div class="flex-item">Item 1</div><div class="flex-item">Item 2</div><div class="flex-item">Item 3</div></div>
</body>
</html>

9. 网格布局 (CSS Grid)

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Grid Layout</title><style>/* 网格容器 */.grid-container {display: grid; /* 使用 CSS Grid 布局 */grid-template-columns: 1fr 1fr 1fr; /* 定义三个等宽的列 */gap: 10px; /* 网格项之间的间隙 */}/* 网格项 */.grid-item {background-color: #4CAF50; /* 元素的背景颜色 */padding: 20px; /* 元素的内边距 */}</style>
</head>
<body><!-- Grid 容器，包含多个网格项 --><div class="grid-container"><div class="grid-item">Item 1</div><div class="grid-item">Item 2</div><div class="grid-item">Item 3</div></div>
</body>
</html>

10. 文本裁剪与溢出处理

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Text Overflow</title><style>/* 文本裁剪样式 */.text-ellipsis {width: 200px; /* 文本容器的宽度 */white-space: nowrap; /* 强制文本在一行显示 */overflow: hidden; /* 隐藏超出容器的文本 */text-overflow: ellipsis; /* 使用省略号表示溢出的文本 */}</style>
</head>
<body><!-- 应用了文本裁剪的段落 --><p class="text-ellipsis">This is a very long text that will be clipped with an ellipsis...</p>
</body>
</html>

11. CSS3 渐变边框

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Gradient Border</title><style>/* 渐变边框样式 */.gradient-border {border: 10px solid; /* 边框宽度 */border-image: linear-gradient(to right, #ff7e5f, #feb47b) 1; /* 渐变边框 */}</style>
</head>
<body><!-- 一个应用了渐变边框的元素 --><div class="gradient-border" style="padding: 20px;">Content inside the border</div>
</body>
</html>

12. 制作圆形头像

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Circular Avatar</title><style>/* 圆形头像样式 */.circular-avatar {width: 100px; /* 头像宽度 */height: 100px; /* 头像高度 */border-radius: 50%; /* 使头像圆形 */background-image: url('path_to_image.jpg'); /* 背景图片 */background-size: cover; /* 使图片覆盖整个容器 */}</style>
</head>
<body><!-- 一个圆形头像 --><div class="circular-avatar"></div>
</body>
</html>

13. CSS3 旋转与缩放

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Rotate and Scale</title><style>/* 初始状态的样式 */.rotate-scale {width: 100px; /* 元素宽度 */height: 100px; /* 元素高度 */background-color: #4CAF50; /* 元素的背景颜色 */transition: transform 0.3s ease; /* 过渡效果，旋转与缩放 */}/* 悬停时的样式 */.rotate-scale:hover {transform: rotate(45deg) scale(1.2); /* 旋转45度并缩放到1.2倍 */}</style>
</head>
<body><!-- 一个带有旋转与缩放效果的元素 --><div class="rotate-scale"></div>
</body>
</html>

14. 弹性图片库

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Flexbox Gallery</title><style>/* Flexbox 图片库容器 */.flex-gallery {display: flex; /* 使用 Flexbox 布局 */flex-wrap: wrap; /* 自动换行 */gap: 10px; /* 图片之间的间隙 */}/* 图片样式 */.flex-gallery img {width: 100%; /* 使图片宽度填满容器 */max-width: 200px; /* 图片的最大宽度 */}</style>
</head>
<body><!-- Flexbox 图片库 --><div class="flex-gallery"><img src="image1.jpg" alt="Image 1"><img src="image2.jpg" alt="Image 2"><img src="image3.jpg" alt="Image 3"></div>
</body>
</html>

15. 悬停效果的工具提示

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Tooltip Hover Effect</title><style>/* 工具提示容器 */.tooltip {position: relative; /* 使工具提示相对于其容器定位 */display: inline-block; /* 使元素成为行内块 */cursor: pointer; /* 鼠标悬停时显示指针 */}/* 工具提示内容样式 */.tooltip::after {content: "This is a tooltip"; /* 工具提示文本 */position: absolute; /* 绝对定位 */bottom: 100%; /* 工具提示显示在元素上方 */left: 50%; /* 水平居中对齐 */transform: translateX(-50%); /* 使工具提示水平居中 */background-color: #333; /* 工具提示背景颜色 */color: #fff; /* 工具提示文本颜色 */padding: 5px; /* 工具提示的内边距 */border-radius: 5px; /* 圆角效果 */opacity: 0; /* 初始状态透明 */visibility: hidden; /* 初始状态不可见 */transition: opacity 0.3s ease; /* 过渡效果，透明度 */}/* 鼠标悬停时显示工具提示 */.tooltip:hover::after {opacity: 1; /* 显示工具提示 */visibility: visible; /* 工具提示可见 */}</style>
</head>
<body><!-- 带有工具提示的元素 --><div class="tooltip">Hover over me</div>
</body>
</html>

16. CSS3 滤镜效果

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Filter Effect</title><style>/* 应用滤镜效果的元素 */.filter-effect {filter: grayscale(100%); /* 初始状态应用灰度滤镜 */transition: filter 0.3s ease; /* 过渡效果，滤镜 */}/* 悬停时移除滤镜 */.filter-effect:hover {filter: grayscale(0%); /* 恢复原始颜色 */}</style>
</head>
<body><!-- 一个带有滤镜效果的图片 --><img src="image.jpg" alt="Example Image" class="filter-effect">
</body>
</html>

17. 响应式表单设计

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Responsive Form</title><style>/* 表单容器 */.responsive-form {display: flex; /* 使用 Flexbox 布局 */flex-direction: column; /* 初始状态下纵向排列 */max-width: 400px; /* 表单的最大宽度 */margin: auto; /* 使表单居中对齐 */}/* 表单输入框 */.responsive-form input {margin-bottom: 10px; /* 输入框之间的间隙 */padding: 10px; /* 输入框的内边距 */}/* 屏幕宽度大于 600px 时调整布局 */@media (min-width: 600px) {.responsive-form {flex-direction: row; /* 横向排列表单项 */justify-content: space-between; /* 表单项之间的空间均匀分布 */}.responsive-form input {flex: 1; /* 输入框自动适应宽度 */margin-right: 10px; /* 输入框之间的间隙 */}}</style>
</head>
<body><!-- 一个响应式表单 --><form class="responsive-form"><input type="text" placeholder="First Name"><input type="text" placeholder="Last Name"></form>
</body>
</html>

18. 制作 CSS3 加载动画

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Loader Animation</title><style>/* 定义旋转动画 */@keyframes spin {0% { transform: rotate(0deg); }100% { transform: rotate(360deg); }}/* 加载动画样式 */.loader {border: 8px solid #f3f3f3; /* 外边框 */border-top: 8px solid #3498db; /* 顶部边框，颜色不同 */border-radius: 50%; /* 圆形边框 */width: 50px; /* 加载动画的宽度 */height: 50px; /* 加载动画的高度 */animation: spin 2s linear infinite; /* 应用旋转动画 */}</style>
</head>
<body><!-- 一个加载动画元素 --><div class="loader"></div>
</body>
</html>

19. 背景图像固定效果

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Fixed Background</title><style>/* 背景图像固定样式 */.fixed-background {background-image: url('path_to_image.jpg'); /* 背景图像 */background-attachment: fixed; /* 背景图像固定 */background-size: cover; /* 使背景图像覆盖整个容器 */height: 100vh; /* 设置容器高度为 100% 视口高度 */}</style>
</head>
<body><!-- 一个应用了固定背景图像的元素 --><div class="fixed-background"></div>
</body>
</html>

20. 响应式卡片布局

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Responsive Card Layout</title><style>/* 响应式卡片容器 */.grid-cards {display: grid; /* 使用 CSS Grid 布局 */grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* 自动调整列数 */gap: 20px; /* 卡片之间的间隙 */}/* 卡片样式 */.card {background-color: #4CAF50; /* 卡片的背景颜色 */padding: 20px; /* 卡片的内边距 */}</style>
</head>
<body><!-- 一个响应式卡片布局 --><div class="grid-cards"><div class="card">Card 1</div><div class="card">Card 2</div><div class="card">Card 3</div></div>
</body>
</html>

二十个案例入门CSS3

知识点总结：

1. 基础样式与选择器

2. CSS 盒模型

3. 定位与布局

4. 响应式设计

5. CSS3 视觉效果

6. CSS3 动画

7. 伪类与伪元素

8. 文本处理

9. 工具提示 (Tooltip)

10. CSS3 图像处理

11. 表单与输入

12. 加载动画

13. 图像库与卡片布局

案例：

1. 制作渐变背景

2. 创建圆角按钮

3. 添加阴影效果

4. CSS3 过渡效果

5. CSS3 动画

6. 3D 旋转卡片

7. 响应式导航栏

8. 弹性盒模型 (Flexbox) 布局

9. 网格布局 (CSS Grid)

10. 文本裁剪与溢出处理

11. CSS3 渐变边框

12. 制作圆形头像

13. CSS3 旋转与缩放

14. 弹性图片库

15. 悬停效果的工具提示

16. CSS3 滤镜效果

17. 响应式表单设计

18. 制作 CSS3 加载动画

19. 背景图像固定效果

20. 响应式卡片布局

相关资讯

热文排行

最新新闻

推荐新闻

热搜词