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

news2025/1/15 3:42:27

文章目录

    • css 布局及动画应用
    • animation
    • 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;
}
  1. 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;
}
  1. 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;
}
  1. 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的时间曲线从蓝色过渡到红色，没有延迟。
  1. 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用于实现更复杂的动画序列，三者结合可以创造出丰富多样的动态交互效果。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2276782.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

电脑分辨率调到为多少最佳？电脑分辨率最佳设置

电脑分辨率调到为多少最佳？电脑分辨率最佳设置

电脑分辨率是指电脑屏幕上显示的像素点的数量&#xff0c;通常用水平和垂直方向的像素点数来表示&#xff0c;例如19201080。像素点越多&#xff0c;显示的内容就越清晰&#xff0c;但也会占用更多的系统资源和电力。那么多电脑分辨率多少最佳&#xff1f;以及电脑分辨率如何调…
阅读更多...
代码随想录算法【Day20】

代码随想录算法【Day20】

Day20 二叉搜索树 235. 二叉搜索树的最近公共祖先 理解只要当前节点的值在p和q节点的值的中间&#xff0c;那这个值就是最近的公共祖先&#xff0c;绝对不是次近的&#xff0c;这个题就好做了。 递归法 二叉搜索树本身是有序的&#xff0c;所以不涉及到前中后序的遍历 cl…
阅读更多...
【SpringBoot】@Value 没有注入预期的值

【SpringBoot】@Value 没有注入预期的值

问题复现 在装配对象成员属性时&#xff0c;我们常常会使用 Autowired 来装配。但是&#xff0c;有时候我们也使用 Value 进行装配。不过这两种注解使用风格不同&#xff0c;使用 Autowired 一般都不会设置属性值&#xff0c;而 Value 必须指定一个字符串值&#xff0c;因为其…
阅读更多...
车联网安全 -- 数字证书到底证明了什么？

车联网安全 -- 数字证书到底证明了什么？

在车联网安全--TLS握手过程详解里面&#xff0c;我们了解到握手时&#xff0c;Server会向Client发送Server Certificate&#xff0c;用于证明自己的身份合法&#xff0c;为什么会有这一步呢&#xff1f; 我们回顾一下数字签名的过程&#xff1a; Bob将使用自己的公钥对“Hello…
阅读更多...
Elasticsarch：使用全文搜索在 ES|QL 中进行过滤 - 8.17

Elasticsarch：使用全文搜索在 ES|QL 中进行过滤 - 8.17

8.17 在 ES|QL 中引入了 match 和 qstr 函数&#xff0c;可用于执行全文过滤。本文介绍了它们的作用、使用方法、与现有文本过滤方法的区别、当前的限制以及未来的改进。 ES|QL 现在包含全文函数&#xff0c;可用于使用文本查询过滤数据。我们将回顾可用的文本过滤方法&#xf…
阅读更多...
【HTML+CSS+JS+VUE】web前端教程-31-css3新特性

【HTML+CSS+JS+VUE】web前端教程-31-css3新特性

圆角 div{width: 100px;height: 100px;background-color: saddlebrown;border-radius: 5px;}阴影 div{width: 200px;height: 100px;background-color: saddlebrown;margin: 0 auto;box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5);}
阅读更多...
Spring Boot 项目自定义加解密实现配置文件的加密

Spring Boot 项目自定义加解密实现配置文件的加密

在Spring Boot项目中&#xff0c; 可以结合Jasypt 快速实现对配置文件中的部分属性进行加密。 完整的介绍参照&#xff1a; Spring Boot Jasypt 实现application.yml 属性加密的快速示例 但是作为一个技术强迫症&#xff0c;总是想着从底层开始实现属性的加解密&#xff0c;…
阅读更多...
若依前后端分离项目部署（使用docker）

若依前后端分离项目部署（使用docker）

文章目录 一、搭建后端1.1 搭建流程&#xff1a;1.2 后端零件:1.2.1 mysql容器创建&#xff1a;1.2.2 redis容器创建&#xff1a;1.2.3 Dockerfile内容&#xff1a;1.2.4 构建项目镜像&#xff1a;1.2.5 创建后端容器&#xff1a; 二、前端搭建&#xff1a;2.1 搭建流程&#x…
阅读更多...
Vue2+OpenLayers使用Overlay实现点击获取当前经纬度信息（提供Gitee源码）

Vue2+OpenLayers使用Overlay实现点击获取当前经纬度信息（提供Gitee源码）

目录 一、案例截图 二、安装OpenLayers库 三、代码实现 关键参数&#xff1a; 实现思路&#xff1a; 核心代码&#xff1a; 完整代码&#xff1a; 四、Gitee源码 一、案例截图 二、安装OpenLayers库 npm install ol 三、代码实现 覆盖物&#xff08;Overlay&#xf…
阅读更多...
Oracle 终止正在执行的SQL

Oracle 终止正在执行的SQL

目录 一. 背景二. 操作简介三. 投入数据四. 效果展示 一. 背景 项目中要求进行性能测试&#xff0c;需要向指定的表中投入几百万条数据。 在数据投入的过程中发现投入的数据不对&#xff0c;需要紧急停止SQL的执行。 二. 操作简介 &#x1f449;需要DBA权限&#x1f448; ⏹…
阅读更多...
Oopsie【hack the box】

