菜单 搜索
首页 前端知识 二十个案例入门CSS3

二十个案例入门CSS3

2024-09-01 00:09:48 前端知识 前端哥 751 312 我要收藏

知识点总结：

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>
转载请注明出处或者链接地址：https://www.qianduange.cn//article/17315.html
标签
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

C#解析JSON的常用库--Newtonsoft.Json

2024-11-30 11:11:42

jsonfield 项目常见问题解决方案

2024-11-30 11:11:42

【SpringMVC】_SpringMVC项目返回HTML与JSON

2024-11-30 11:11:41

BugJson因为json格式问题OOM怎么办

2024-11-30 11:11:41

python 解读JSON文件，一文搞懂！

2024-11-30 11:11:40

Redisson同时使用jackson、fastjson、kryo、protostuff序列化（含效率对比）

2024-11-30 11:11:40

开源项目“Pretty JSON”安装与配置完全指南

2024-11-30 11:11:39

2024年前端最新Nodejs基础之包管理工具npm(二)(2)，微软面试题及答案

2024-11-30 11:11:39

解决全局安装pnpm后无法使用的问题

2024-11-30 11:11:39

安装Nodejs后，npm无法使用

2024-11-30 11:11:38

大家推荐的文章
1

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001
2

CSS常用属性（文本属性）

2024-11-04 09:11:111000
3

TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000
4

CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000
5

vue使用datav echarts

2024-09-06 00:09:381000
6

使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000
7

使用CDN提高jQuery加载速度

2024-08-24 23:08:211000
8

小兔鲜儿网页首页制作 黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000
9

《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000
10

npm的使用

2024-08-18 00:08:131000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！