css进阶

目录

     1、css布局与定位 

                   ----布局定位相关介绍

                   ----案例与解析

       2、 css动画

                   ----基本概念

                   ----案例与解析

       3、 活学活用

                     css进阶玩法-----动态太极图

1、css布局与定位

  ----相关介绍：

      当使用 HTML 和 CSS 进行布局定位时，可以使用多种技术和属性来控制元素在页面中的位置和排列。以下是一些常用的布局定位技术和相关属性的介绍：

      1. 盒模型（Box Model）：每个 HTML 元素都被视为一个矩形的盒子，由内容区域（content）、内边距（padding）、边框（border）和外边距（margin）组成。调整这些属性可以控制盒子在页面中的大小和间距。

     2. 定位方式（Positioning）：使用`position`属性来定义元素的定位方式。常用的取值包括：
   - `static`（默认）：元素在文档流中正常定位。
   - `relative`：相对于元素在文档流中的初始位置进行定位，可以使用`top`、`right`、`bottom`和`left`属性来调整位置。
   - `absolute`：相对于最近的已定位父级元素进行定位，如果没有已定位的父级元素，则相对于整个页面进行定位。
   - `fixed`：相对于视口（浏览器窗口）进行定位，元素将固定在页面上的指定位置，不随页面滚动而变化。
   - `sticky`：当页面滚动到指定位置时，元素将固定在页面上的指定位置，但仍然遵循正常的文档流。

      3. 浮动（Float）：使用`float`属性来控制元素在页面中的左右浮动。浮动的元素将脱离文档流，其他元素会围绕其周围进行排列。常用的取值包括：
   - `left`：元素向左浮动。
   - `right`：元素向右浮动。
   - `none`（默认）：元素不浮动。

----案例与解析：

 

        这是一个使用HTML和CSS实现的布局定位的示例代码。该代码中包含一个父级容器（class为"fu"的div元素），以及三个子级容器（class为"z1"、"z2"和"z3"的div元素）。以下是每个容器的样式设置：

• .fu：父级容器的宽度和高度都为300像素，并设置为相对定位（position: relative）。
• .z1：子级容器的宽度和高度都为300像素，左边缘与父级容器左边缘向右偏移200像素，上边缘与父级容器上边缘向下偏移300像素。背景颜色为红色，并且边框为圆角（border-radius）。
• .z2：子级容器的宽度和高度都为300像素，上边缘与父级容器上边缘向下偏移200像素，左边缘与父级容器左边缘向右偏移300像素。背景颜色为红色，并且通过transform属性实现了45度旋转。
• .z3：子级容器的宽度和高度都为300像素，上边缘与父级容器上边缘向下偏移300像素，左边缘与父级容器左边缘向右偏移400像素。背景颜色为红色，并且边框为圆角。

2、css动画

  ----基本概念与属性：

    CSS动画提供了一种使用CSS属性和关键帧来创建动画效果的方式。下面是一些常用的CSS动画属性和技术：

    1. `@keyframes` 关键帧规则：`@keyframes`规则定义了一个动画序列。它允许你定义在不同时间点上的样式变化。一个动画可以定义多个关键帧，每个关键帧表示动画的一个特定状态。

     2. `animation` 属性：`animation`属性用于将关键帧动画应用到元素上。它包括一系列子属性，如`animation-name`（指定关键帧规则的名称）、`animation-duration`（指定动画持续时间）、`animation-delay`（指定动画延迟时间）等。

这两种是CSS动画的一些基本概念和属性。通过调整这些属性的值以及结合其他CSS属性和JavaScript的交互特性，可以实现各种炫目的动画效果。详细的使用方法和示例可以在CSS动画相关的文档和教程中找到。

 

  ----案例与解析：  

- 在`<style>`标签中定义了一些CSS样式规则。
  - `.f`类规则定义了一个父级容器，设置了宽度600像素、高度600像素和一个紫色边框。
  - `.z`类规则定义了子级容器，设置了宽度100像素、高度100像素、绿色背景、绝对定位属性和`animation`属性。

- `@keyframes move1`关键帧规则定义了名为`move1`的动画序列。这个动画序列包含了四个关键帧，分别是0%、20%、40%和100%。
  - 在0%关键帧，子级容器的top属性和left属性被设置为0，即在父级容器的左上角。
  - 在20%关键帧，子级容器的top属性保持为0，left属性被设置为500像素，即向右移动到父级容器的右边。
  - 在40%关键帧，子级容器的top属性被设置为500像素，left属性保持为0，即向下移动到父级容器的底部。
  - 在100%关键帧，子级容器的top属性被设置为500像素，left属性被设置为500像素，即移动到父级容器的右下角。

 

在HTML部分，通过`<div class="f">`创建了一个父级容器，并在其中嵌套了一个子级容器`<div class="z">`。

子级容器应用了上述定义的CSS样式规则，包括动画相关的属性。其中，在`animation`属性中，关键帧动画`move1`被应用到子级容器，并设置了持续时间为2秒、延迟时间为0.1秒、重复3次、线性的时间函数、以及交替播放和停留在最后一帧的填充模式。

这段代码的结果将展示一个具有动态移动效果的子级容器在父级容器内部进行移动。子级容器将按照定义的关键帧规则进行动画变化，从父级容器的左上角，经过右上角、左下角，最终停留在右下角。

3、活学活用：

  ----动态太极图的实现：

在HTML中，创建了一个父级容器`<div class="fu">`，其中包含多个子级容器`<div>`。每个子级容器代表太极图案的不同部分。

在CSS样式中，使用了一些属性和规则来定义太极图案的样式：
- `.fu`类规则定义了父级容器的样式，包括宽度、高度、相对定位和动画效果。

- `.z1`和`.z2`类规则定义了太极图案的两个半边，设置了宽高、背景色和边框半径，通过调整`left`属性将两个半边结合在一起。

- `.z3`和`.z4`类规则定义了太极图案的两个小圆，设置了宽高、背景色和边框半径，并通过`left`和`top`属性来定位在父级容器内部的位置。

- `.z5`和`.z6`类规则定义了太极图案中的两个小圆点，设置了宽高、背景色和边框半径，并通过`left`和`top`属性进行定位。

- `@keyframes circle`关键帧规则定义了名为`circle`的动画序列。通过`transform`属性的`rotate()`方法实现了对图案的旋转，从0度旋转到360度。

 

 

在HTML部分，通过嵌套的方式将子级容器放置在父级容器中：

 

这段代码中的CSS样式和HTML结构共同实现了太极图案的效果。太极图案由一个灰色的背景容器（`.fu`） 和多个子容器组成，使用各种CSS属性和规则来定义它们的样式和位置。各个子容器使用不同的颜色和形状来构成太极图案的不同元素，通过设置相对和绝对定位，将它们放置在正确的位置上。使用`@keyframes`关键帧规则实现了旋转动画效果。