二十个案例入门CSS3

2024-08-27 23:28
文章标签 入门 案例 frontend css3 二十个

本文主要是介绍二十个案例入门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的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1113079。

相关文章

Vue3 的 shallowRef 和 shallowReactive：优化性能

Vue3 的 shallowRef 和 shallowReactive：优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉，那么对 shallowRef 和 shallowReactive 是否了解呢？ 在编程和数据结构中，“shallow”（浅层）通常指对数据结构的最外层进行操作，而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素，而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层（Shallow） 定义
阅读更多...
Spring Security 从入门到进阶系列教程

Spring Security 从入门到进阶系列教程

Spring Security 入门系列 《保护 Web 应用的安全》 《Spring-Security-入门（一）：登录与退出》 《Spring-Security-入门（二）：基于数据库验证》 《Spring-Security-入门（三）：密码加密》 《Spring-Security-入门（四）：自定义-Filter》 《Spring-Security-入门（五）：在 Sprin
阅读更多...
这15个Vue指令，让你的项目开发爽到爆

这15个Vue指令，让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件，按住 Control 和回车键再显示它吗？小菜一碟： <template
阅读更多...
【 html+css 绚丽Loading 】000046 三才归元阵

【 html+css 绚丽Loading 】000046 三才归元阵

前言：哈喽，大家好，今天给大家分享html+css 绚丽Loading！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到大家或者给大家一些灵感和启发，欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介：💡2.外观描述：💡3.使用方式：💡4.战斗方式：💡5.提升：💡6.传说： 📚三、源代码，上代码，可以直接复制使用🎥效果🗂️目录✍️
阅读更多...
Hadoop企业开发案例调优场景

Hadoop企业开发案例调优场景

需求 （1）需求：从1G数据中，统计每个单词出现次数。服务器3台，每台配置4G内存，4核CPU，4线程。 （2）需求分析： 1G / 128m = 8个MapTask；1个ReduceTask；1个mrAppMaster 平均每个节点运行10个 / 3台 ≈ 3个任务（4    3    3） HDFS参数调优 （1）修改：hadoop-env.sh export HDFS_NAMENOD
阅读更多...
【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【课程链接】 AntV G6：深入图形与图形分组、自定义节点、节点动画（下）_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中，应该怎样去计算和绘制图形，如何给一个图形制作不间断的动画，以及在鼠标事件之后产生动画。（有点难，需要好好理解） <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06
阅读更多...
性能分析之MySQL索引实战案例

性能分析之MySQL索引实战案例

文章目录 一、前言二、准备三、MySQL索引优化四、MySQL 索引知识回顾五、总结 一、前言 在上一讲性能工具之 JProfiler 简单登录案例分析实战中已经发现SQL没有建立索引问题，本文将一起从代码层去分析为什么没有建立索引？ 开源ERP项目地址：https://gitee.com/jishenghua/JSH_ERP 二、准备 打开IDEA找到登录请求资源路径位置
阅读更多...
深入探索协同过滤：从原理到推荐模块案例

深入探索协同过滤：从原理到推荐模块案例

文章目录 前言一、协同过滤1. 基于用户的协同过滤（UserCF）2. 基于物品的协同过滤（ItemCF）3. 相似度计算方法 二、相似度计算方法1. 欧氏距离2. 皮尔逊相关系数3. 杰卡德相似系数4. 余弦相似度 三、推荐模块案例1.基于文章的协同过滤推荐功能2.基于用户的协同过滤推荐功能 前言     在信息过载的时代，推荐系统成为连接用户与内容的桥梁。本文聚焦于
阅读更多...
【区块链 + 人才服务】可信教育区块链治理系统 | FISCO BCOS应用案例

【区块链 + 人才服务】可信教育区块链治理系统 | FISCO BCOS应用案例

伴随着区块链技术的不断完善，其在教育信息化中的应用也在持续发展。利用区块链数据共识、不可篡改的特性， 将与教育相关的数据要素在区块链上进行存证确权，在确保数据可信的前提下，促进教育的公平、透明、开放，为教育教学质量提升赋能，实现教育数据的安全共享、高等教育体系的智慧治理。 可信教育区块链治理系统的顶层治理架构由教育部、高校、企业、学生等多方角色共同参与建设、维护，支撑教育资源共享、教学质量评估、
阅读更多...
数论入门整理（updating）

数论入门整理（updating）

一、gcd lcm 基础中的基础，一般用来处理计算第一步什么的，分数化简之类。 LL gcd(LL a, LL b) { return b ? gcd(b, a % b) : a; } <pre name="code" class="cpp">LL lcm(LL a, LL b){LL c = gcd(a, b);return a / c * b;} 例题：
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2