CSS3学习教程，从入门到醒目，CSS3 定位布局页面知识点及案例代码（18） ...

干翻全岛蛙蛙  论坛元老 | 2025-3-26 14:43:40 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 1509|帖子 1509|积分 4527

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要 登录 才可以下载或查看，没有账号？立即注册

x
CSS3 定位布局页面知识点及案例代码

一、平凡流（Normal Flow）

知识点

平凡流是 CSS 中最根本的布局方式，元素按照其在 HTML 文档中出现的次序依次排列。块级元素独占一行，内联元素则在同一行排列。
案例代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>普通流布局</title>
  7.     <style>
  8.         .block-element {
  9.             /* 块级元素默认独占一行 */
  10.             background-color: lightblue;
  11.             margin: 10px 0;
  12.             padding: 10px;
  13.         }
  14.         
  15.         .inline-element {
  16.             /* 内联元素默认在同一行排列 */
  17.             background-color: lightgreen;
  18.             margin: 0 10px;
  19.             padding: 10px;
  20.         }
  21.     </style>
  22. </head>
  23. <body>
  24.     <div class="block-element">块级元素1</div>
  25.     <div class="block-element">块级元素2</div>
  26.    
  27.     <span class="inline-element">内联元素1</span>
  28.     <span class="inline-element">内联元素2</span>
  29. </body>
  30. </html>
复制代码
二、浮动（Float）

知识点

浮动布局通过 float 属性使元素脱离平凡流，向左或向右移动，直到碰到包罗块的边框或其他浮动元素。常用于多列布局。


  • float: left;：元素向左浮动。
  • float: right;：元素向右浮动。
  • clear 属性用于控制元素两侧是否允许浮动元素。
案例代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>浮动布局</title>
  7.     <style>
  8.         .container {
  9.             border: 1px solid #ccc;
  10.             padding: 10px;
  11.             overflow: hidden; /* 清除浮动 */
  12.         }
  13.         
  14.         .float-left {
  15.             float: left;
  16.             width: 200px;
  17.             background-color: lightblue;
  18.             padding: 10px;
  19.             margin-right: 10px;
  20.         }
  21.         
  22.         .float-right {
  23.             float: right;
  24.             width: 200px;
  25.             background-color: lightgreen;
  26.             padding: 10px;
  27.             margin-left: 10px;
  28.         }
  29.         
  30.         .content {
  31.             background-color: lightyellow;
  32.             padding: 10px;
  33.             margin: 0 210px;
  34.         }
  35.         
  36.         .clear-both {
  37.             clear: both; /* 清除左右两侧的浮动 */
  38.             margin-top: 20px;
  39.         }
  40.     </style>
  41. </head>
  42. <body>
  43.     <div class="container">
  44.         <div class="float-left">左侧边栏</div>
  45.         <div class="float-right">右侧边栏</div>
  46.         <div class="content">主要内容区域</div>
  47.         <div class="clear-both">清除浮动后的元素</div>
  48.     </div>
  49. </body>
  50. </html>
复制代码
三、定位（Positioning）

知识点

定位布局通过 position 属性改变元素的位置。有以下几种定位方式：


  • 相对定位（Relative）：position: relative;，元素相对于其正常位置举行偏移，偏移量由 top、right、bottom、left 属性指定。
  • 绝对定位（Absolute）：position: absolute;，元素相对于最近的已定位祖先元素举行定位，若没有则相对于初始包罗块（viewport）。
  • 固定定位（Fixed）：position: fixed;，元素相对于浏览器窗口举行定位，不随滚动条滚动。
  • 粘性定位（Sticky）：position: sticky;，元素在滚动到特定位置时，会像固定定位一样固定在某个位置。
