当前位置： 首页 > news >正文

4 CSS的 变换、过渡与动画

news 2025/9/8 23:42:29

CSS3引入了变换、过渡和动画特性，使得网页可以呈现出丰富的视觉效果和交互体验。通过这些新特性，开发者可以创建复杂的动画效果，而不需要使用JavaScript。

4.1 变换（Transforms）

变换允许开发者对元素进行旋转、缩放、倾斜和平移操作。这些变换可以单独使用，也可以组合使用。

4.1.1 旋转（Rotate）

rotate 变换用于旋转元素。可以指定旋转的角度，正值表示顺时针旋转，负值表示逆时针旋转。

/* 旋转元素45度 */
.element {transform: rotate(45deg);
}

4.1.2 缩放（Scale）

scale 变换用于缩放元素。可以指定水平和垂直方向的缩放比例。

/* 缩放元素为原始大小的两倍 */
.element {transform: scale(2);
}/* 水平缩放两倍，垂直缩放一半 */
.element {transform: scale(2, 0.5);
}

4.1.3 平移（Translate）

translate 变换用于平移元素。可以指定水平和垂直方向的位移。

/* 水平平移50px，垂直平移100px */
.element {transform: translate(50px, 100px);
}

4.1.4 倾斜（Skew）

skew 变换用于倾斜元素。可以指定水平和垂直方向的倾斜角度。

/* 水平倾斜30度 */
.element {transform: skewX(30deg);
}/* 垂直倾斜30度 */
.element {transform: skewY(30deg);
}/* 同时进行水平和垂直倾斜 */
.element {transform: skew(30deg, 20deg);
}

4.1.5 组合变换

可以将多种变换组合在一起使用。

/* 平移元素50px并旋转45度 */
.element {transform: translate(50px) rotate(45deg);
}

4.2 过渡（Transitions）

过渡允许元素属性的变化在一段时间内平滑进行，提供了流畅的视觉效果。

4.2.1 定义过渡

transition 属性用于定义元素属性变化时的过渡效果。

/* 定义所有属性的过渡效果，持续时间为0.3秒，使用ease缓动效果 */
.element {transition: all 0.3s ease;
}

4.2.2 指定过渡属性

可以指定特定属性的过渡效果。

/* 定义背景颜色和宽度的过渡效果 */
.element {transition: background-color 0.3s ease, width 0.3s ease;
}

4.2.3 过渡效果示例

