css 布局及动画应用（flex+transform+transition+animation）

css 布局及动画应用

1. Display用法
   • 作用：用于控制元素的显示类型，如块级元素、内联元素、无显示等。
   • 常见属性值及示例：
     • block：使元素显示为块级元素，会独占一行，并且可以设置宽度、高度、内外边距等属性。例如：

div {display: block;width: 200px;height: 100px;background-color: lightblue;margin: 10px;
}

• inline：使元素显示为内联元素，不会独占一行，宽度和高度属性会根据内容自适应，并且垂直方向的外边距和内边距等属性可能不会像块级元素那样正常起作用。例如：

span {display: inline;background-color: yellow;padding: 5px;
}

• none：元素不会被显示，并且不会在文档流中占据空间。例如：

.hidden-element {display: none;
}

2. Flex布局相关CSS
   • 作用：用于创建灵活的布局，方便实现水平或垂直方向的对齐、分布等布局效果。
   • 基本属性及示例：
     • 容器属性（父元素）：
       • display: flex：将容器设置为flex布局。例如：

.container {display: flex;border: 1px solid black;
}

• flex-direction：定义主轴的方向，有row（水平方向，从左到右）、row - reverse（水平方向，从右到左）、column（垂直方向，从上到下）、column - reverse（垂直方向，从下到上）。例如：

.container-row {display: flex;flex-direction: row;
}
.container-column {display: flex;flex-direction: column;
}

• justify-content：用于在主轴上对齐子元素，有flex-start（从主轴起点开始对齐）、flex-end（从主轴终点开始对齐）、center（在主轴中心对齐）、space-between（子元素之间均匀分布，两端对齐）、space-around（子元素周围均匀分布）。例如：

.container {display: flex;justify-content: space-between;
}

• 项目属性（子元素）：
  • flex-grow：定义项目的放大比例。如果所有项目的flex - grow属性都为1，则它们将等分剩余空间；如果一个项目的flex - grow为2，其他项目为1，则前者占据的剩余空间将是其他项目的两倍。例如：

.item-grow {flex-grow: 1;
}
.item-double-grow {flex-grow: 2;
}

• flex - shrink：定义项目的缩小比例。例如，当容器空间不足时，flex - shrink属性控制子元素如何缩小。例如：

.item - shrink {flex-shrink: 1;
}

3. Transform用法
   • 作用：用于对元素进行旋转、缩放、平移和倾斜等变换操作。
   • 常见函数及示例：
     • translate()：用于平移元素。例如，transform: translate(50px, 100px);会将元素在水平方向移动50px，在垂直方向移动100px。

.transform-translate {transform: translate(50px, 100px);width: 100px;height: 100px;background-color: green;
}

• rotate()：用于旋转元素。例如，transform: rotate(45deg);会将元素顺时针旋转45度。

.transform-rotate {transform: rotate(45deg);width: 100px;height: 100px;background-color: orange;
}

• scale()：用于缩放元素。例如，transform: scale(1.5, 1.5);会将元素在水平和垂直方向都放大1.5倍。

.transform - scale {transform: scale(1.5, 1.5);width: 100px;height: 100px;background-color: purple;
}

4. Transition用法

   • 作用：用于实现元素状态变化时的过渡效果，如颜色变化、尺寸变化等。

   • 基本属性及示例：

     • transition - property：指定要应用过渡效果的CSS属性。例如，transition - property: width, height;表示宽度和高度属性变化时应用过渡效果。
     • transition - duration：过渡效果的持续时间，以秒（s）或毫秒（ms）为单位。例如，transition - duration: 0.5s;表示过渡效果持续0.5秒。
     • transition - timing - function：指定过渡的时间曲线，如ease（默认，慢-快-慢）、linear（匀速）等。例如，transition - timing - function: ease - in - out;
     • transition - delay：过渡效果的延迟时间，以秒（s）或毫秒（ms）为单位。例如，transition - delay: 0.2s;表示延迟0.2秒后开始过渡。

     完整示例：

.button {width: 100px;height: 30px;background-color: blue;transition-property: background - color;transition-duration: 0.3s;transition-timing - function: ease;transition-delay: 0;
}
.button:hover {background-color: red;
}

• 在这个示例中，当鼠标悬停在按钮上时，按钮的背景颜色会在0.3秒内以ease的时间曲线从蓝色过渡到红色，没有延迟。

5. Float用法
   • 作用：用于使元素向左或向右浮动，使得文本或其他内联元素可以环绕在它周围。
   • 常见属性值及示例：
     • left：元素向左浮动。例如：

img {float: left;width: 100px;height: 100px;margin-right: 10px;
}

 - `right`：元素向右浮动。例如：

.ad-box {float: right;width: 200px;height: 300px;background-color: lightgray;margin-left: 10px;
}

需要注意的是，当使用float布局时，可能需要清除浮动（使用clear: both;等属性）来避免父元素高度塌陷等问题。例如：

.clear-fix:after {content: "";display: table;clear: both;
}

在父元素的类中添加clear-fix，可以在浮动元素之后清除浮动，确保父元素能够正确地包含浮动元素。

animation