案例代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>定位布局</title>
  7.     <style>
  8.         .relative-box {
  9.             position: relative;
  10.             width: 300px;
  11.             height: 200px;
  12.             background-color: lightblue;
  13.             margin: 20px;
  14.         }
  15.         
  16.         .absolute-box {
  17.             position: absolute;
  18.             top: 50px;
  19.             right: 50px;
  20.             width: 100px;
  21.             height: 100px;
  22.             background-color: lightgreen;
  23.         }
  24.         
  25.         .fixed-box {
  26.             position: fixed;
  27.             bottom: 20px;
  28.             left: 20px;
  29.             padding: 10px;
  30.             background-color: rgba(255, 255, 0, 0.7);
  31.             border: 1px solid #ccc;
  32.         }
  33.         
  34.         .sticky-box {
  35.             position: sticky;
  36.             top: 10px;
  37.             background-color: lightyellow;
  38.             padding: 10px;
  39.             margin: 10px 0;
  40.         }
  41.     </style>
  42. </head>
  43. <body>
  44.     <div class="relative-box">
  45.         <div class="absolute-box"></div>
  46.     </div>
  47.    
  48.     <div style="height: 1500px; border: 1px dashed #ccc;">
  49.         <div class="sticky-box">粘性定位元素</div>
  50.         <p>滚动页面查看固定定位和粘性定位效果</p>
  51.     </div>
  52.    
  53.     <div class="fixed-box">固定定位元素</div>
  54. </body>
  55. </html>
复制代码
四、弹性布局（Flexbox）

知识点

弹性布局通过 display: flex; 或 display: inline-flex; 将容器变为弹性容器，子元素主动成为弹性项目。弹性布局可以轻松实现各种复杂的布局。


  • 主轴（Main Axis）：由 flex-direction 属性决定，默以为水平方向（row）。
  • 交叉轴（Cross Axis）：与主轴垂直的方向。
  • 常用属性：

    • 容器属性：

      • flex-direction：决定主轴方向（row、row-reverse、column、column-reverse）。
      • justify-content：定义主轴上项目标对齐方式（flex-start、flex-end、center、space-between、space-around、space-evenly）。
      • align-items：定义交叉轴上项目标对齐方式（stretch、flex-start、flex-end、center、baseline）。
      • align-content：多行时，定义交叉轴上行之间的对齐方式（stretch、flex-start、flex-end、center、space-between、space-around）。

    • 项目属性：

      • order：定义项目标排列次序，数值越小越靠前。
      • flex-grow：定义项目标放大比例，默以为 0，即如果容器有剩余空间，项目不放大。
      • flex-shrink：定义项目标缩小比例，默以为 1，即如果容器空间不足，项目会缩小。
      • flex-basis：定义项目在主轴上的初始长度。
      • align-self：允许单个项目覆盖容器的 align-items 设置。


案例代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>弹性布局</title>
  7.     <style>
  8.         .flex-container {
  9.             display: flex;
  10.             /* 主轴方向为水平 */
  11.             flex-direction: row;
  12.             /* 主轴对齐方式为居中 */
  13.             justify-content: center;
  14.             /* 交叉轴对齐方式为居中 */
  15.             align-items: center;
  16.             height: 200px;
  17.             border: 1px solid #ccc;
  18.             margin-bottom: 20px;
  19.         }
  20.         
  21.         .flex-item {
  22.             width: 100px;
  23.             height: 100px;
  24.             background-color: lightblue;
  25.             margin: 0 10px;
  26.         }
  27.         
  28.         .flex-container-column {
  29.             display: flex;
  30.             flex-direction: column;
  31.             justify-content: center;
  32.             align-items: center;
  33.             height: 400px;
  34.             border: 1px solid #ccc;
  35.             margin-bottom: 20px;
  36.         }
  37.         
  38.         .flex-container-wrap {
  39.             display: flex;
  40.             flex-wrap: wrap;
  41.             justify-content: space-around;
  42.             height: 200px;
  43.             border: 1px solid #ccc;
  44.         }
  45.         
  46.         .flex-item-small {
  47.             width: 80px;
  48.             height: 80px;
  49.             background-color: lightgreen;
  50.             margin: 5px;
  51.         }
  52.         
  53.         .flex-grow-item {
  54.             flex-grow: 1;
  55.             background-color: lightcoral;
  56.         }
  57.     </style>
  58. </head>
  59. <body>
  60.     <h2>基本弹性布局</h2>
  61.     <div class="flex-container">
  62.         <div class="flex-item"></div>
  63.         <div class="flex-item"></div>
  64.         <div class="flex-item"></div>
  65.     </div>
  66.    
  67.     <h2>垂直弹性布局</h2>
  68.     <div class="flex-container-column">
  69.         <div class="flex-item"></div>
  70.         <div class="flex-item"></div>
  71.         <div class="flex-item"></div>
  72.     </div>
  73.    
  74.     <h2>换行弹性布局</h2>
  75.     <div class="flex-container-wrap">
  76.         <div class="flex-item-small"></div>
  77.         <div class="flex-item-small"></div>
  78.         <div class="flex-item-small"></div>
  79.         <div class="flex-item-small"></div>
  80.         <div class="flex-item-small"></div>
  81.         <div class="flex-item-small"></div>
  82.         <div class="flex-item-small"></div>
  83.         <div class="flex-item-small"></div>
  84.         <div class="flex-item-small"></div>
  85.     </div>
  86.    
  87.     <h2>弹性项目增长</h2>
  88.     <div class="flex-container">
  89.         <div class="flex-item flex-grow-item"></div>
  90.         <div class="flex-item"></div>
  91.     </div>
  92. </body>
  93. </html>