通过过渡效果改变背景颜色。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>过渡效果示例</title>
<style>
.box {width: 100px;height: 100px;background-color: red;transition: background-color 0.5s ease;
}.box:hover {background-color: blue;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>

4.3 动画（Animations）

CSS3动画允许开发者通过定义关键帧动画来创建复杂的动画效果。

4.3.1 @keyframes规则

@keyframes 规则用于定义动画。关键帧指定了动画过程中不同时间点的样式。

@keyframes example {0% {background-color: red;left: 0px;}100% {background-color: yellow;left: 100px;}
}

4.3.2 应用动画

animation 属性用于将动画应用到元素上。

/* 应用动画，持续时间为5秒，循环播放 */
.element {animation: example 5s infinite;
}

4.3.3 动画属性

  • animation-name: 动画名称，与@keyframes定义的名称一致。
  • animation-duration: 动画持续时间。
  • animation-timing-function: 动画缓动效果，如ease、linear等。
  • animation-delay: 动画开始前的延迟时间。
  • animation-iteration-count: 动画循环次数，可以是数值或infinite。
  • animation-direction: 动画播放方向，可以是normal、reverse、alternate等。

4.3.4 动画示例

创建一个移动和改变背景颜色的动画。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>动画示例</title>
<style>
@keyframes moveAndChange {0% {background-color: red;transform: translateX(0);}50% {background-color: yellow;transform: translateX(100px);}100% {background-color: green;transform: translateX(200px);}
}.box {width: 100px;height: 100px;background-color: red;animation: moveAndChange 4s infinite alternate;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>

4.3.5 动画性能优化

为了确保动画流畅运行，可以采取以下措施优化动画性能：

  1. 使用硬件加速：通过使用transform和opacity属性，可以利用GPU加速渲染。
  2. 简化动画：避免过多复杂的动画效果，减少动画帧数。
  3. 控制动画数量：避免同时运行过多动画，确保动画的响应速度。
  4. 使用适当的缓动函数：选择适当的缓动函数，使动画更加自然流畅。

通过本章的学习，读者应该对CSS3中的变换、过渡与动画有一个深入的了解，并能够在实际开发中灵活应用这些特性。接下来，我们将深入探讨CSS3中的弹性布局和网格布局。

相关文章：

4 CSS的 变换、过渡与动画

CSS3引入了变换、过渡和动画特性&#xff0c;使得网页可以呈现出丰富的视觉效果和交互体验。通过这些新特性&#xff0c;开发者可以创建复杂的动画效果&#xff0c;而不需要使用JavaScript。 4.1 变换&#xff08;Transforms&#xff09; 变换允许开发者对元素进行旋转、缩放…...

编程日记 2024/5/28 0:51:14

前端基础入门三大核心之JS篇：掌握数字魔法 ——「累加器与累乘器」的奥秘籍【含样例代码】

前端基础入门三大核心之JS篇&#xff1a;掌握数字魔法 ——「累加器与累乘器」的奥秘籍 &#x1f9d9;‍♂️ 基础概念&#xff1a;数字的魔杖与炼金术累加器&#xff08;Accumulator&#xff09;累乘器&#xff08;Multiplier&#xff09; &#x1f4da; 实战演练&#xff1a;…...

编程日记 2024/5/28 0:50:13

git clone 出现的问题

问题: core源码ref新API % git clone https://github.com/xxxx.git Cloning into core... remote: Enumerating objects: 58033, done. remote: Counting objects: 100% (1393/1393), done. remote: Compressing objects: 100% (750/750), done. error: 432 bytes of body are …...

编程日记 2024/5/28 0:48:10

Vue2和Vue3生命周期的对比

Vue2和Vue3生命周期的对比 Vue2 和 Vue3 生命周期对照表Vue2 和 Vue3 生命周期图示 Vue2 和 Vue3 生命周期对照表 触发时机Vue2.xVue3.x组件创建时运行beforeCreate setup createdsetup 挂载在DOM时运行beforeMountonBeforeMountmountedonMounted响应数据修改时运行beforeUpdat…...

编程日记 2024/5/28 0:47:09

全面解析Java.lang.ClassCastException异常

全面解析Java.lang.ClassCastException异常 全面解析Java.lang.ClassCastException异常&#xff1a;解决方案与最佳实践 &#x1f680;&#x1f4da;摘要引言1. 什么是Java.lang.ClassCastException&#xff1f;代码示例 2. 报错原因2.1 类型不兼容2.2 泛型类型擦除2.3 接口和实…...

编程日记 2024/5/28 0:46:08

美团Java社招面试题真题，最新面试题

如何处理Java中的内存泄露&#xff1f; 1、识别泄露&#xff1a; 使用内存分析工具&#xff08;如Eclipse Memory Analyzer Tool、VisualVM&#xff09;来识别内存泄露的源头。 2、代码审查&#xff1a; 定期进行代码审查&#xff0c;关注静态集合类属性和监听器注册等常见内…...

编程日记 2024/5/28 0:45:07

二十八、openlayers官网示例Data Tiles解析——自定义绘制DataTile源数据

官网demo地址&#xff1a; https://openlayers.org/en/latest/examples/data-tiles.html 这篇示例讲解的是自定义加载DataTile源格式的数据。 先来看一下什么是DataTile&#xff0c;这个源是一个数组&#xff0c;与我们之前XYZ切片源有所不同。DataTile主要适用于需要动态生成…...

编程日记 2024/5/28 0:43:05

分布式事务解决方案（最终一致性【TCC解决方案】）

最终一致性分布式事务概述 强一致性分布式事务解决方案要求参与事务的各个节点的数据时刻保持一致&#xff0c;查询任意节点的数据都能得到最新的数据结果&#xff0c;这就导致在分布式场景&#xff0c;尤其是高并发场景下&#xff0c;系统的性能受到了影响。而最终一致性分布式…...

编程日记 2024/5/28 0:42:04

App Inventor 2 Encrypt.Security 安全性扩展：MD5哈希，SHA/AES/RSA/BASE64

这是关于App Inventor和Thunkable安全性的扩展&#xff0c;它提供MD5哈希&#xff0c;SHA1和SHA256哈希&#xff0c;AES加密/解密&#xff0c;RSA加密/解密&#xff0c;BASE64编码/解码方法。 权限 此扩展程序不需要任何权限。 事件 OnErrorOccured 抛出任何异常时将触发此事件…...

编程日记 2024/5/28 0:41:02

深入了解Linux中的环境变量

在Linux系统中&#xff0c;环境变量&#xff08;Environment Variables&#xff09;是用于配置操作系统和应用程序运行环境的一种机制。它们储存在键值对中&#xff0c;可以控制程序的行为、路径查找和系统配置。本文将深入探讨环境变量的基本概念、常见类型、设置和管理方法&a…...

编程日记 2024/5/28 0:40:01

雷军-2022.8小米创业思考-8-和用户交朋友，非粉丝经济；性价比是最大的诚意；新媒体，直播离用户更近；用真诚打动朋友，脸皮厚点！

第八章 和用户交朋友 2005年&#xff0c;为了进一步推动金山的互联网转型&#xff0c;让金山的同事更好地理解互联网的精髓&#xff0c;我推动了一场向谷歌学习的运动&#xff0c;其中一个小要求就是要能背诵“谷歌十诫”。 十诫的第一条就令人印象深刻&#xff1a;以用户为中…...

编程日记 2024/5/28 0:38:59

【Vue2.x】props技术详解

1.什么是prop&#xff1f; 定义&#xff1a;组件标签上注册的一些自定义属性作用&#xff1a;向子组件传递数据特点 可以传递任意数量的prop可以传递任意类型的prop 2.prop校验 为了避免乱传数据&#xff0c;需要进行校验 完整写法 将之前props数组的写法&#xff0c;改为对象…...

编程日记 2024/5/28 0:37:58

C语言例题46、根据公式π/4=1-1/3+1/5-1/7+1/9-1/11+…,计算π的近似值，当最后一项的绝对值小于0.000001为止

#include <stdio.h> #include <math.h>int main() {int fm 1;//分母double sign 1;//正负号double fzs 1;//分子式double sum 0;while (fabs(fzs) > 0.000001) {sum fzs;sign * -1; //变换正负号fm 2; //分母3、5、7、9...增长fzs sign / fm;//分子式…...

编程日记 2024/5/28 0:35:56

fpga系列 HDL: 05 阻塞赋值(=)与非阻塞赋值(＜=)

在Verilog硬件描述语言&#xff08;HDL&#xff09;中&#xff0c;信号的赋值方式主要分为两种&#xff1a;连续赋值和过程赋值。每种赋值方式有其独特的用途和语法&#xff0c;并适用于不同类型的电路描述。 1. 连续赋值&#xff08;Continuous Assignment,assign 和&#xf…...

编程日记 2024/5/28 0:34:55

大白话DC3算法

DC3算法是什么 DC3算法&#xff08;也称为Skew算法&#xff09;是一种高效的构建后缀数组的算法&#xff0c;全称为Difference Cover Modulo 3算法。 该算法于2002年被提出&#xff0c;论文参考&#xff1a; https://www.cs.cmu.edu/~guyb/paralg/papers/KarkkainenSanders0…...

编程日记 2024/5/28 0:31:52

力扣HOT100 - 75. 颜色分类

解题思路&#xff1a; 单指针&#xff0c;对数组进行两次遍历。 class Solution {public void sortColors(int[] nums) {int p 0;int n nums.length;for (int i 0; i < n; i) {if (nums[i] 0) {int tmp nums[i];nums[i] nums[p];nums[p] tmp;p;}}for (int i p; i …...

编程日记 2024/5/28 0:30:50

Vue.js - 计算属性与侦听器 【0基础向 Vue 基础学习】

文章目录 计算属性 computedcomputed 的使用方法computed 与 method 的区别计算属性完整写法 watch 侦听器&#xff08;监视器&#xff09;简单写法 → 简单类型数据&#xff0c;直接监视完整写法 → 添加额外配置项 计算属性 computed computed 的使用方法 **概念&#xff1…...

编程日记 2024/5/28 0:29:48

技术速递｜使用 C# 集合表达式重构代码

作者&#xff1a;David Pine 排版&#xff1a;Alan Wang 本文是系列文章的第二篇&#xff0c;该系列文章涵盖了探索 C# 12功能的各种重构场景。在这篇文章中&#xff0c;我们将了解如何使用集合表达式重构代码&#xff0c;我们将学习集合初始化器、各种表达式用法、支持的集合目…...

编程日记 2024/5/28 0:28:47

我的世界开服保姆级教程

前言 Minecraft开服教程 如果你要和朋友联机时&#xff0c;可以选择的方法有这样几种&#xff1a; 局域网联机&#xff1a;优点&#xff1a;简单方便&#xff0c;在MC客户端里自带。缺点&#xff1a;必须在同一局域网内。 有些工具会带有联机功能&#xff1a;优点&#xff1a;一…...

编程日记 2024/5/28 0:27:46

[转载]同一台电脑同时使用GitHub和GitLab

原文地址&#xff1a;https://developer.aliyun.com/article/893801 简介&#xff1a; 工作中我们有时可能会在同一台电脑上使用多个git账号&#xff0c;例如&#xff1a;公司的gitLab账号&#xff0c;个人的gitHub账号。怎样才能在使用gitlab与github时&#xff0c;切换成对应…...

编程日记 2024/5/28 0:26:45

Docker 离线安装指南

参考文章 1、确认操作系统类型及内核版本 Docker依赖于Linux内核的一些特性&#xff0c;不同版本的Docker对内核版本有不同要求。例如&#xff0c;Docker 17.06及之后的版本通常需要Linux内核3.10及以上版本&#xff0c;Docker17.09及更高版本对应Linux内核4.9.x及更高版本。…...

编程新知 2025/9/1 18:08:39

Python爬虫实战：研究feedparser库相关技术

1. 引言 1.1 研究背景与意义 在当今信息爆炸的时代，互联网上存在着海量的信息资源。RSS（Really Simple Syndication）作为一种标准化的信息聚合技术，被广泛用于网站内容的发布和订阅。通过 RSS，用户可以方便地获取网站更新的内容，而无需频繁访问各个网站。 然而，互联网…...

编程新知 2025/8/18 9:54:31

五年级数学知识边界总结思考-下册

目录 一、背景二、过程1.观察物体小学五年级下册“观察物体”知识点详解&#xff1a;由来、作用与意义**一、知识点核心内容****二、知识点的由来&#xff1a;从生活实践到数学抽象****三、知识的作用&#xff1a;解决实际问题的工具****四、学习的意义&#xff1a;培养核心素养…...

编程新知 2025/6/20 13:47:44

cf2117E

原题链接&#xff1a;https://codeforces.com/contest/2117/problem/E 题目背景&#xff1a; 给定两个数组a,b&#xff0c;可以执行多次以下操作&#xff1a;选择 i (1 < i < n - 1)&#xff0c;并设置 或&#xff0c;也可以在执行上述操作前执行一次删除任意 和 。求…...

编程新知 2025/9/7 1:36:13

基于Docker Compose部署Java微服务项目

一. 创建根项目 根项目&#xff08;父项目&#xff09;主要用于依赖管理 一些需要注意的点&#xff1a; 打包方式需要为 pom<modules>里需要注册子模块不要引入maven的打包插件&#xff0c;否则打包时会出问题 <?xml version"1.0" encoding"UTF-8…...

编程新知 2025/8/25 18:45:52

uniapp 开发ios， xcode 提交app store connect 和 testflight内测

uniapp 中配置 配置manifest 文档&#xff1a;manifest.json 应用配置 | uni-app官网 hbuilderx中本地打包 下载IOS最新SDK 开发环境 | uni小程序SDK hbulderx 版本号&#xff1a;4.66 对应的sdk版本 4.66 两者必须一致 本地打包的资源导入到SDK 导入资源 | uni小程序SDK …...

编程新知 2025/9/2 18:24:29

4. TypeScript 类型推断与类型组合

一、类型推断 (一) 什么是类型推断 TypeScript 的类型推断会根据变量、函数返回值、对象和数组的赋值和使用方式&#xff0c;自动确定它们的类型。 这一特性减少了显式类型注解的需要&#xff0c;在保持类型安全的同时简化了代码。通过分析上下文和初始值&#xff0c;TypeSc…...

编程新知 2025/7/7 15:21:47

tomcat指定使用的jdk版本

说明 有时候需要对tomcat配置指定的jdk版本号&#xff0c;此时&#xff0c;我们可以通过以下方式进行配置 设置方式 找到tomcat的bin目录中的setclasspath.bat。如果是linux系统则是setclasspath.sh set JAVA_HOMEC:\Program Files\Java\jdk8 set JRE_HOMEC:\Program Files…...

编程新知 2025/6/10 21:11:28

如何配置一个sql server使得其它用户可以通过excel odbc获取数据

要让其他用户通过 Excel 使用 ODBC 连接到 SQL Server 获取数据&#xff0c;你需要完成以下配置步骤&#xff1a; ✅ 一、在 SQL Server 端配置&#xff08;服务器设置&#xff09; 1. 启用 TCP/IP 协议 打开 “SQL Server 配置管理器”。导航到&#xff1a;SQL Server 网络配…...

编程新知 2025/8/25 19:37:12

精益数据分析（98/126）：电商转化率优化与网站性能的底层逻辑

精益数据分析&#xff08;98/126&#xff09;&#xff1a;电商转化率优化与网站性能的底层逻辑 在电子商务领域&#xff0c;转化率与网站性能是决定商业成败的核心指标。今天&#xff0c;我们将深入解析不同类型电商平台的转化率基准&#xff0c;探讨页面加载速度对用户行为的…...

编程新知 2025/8/1 17:29:00