Oopsie【hack the box】

Oopsie 解题流程 文件上传 首先开启机器后&#xff0c;我们先使用 nmap -sC -SV来扫描一下IP地址&#xff1a; -sC&#xff1a;使用 Nmap 的默认脚本扫描&#xff08;通常是 NSE 脚本&#xff0c;Nmap Scripting Engine&#xff09;。这个选项会自动执行一系列常见的脚本&am…
阅读更多...
V少JS基础班之第四弹

V少JS基础班之第四弹

一、 前言 第四弹内容是操作符。 本章结束。第一个月的内容就完成了&#xff0c; 是一个节点。 下个月我们就要开始函数的学习了。 我们学习完函数之后。很多概念就可以跟大家补充说明了。 OK&#xff0c;那我们就开始本周的操作符学习 本系列为一周一更&#xff0c;计划历时6…
阅读更多...
【STM32-学习笔记-7-】USART串口通信

【STM32-学习笔记-7-】USART串口通信

文章目录 USART串口通信Ⅰ、硬件电路Ⅱ、常见的电平标准Ⅲ、串口参数及时序Ⅳ、STM32的USART简介数据帧起始位侦测数据采样波特率发生器 Ⅴ、USART函数介绍Ⅵ、USART_InitTypeDef结构体参数1、USART_BaudRate2、USART_WordLength3、USART_StopBits4、USART_Parity5、USART_Mode…
阅读更多...
Docker 安装开源的IT资产管理系统Snipe-IT

Docker 安装开源的IT资产管理系统Snipe-IT

一、安装 1、创建docker-compose.yaml version: 3services:snipeit:container_name: snipeitimage: snipe/snipe-it:v6.1.2restart: alwaysports:- "8000:80"volumes:- ./logs:/var/www/html/storage/logsdepends_on:- mysqlenv_file:- .env.dockernetworks:- snip…
阅读更多...
达梦8-DMSQL程序设计学习笔记1-DMSQL程序简介

达梦8-DMSQL程序设计学习笔记1-DMSQL程序简介

1、DMSQL程序简介 DMSQL程序是达梦数据库对标准SQL语言的扩展&#xff0c;是一种过程化SQL语言。在DMSQL程序中&#xff0c;包括一整套数据类型、条件结构、循环结构和异常处理结构等&#xff0c;DMSQL程序中可以执行SQL语句&#xff0c;SQL语句中也可以使用DMSQL函数。 DMSQ…
阅读更多...
NLP中常见的分词算法（BPE、WordPiece、Unigram、SentencePiece）

NLP中常见的分词算法（BPE、WordPiece、Unigram、SentencePiece）

文章目录 一、基本概念二、传统分词方法2.1 古典分词方法2.2 拆分为单个字符 三、基于子词的分词方法&#xff08;Subword Tokenization&#xff09;3.1 主要思想3.2 主流的 Subword 算法3.3 Subword 与 传统分词方法的比较 四、Byte Pair Encoding (BPE)4.1 主要思想4.2 算法过…
阅读更多...
第三十六章 Spring之假如让你来写MVC——拦截器篇

第三十六章 Spring之假如让你来写MVC——拦截器篇

Spring源码阅读目录 第一部分——IOC篇 第一章 Spring之最熟悉的陌生人——IOC 第二章 Spring之假如让你来写IOC容器——加载资源篇 第三章 Spring之假如让你来写IOC容器——解析配置文件篇 第四章 Spring之假如让你来写IOC容器——XML配置文件篇 第五章 Spring之假如让你来写…
阅读更多...
PyTorch 深度学习框架快速入门 (小土堆)

PyTorch 深度学习框架快速入门 (小土堆)

PyTorch 深度学习框架快速入门 深度学习框架常用模块数据集存取图片数据处理库 —— PILOS 模块实例 Tensorboard 记录机器学习的过程Transform 进行图像变换数据集的下载DataLoaderModule 自定义网络前向传播卷积层卷积简单应用 最大池化非线性层线性层 简单的整合基于现有网络…
阅读更多...
FPGA的 基本结构（Xilinx 公司Virtex-II 系列FPGA ）

FPGA的 基本结构（Xilinx 公司Virtex-II 系列FPGA ）

以Xilinx 公司Virtex-II 系列FPGA 为例&#xff0c;其基本结构由下图所示。它是主要由两大部分组成&#xff1a;可编程输入/输出&#xff08;Programmable I/Os&#xff09;部分和内部可配置&#xff08;Configurable Logic&#xff09;部分。 可编程输入/输出&#xff08;I/Os…
阅读更多...
【Elasticsearch】批量操作：优化性能

【Elasticsearch】批量操作：优化性能

🧑 博主简介：CSDN博客专家，历代文学网（PC端可以访问：https://literature.sinhy.com/#/?__c=1000，移动端可微信小程序搜索“历代文学”）总架构师，15年工作经验，精通Java编程，高并发设计，Springboot和微服务，熟悉Linux，ESXI虚拟化以及云原生Docker和K8s，热衷于探…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023