复制代码
五、网格布局（Grid）

知识点

网格布局通过 display: grid; 或 display: inline-grid; 将容器变为网格容器，子元素主动成为网格项目。网格布局可以轻松创建复杂的二维布局。


  • 网格线：网格由水平和垂直的网格线构成，形成网格单元格。
  • 常用属性：

    • 容器属性：

      • grid-template-columns：定义列的宽度。
      • grid-template-rows：定义行的高度。
      • grid-gap 或 gap：定义网格单元格之间的间隔。
      • grid-template-areas：定义网格区域，用于布局模板。

    • 项目属性：

      • grid-column：定义项目占据的列。
      • grid-row：定义项目占据的行。
      • grid-area：定义项目所在的网格区域。


案例代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>网格布局</title>
  7.     <style>
  8.         .grid-container {
  9.             display: grid;
  10.             grid-template-columns: 100px 100px 100px;
  11.             grid-template-rows: 100px 100px;
  12.             gap: 10px;
  13.             border: 1px solid #ccc;
  14.             margin-bottom: 20px;
  15.         }
  16.         
  17.         .grid-item {
  18.             background-color: lightblue;
  19.             display: flex;
  20.             justify-content: center;
  21.             align-items: center;
  22.         }
  23.         
  24.         .grid-container-areas {
  25.             display: grid;
  26.             grid-template-columns: 100px 100px 100px;
  27.             grid-template-rows: 100px 100px 100px;
  28.             gap: 10px;
  29.             border: 1px solid #ccc;
  30.         }
  31.         
  32.         .header {
  33.             grid-area: header;
  34.             background-color: lightcoral;
  35.         }
  36.         
  37.         .sidebar {
  38.             grid-area: sidebar;
  39.             background-color: lightgreen;
  40.         }
  41.         
  42.         .main {
  43.             grid-area: main;
  44.             background-color: lightyellow;
  45.         }
  46.         
  47.         .footer {
  48.             grid-area: footer;
  49.             background-color: lightblue;
  50.         }
  51.     </style>
  52. </head>
  53. <body>
  54.     <h2>基本网格布局</h2>
  55.     <div class="grid-container">
  56.         <div class="grid-item">1</div>
  57.         <div class="grid-item">2</div>
  58.         <div class="grid-item">3</div>
  59.         <div class="grid-item">4</div>
  60.         <div class="grid-item">5</div>
  61.         <div class="grid-item">6</div>
  62.     </div>
  63.    
  64.     <h2>网格布局模板区域</h2>
  65.     <div class="grid-container-areas">
  66.         <div class="header">Header</div>
  67.         <div class="sidebar">Sidebar</div>
  68.         <div class="main">Main</div>
  69.         <div class="footer">Footer</div>
  70.     </div>
  71. </body>
  72. </html>
复制代码
六、综合案例

知识点