1. animation的基本用法
   • animation是CSS中用于创建动画的一个简写属性，它可以将多个与动画相关的属性组合在一起。其基本语法如下：
   • animation: name duration timing-function delay iteration-count direction fill-mode play-state;
   • 其中各参数的含义如下：
     • name：指定要应用的动画名称，这个名称是通过@keyframes规则定义的动画序列的名称。
     • duration：动画的持续时间，以秒（s）或毫秒（ms）为单位。例如，3s表示动画持续3秒。
     • timing-function：指定动画的时间曲线，用于控制动画在每个阶段的速度。常见的值有ease（默认，慢 - 快 - 慢）、linear（匀速）、ease - in（慢 - 快）、ease - out（快 - 慢）、cubic - bezier(n,n,n,n)（自定义贝塞尔曲线）等。
     • delay：动画的延迟时间，以秒（s）或毫秒（ms）为单位。例如，1s表示动画延迟1秒后开始。
     • iteration-count：动画的播放次数。可以是一个数字（如3，表示播放3次），也可以是infinite（无限次播放）。
     • direction：指定动画的播放方向。常见的值有normal（正常方向，从起始关键帧到结束关键帧）、reverse（反向，从结束关键帧到起始关键帧）、alternate（交替，先正常播放，然后反向播放，重复此过程）、alternate - reverse（先反向播放，然后正常播放，重复此过程）。
     • fill-mode：指定动画在播放之前和之后如何应用样式。常见的值有none（默认，动画结束后回到初始状态）、forwards（动画结束后保持在结束状态）、backwards（在延迟期间应用起始关键帧的样式）、both（结合forwards和backwards的效果）。
     • play-state：控制动画的播放或暂停状态。常见的值有running（播放）和paused（暂停），不过通常通过JavaScript来动态改变这个值。
2. animation的实例
   • 简单的淡入淡出动画
     • 首先，定义@keyframes规则来创建动画序列：

@keyframes fade-in-out {from {opacity: 0;}to {opacity: 1;}
}

• 然后，将这个动画应用到一个元素上：

div {width: 100px;height: 100px;background - color: lightblue;animation: fade-in-out 3s ease-in-out 0s infinite alternate;
}

• 在这个例子中，创建了一个名为fade - in - out的动画，它会让元素的透明度从0（完全透明）变化到1（完全不透明）。这个动画应用到一个div元素上，动画持续时间为3秒，时间曲线是ease - in - out（淡入淡出效果），没有延迟，会无限次交替播放（先淡入，再淡出，然后再淡入，如此循环）。
• 元素移动和旋转动画
  • 定义@keyframes规则：

@keyframes move-and-rotate {0% {transform: translate(0, 0) rotate(0deg);}50% {transform: translate(100px, 100px) rotate(180deg);}100% {transform: translate(200px, 0) rotate(360deg);}
}

 - 应用动画到元素：

img {width: 50px;height: 50px;animation: move-and-rotate 5s linear 0s infinite;
}

• 这个例子中，@keyframes规则定义了一个动画序列，元素从初始位置（0,0）开始，先移动到(100px,100px)并旋转180度，然后移动到(200px,0)并旋转360度。动画应用到一个img元素上，持续时间为5秒，以线性速度播放，没有延迟，并且无限次播放。这样，图片会在页面上一边移动一边旋转，形成一个动态的效果。

transform，transition，animation 综合应用实例

以下是一个将transform、transition和animation综合应用的实例，通过一个简单的方块元素在鼠标悬停时产生多种动态效果来展示这三个属性的协同工作：

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF - 8"><meta name="viewport" content="width=device-width, initial-scale = 1.0"><title>Transform, Transition, Animation综合应用</title><style>/* 定义动画 */@keyframes colorChange {0% {background-color: lightblue;}50% {background-color: lightgreen;}100% {background-color: lightcoral;}}/* 定义元素的基本样式 */.box {width: 100px;height: 100px;background-color: lightblue;margin: 50px auto;/* 过渡效果 */transition: transform 0.5s ease-in-out;/* 动画 */animation: colorChange 5s ease-in-out infinite alternate;}/* 鼠标悬停时的样式 */.box:hover {/* 变换效果 */transform: scale(1.5) rotate(45deg);}</style>
</head><body><div class="box"></div>
</body></html>

代码实例解释

1. @keyframes colorChange：定义了一个名为colorChange的动画，该动画使元素的背景颜色在lightblue（浅蓝色）、lightgreen（浅绿色）和lightcoral（浅珊瑚色）之间交替变化。
2. .box类样式：
   • 定义了一个宽度和高度均为100px的方块，背景颜色为lightblue，并居中显示在页面上。
   • 使用transition: transform 0.5s ease - in - out;设置了过渡效果，当transform属性发生变化时（例如在鼠标悬停时），将以ease - in - out的时间曲线在0.5秒内平滑过渡。
   • 使用animation: colorChange 5s ease - in - out infinite alternate;应用了之前定义的colorChange动画。该动画将以ease - in - out的时间曲线持续5秒，无限次播放，并且每次播放方向交替（即从浅蓝色到浅绿色再到浅珊瑚色，然后反过来）。
3. .box:hover样式：当鼠标悬停在方块上时，应用transform: scale(1.5) rotate(45deg);，使方块在放大到原来的1.5倍的同时顺时针旋转45度。由于之前设置了过渡效果，这个变换过程会平滑地进行。

通过这个例子，展示了transform用于实现即时的元素变换，transition用于创建平滑的过渡效果，animation用于实现更复杂的动画序列，三者结合可以创造出丰富多样的动态交互效果。