综合运用以上各种布局方式，实现一个复杂的页面布局。
案例代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>综合布局案例</title>
  7.     <style>
  8.         /* 导航栏样式 */
  9.         .navbar {
  10.             background-color: #333;
  11.             padding: 10px;
  12.             display: flex;
  13.             justify-content: space-between;
  14.             align-items: center;
  15.             color: white;
  16.         }
  17.         
  18.         .nav-links {
  19.             display: flex;
  20.             list-style: none;
  21.         }
  22.         
  23.         .nav-links li {
  24.             margin-left: 20px;
  25.         }
  26.         
  27.         .nav-links a {
  28.             color: white;
  29.             text-decoration: none;
  30.         }
  31.         
  32.         /* 主要内容区域 */
  33.         .main-content {
  34.             display: grid;
  35.             grid-template-columns: 200px 1fr;
  36.             gap: 20px;
  37.             padding: 20px;
  38.         }
  39.         
  40.         .sidebar {
  41.             background-color: #f4f4f4;
  42.             padding: 15px;
  43.             border-radius: 5px;
  44.         }
  45.         
  46.         .content-area {
  47.             display: flex;
  48.             flex-direction: column;
  49.             gap: 20px;
  50.         }
  51.         
  52.         .article {
  53.             background-color: white;
  54.             padding: 20px;
  55.             border-radius: 5px;
  56.             box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  57.         }
  58.         
  59.         /* 图片展示区域 */
  60.         .image-gallery {
  61.             display: grid;
  62.             grid-template-columns: repeat(3, 1fr);
  63.             gap: 15px;
  64.             margin-top: 30px;
  65.         }
  66.         
  67.         .gallery-item {
  68.             position: relative;
  69.             overflow: hidden;
  70.             border-radius: 5px;
  71.         }
  72.         
  73.         .gallery-item img {
  74.             width: 100%;
  75.             height: 200px;
  76.             object-fit: cover;
  77.             transition: transform 0.3s ease;
  78.         }
  79.         
  80.         .gallery-item img:hover {
  81.             transform: scale(1.05);
  82.         }
  83.         
  84.         .gallery-item span {
  85.             position: absolute;
  86.             bottom: 0;
  87.             left: 0;
  88.             right: 0;
  89.             background-color: rgba(0,0,0,0.7);
  90.             color: white;
  91.             padding: 10px;
  92.             text-align: center;
  93.         }
  94.         
  95.         /* 页脚样式 */
  96.         .footer {
  97.             background-color: #333;
  98.             color: white;
  99.             text-align: center;
  100.             padding: 20px;
  101.             margin-top: 30px;
  102.         }
  103.     </style>
  104. </head>
  105. <body>
  106.     <!-- 导航栏 -->
  107.     <nav class="navbar">
  108.         <div class="logo">网站名称</div>
  109.         <ul class="nav-links">
  110.             <li><a href="#">首页</a></li>
  111.             <li><a href="#">文章</a></li>
  112.             <li><a href="#">关于</a></li>
  113.             <li><a href="#">联系</a></li>
  114.         </ul>
  115.     </nav>
  116.    
  117.     <!-- 主要内容区域 -->
  118.     <div class="main-content">
  119.         <!-- 侧边栏 -->
  120.         <div class="sidebar">
  121.             <h3>热门文章</h3>
  122.             <ul>
  123.                 <li>文章标题1</li>
  124.                 <li>文章标题2</li>
  125.                 <li>文章标题3</li>
  126.                 <li>文章标题4</li>
  127.             </ul>
  128.             
  129.             <h3>分类</h3>
  130.             <ul>
  131.                 <li>分类1</li>
  132.                 <li>分类2</li>
  133.                 <li>分类3</li>
  134.             </ul>
  135.         </div>
  136.         
  137.         <!-- 内容区域 -->
  138.         <div class="content-area">
  139.             <div class="article">
  140.                 <h2>文章标题</h2>
  141.                 <p>发表日期: 2023-06-01</p>
  142.                 <p>文章内容...</p>
  143.             </div>
  144.             
  145.             <div class="article">
  146.                 <h2>另一篇文章</h2>
  147.                 <p>发表日期: 2023-05-25</p>
  148.                 <p>另一篇文章内容...</p>
  149.             </div>
  150.             
  151.             <!-- 图片展示区域 -->
  152.             <div class="image-gallery">
  153.                 <div class="gallery-item">
  154.                     <img src="https://via.placeholder.com/300x200" alt="图片1">
  155.                     <span>图片标题1</span>
  156.                 </div>
  157.                 <div class="gallery-item">
  158.                     <img src="https://via.placeholder.com/300x200" alt="图片2">
  159.                     <span>图片标题2</span>
  160.                 </div>
  161.                 <div class="gallery-item">
  162.                     <img src="https://via.placeholder.com/300x200" alt="图片3">
  163.                     <span>图片标题3</span>
  164.                 </div>
  165.                 <div class="gallery-item">
  166.                     <img src="https://via.placeholder.com/300x200" alt="图片4">
  167.                     <span>图片标题4</span>
  168.                 </div>
  169.                 <div class="gallery-item">
  170.                     <img src="https://via.placeholder.com/300x200" alt="图片5">
  171.                     <span>图片标题5</span>
  172.                 </div>
  173.                 <div class="gallery-item">
  174.                     <img src="https://via.placeholder.com/300x200" alt="图片6">
  175.                     <span>图片标题6</span>
  176.                 </div>
  177.             </div>
  178.         </div>
  179.     </div>
  180.    
  181.     <!-- 页脚 -->
  182.     <footer class="footer">
  183.         <p>&copy; 2023 网站名称. 保留所有权利.</p>
  184.     </footer>
  185. </body>
  186. </html>
复制代码
以上内容涵盖了 CSS3 定位布局的重要知识点及案例代码，包括平凡流、浮动、定位、弹性布局和网格布局等。
以下是一些开发中常用的CSS3实际案例，涵盖了多种应用场景，帮助你更好地明白和应用CSS3：
导航菜单动画



  • 下拉菜单动画：当鼠标悬停在导航栏的菜单项上时，下拉菜单以淡入和向下滑动的动画效果表现，为用户提供清晰的视觉反馈，增强交互性。
  1. nav ul ul {
  2.   opacity: 0;
  3.   visibility: hidden;
  4.   transform: translateY(-20px);
  5.   transition: all 0.3s ease;
  6. }
  8. nav ul li:hover > ul {
  9.   opacity: 1;
  10.   visibility: visible;
  11.   transform: translateY(0);
  12. }
复制代码


  • 侧边栏菜单动画：点击汉堡菜单图标时，侧边栏菜单以从左到右的滑动动画睁开，同时菜单中的各项以淡入动画逐个表现，使页面的交互更加生动有趣。
  1. .sidebar {
  2.   width: 0;
  3.   overflow: hidden;
  4.   transition: width 0.3s ease;
  5. }
  7. .sidebar.open {
  8.   width: 200px;
  9. }
  11. .sidebar ul li {
  12.   opacity: 0;
  13.   transform: translateX(-20px);
  14.   transition: all 0.3s ease 0.1s;
  15. }
  17. .sidebar.open ul li {
  18.   opacity: 1;
  19.   transform: translateX(0);
  20. }
复制代码
图片展示与切换动画



  • 图片轮播动画：在图片轮播中，通过CSS3动画实现图片的平滑切换效果。比方，当前图片以淡出动画渐渐消失，同时下一张图片以淡入动画渐渐表现，给用户带来流通的视觉体验。
  1. .slider img {
  2.   position: absolute;
  3.   top: 0;
  4.   left: 0;
  5.   opacity: 0;
  6.   transition: opacity 1s ease;
  7. }
  9. .slider img.active {
  10.   opacity: 1;
  11. }
复制代码


  • 图片放大查看动画：当用户点击图片时，图片以放大和淡入的动画效果展示细节，同时配景添加一层半透明的遮罩层，营造出聚焦的效果，让用户更加专注于图片内容。
  1. .image-popup {
  2.   position: fixed;
  3.   top: 50%;
  4.   left: 50%;
  5.   transform: translate(-50%, -50%) scale(0);
  6.   opacity: 0;
  7.   transition: all 0.3s ease;
  8.   z-index: 999;
  9. }
  11. .image-popup.show {
  12.   transform: translate(-50%, -50%) scale(1);
  13.   opacity: 1;
  14. }
  16. .image-popup::before {
  17.   content: "";
  18.   position: fixed;
  19.   top: 0;
  20.   left: 0;
  21.   width: 100%;
  22.   height: 100%;
  23.   background-color: rgba(0, 0, 0, 0.5);
  24.   opacity: 0;
  25.   transition: opacity 0.3s ease;
  26.   z-index: -1;
  27. }
  29. .image-popup.show::before {
  30.   opacity: 1;
  31. }
复制代码
按钮交互动画



  • 点击按钮动画：按钮在被点击时，通过改变配景颜色、添加阴影或缩放等动画效果，给予用户即时的视觉反馈，让用户明确操纵已经被接收。
  1. button {
  2.   background-color: #3498db;
  3.   color: white;
  4.   padding: 10px 20px;
  5.   border: none;
  6.   border-radius: 5px;
  7.   transition: all 0.3s ease;
  8. }
  10. button:hover {
  11.   background-color: #2980b9;
  12.   transform: scale(1.1);
  13. }
  15. button:active {
  16.   background-color: #1f618d;
  17.   transform: scale(0.9);
  18. }
复制代码


  • 加载按钮动画：当按钮触发一个需要等待的操纵时，如提交表单，按钮可以表现一个加载动画，如旋转的图标或进度条，同时按钮变为不可点击状态，让用户知道操纵正在举行中。
  1. .loading-button {
  2.   position: relative;
  3. }
  5. .loading-button::after {
  6.   content: "";
  7.   position: absolute;
  8.   top: 50%;
  9.   left: 50%;
  10.   width: 20px;
  11.   height: 20px;
  12.   border-radius: 50%;
  13.   border: 2px solid white;
  14.   border-top-color: transparent;
  15.   animation: loading 1s linear infinite;
  16.   transform: translate(-50%, -50%);
  17.   z-index: -1;
  18. }
  20. @keyframes loading {
  21.   from {
  22.     transform: translate(-50%, -50%) rotate(0deg);
  23.   }
  24.   to {
  25.     transform: translate(-50%, -50%) rotate(360deg);
  26.   }
  27. }
复制代码
文本动画



  • 文字闪烁动画：通过改变文字的透明度或颜色，实现文字的闪烁效果，可用于突出表现重要信息或吸引用户的留意力。
  1. .blinking-text {
  2.   animation: blink 1s infinite;
  3. }
  5. @keyframes blink {
  6.   0% {
  7.     opacity: 1;
  8.   }
  9.   50% {
  10.     opacity: 0;
  11.   }
  12.   100% {
  13.     opacity: 1;
  14.   }
  15. }
复制代码


  • 文字滚动动画：使一段文字在水平或垂直方向上滚动表现，可用于展示通知、公告等内容，增长信息的展示效果。
  1. .scroll-text {
  2.   white-space: nowrap;
  3.   overflow: hidden;
  4.   animation: scroll 5s linear infinite;
  5. }
  7. @keyframes scroll {
  8.   0% {
  9.     transform: translateX(100%);
  10.   }
  11.   100% {
  12.     transform: translateX(-100%);
  13.   }
  14. }
复制代码
页面过渡动画



  • 页面切换动画：在单页面应用中，当用户切换页面时，通过动画实现页面的淡入淡出、滑动或缩放等过渡效果，使页面切换更加自然流通，提升用户体验。
  1. .page {
  2.   position: absolute;
  3.   top: 0;
  4.   left: 0;
  5.   width: 100%;
  6.   height: 100%;
  7.   opacity: 0;
  8.   transition: all 0.5s ease;
  9. }
  11. .page.active {
  12.   opacity: 1;
  13. }
  15. .page-enter {
  16.   transform: translateX(100%);
  17. }
  19. .page-enter-active {
  20.   transform: translateX(0);
  21.   transition: all 0.5s ease;
  22. }
  24. .page-leave {
  25.   transform: translateX(0);
  26. }
  28. .page-leave-active {
  29.   transform: translateX(-100%);
  30.   transition: all 0.5s ease;
  31. }
复制代码


  • 模态框动画：模态框在表现和隐藏时，通过淡入淡出和缩放等动画效果，使其更加平滑地出现和消失，制止了生硬的表现效果，提升了页面的整体美感。
  1. .modal {
  2.   position: fixed;
  3.   top: 50%;
  4.   left: 50%;
  5.   transform: translate(-50%, -50%) scale(0);
  6.   opacity: 0;
  7.   transition: all 0.3s ease;
  8.   z-index: 9999;
  9.   background-color: white;
  10.   border-radius: 5px;
  11.   padding: 20px;
  12. }
  14. .modal.show {
  15.   transform: translate(-50%, -50%) scale(1);
  16.   opacity: 1;
  17. }
复制代码
以上案例展示了CSS3在实际开发中的一些常见应用，通过这些案例，你可以更好地明白CSS3的强盛功能和灵活性，为你的项目增添更多的视觉效果和交互体验。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

干翻全岛蛙蛙

论坛元老
这个人很懒什么都没写!

楼主热帖

标签云

AI 运维 CIO 存储 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表