4 CSS的 变换、过渡与动画
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 动画性能优化
为了确保动画流畅运行，可以采取以下措施优化动画性能：
- 使用硬件加速：通过使用
transform和opacity属性，可以利用GPU加速渲染。 - 简化动画：避免过多复杂的动画效果，减少动画帧数。
- 控制动画数量：避免同时运行过多动画，确保动画的响应速度。
- 使用适当的缓动函数：选择适当的缓动函数，使动画更加自然流畅。
通过本章的学习，读者应该对CSS3中的变换、过渡与动画有一个深入的了解，并能够在实际开发中灵活应用这些特性。接下来，我们将深入探讨CSS3中的弹性布局和网格布局。
相关文章：
4 CSS的 变换、过渡与动画
CSS3引入了变换、过渡和动画特性，使得网页可以呈现出丰富的视觉效果和交互体验。通过这些新特性，开发者可以创建复杂的动画效果，而不需要使用JavaScript。 4.1 变换（Transforms） 变换允许开发者对元素进行旋转、缩放…...
前端基础入门三大核心之JS篇：掌握数字魔法 ——「累加器与累乘器」的奥秘籍【含样例代码】
前端基础入门三大核心之JS篇：掌握数字魔法 ——「累加器与累乘器」的奥秘籍 🧙♂️ 基础概念：数字的魔杖与炼金术累加器（Accumulator）累乘器（Multiplier） 📚 实战演练：…...
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 …...
Vue2和Vue3生命周期的对比
Vue2和Vue3生命周期的对比 Vue2 和 Vue3 生命周期对照表Vue2 和 Vue3 生命周期图示 Vue2 和 Vue3 生命周期对照表 触发时机Vue2.xVue3.x组件创建时运行beforeCreate setup createdsetup 挂载在DOM时运行beforeMountonBeforeMountmountedonMounted响应数据修改时运行beforeUpdat…...
全面解析Java.lang.ClassCastException异常
全面解析Java.lang.ClassCastException异常 全面解析Java.lang.ClassCastException异常：解决方案与最佳实践 🚀📚摘要引言1. 什么是Java.lang.ClassCastException？代码示例 2. 报错原因2.1 类型不兼容2.2 泛型类型擦除2.3 接口和实…...
美团Java社招面试题真题，最新面试题
如何处理Java中的内存泄露？ 1、识别泄露： 使用内存分析工具（如Eclipse Memory Analyzer Tool、VisualVM）来识别内存泄露的源头。 2、代码审查： 定期进行代码审查，关注静态集合类属性和监听器注册等常见内…...
二十八、openlayers官网示例Data Tiles解析——自定义绘制DataTile源数据
官网demo地址： https://openlayers.org/en/latest/examples/data-tiles.html 这篇示例讲解的是自定义加载DataTile源格式的数据。 先来看一下什么是DataTile，这个源是一个数组，与我们之前XYZ切片源有所不同。DataTile主要适用于需要动态生成…...
分布式事务解决方案（最终一致性【TCC解决方案】）
最终一致性分布式事务概述 强一致性分布式事务解决方案要求参与事务的各个节点的数据时刻保持一致，查询任意节点的数据都能得到最新的数据结果，这就导致在分布式场景，尤其是高并发场景下，系统的性能受到了影响。而最终一致性分布式…...
App Inventor 2 Encrypt.Security 安全性扩展：MD5哈希，SHA/AES/RSA/BASE64
这是关于App Inventor和Thunkable安全性的扩展，它提供MD5哈希，SHA1和SHA256哈希，AES加密/解密，RSA加密/解密，BASE64编码/解码方法。 权限 此扩展程序不需要任何权限。 事件 OnErrorOccured 抛出任何异常时将触发此事件…...
深入了解Linux中的环境变量
在Linux系统中，环境变量（Environment Variables）是用于配置操作系统和应用程序运行环境的一种机制。它们储存在键值对中，可以控制程序的行为、路径查找和系统配置。本文将深入探讨环境变量的基本概念、常见类型、设置和管理方法&a…...
雷军-2022.8小米创业思考-8-和用户交朋友，非粉丝经济；性价比是最大的诚意；新媒体，直播离用户更近；用真诚打动朋友，脸皮厚点！
第八章 和用户交朋友 2005年，为了进一步推动金山的互联网转型，让金山的同事更好地理解互联网的精髓，我推动了一场向谷歌学习的运动，其中一个小要求就是要能背诵“谷歌十诫”。 十诫的第一条就令人印象深刻：以用户为中…...
【Vue2.x】props技术详解
1.什么是prop？ 定义：组件标签上注册的一些自定义属性作用：向子组件传递数据特点 可以传递任意数量的prop可以传递任意类型的prop 2.prop校验 为了避免乱传数据，需要进行校验 完整写法 将之前props数组的写法，改为对象…...
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;//分子式…...
fpga系列 HDL: 05 阻塞赋值(=)与非阻塞赋值(＜=)
在Verilog硬件描述语言（HDL）中，信号的赋值方式主要分为两种：连续赋值和过程赋值。每种赋值方式有其独特的用途和语法，并适用于不同类型的电路描述。 1. 连续赋值（Continuous Assignment,assign 和…...
大白话DC3算法
DC3算法是什么 DC3算法（也称为Skew算法）是一种高效的构建后缀数组的算法，全称为Difference Cover Modulo 3算法。 该算法于2002年被提出，论文参考： https://www.cs.cmu.edu/~guyb/paralg/papers/KarkkainenSanders0…...
力扣HOT100 - 75. 颜色分类
解题思路： 单指针，对数组进行两次遍历。 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 …...
Vue.js - 计算属性与侦听器 【0基础向 Vue 基础学习】
文章目录 计算属性 computedcomputed 的使用方法computed 与 method 的区别计算属性完整写法 watch 侦听器（监视器）简单写法 → 简单类型数据，直接监视完整写法 → 添加额外配置项 计算属性 computed computed 的使用方法 **概念࿱…...
技术速递｜使用 C# 集合表达式重构代码
作者：David Pine 排版：Alan Wang 本文是系列文章的第二篇，该系列文章涵盖了探索 C# 12功能的各种重构场景。在这篇文章中，我们将了解如何使用集合表达式重构代码，我们将学习集合初始化器、各种表达式用法、支持的集合目…...
我的世界开服保姆级教程
前言 Minecraft开服教程 如果你要和朋友联机时，可以选择的方法有这样几种： 局域网联机：优点：简单方便，在MC客户端里自带。缺点：必须在同一局域网内。 有些工具会带有联机功能：优点：一…...
[转载]同一台电脑同时使用GitHub和GitLab
原文地址：https://developer.aliyun.com/article/893801 简介： 工作中我们有时可能会在同一台电脑上使用多个git账号，例如：公司的gitLab账号，个人的gitHub账号。怎样才能在使用gitlab与github时，切换成对应…...
【OSG学习笔记】Day 18: 碰撞检测与物理交互
物理引擎（Physics Engine） 物理引擎 是一种通过计算机模拟物理规律（如力学、碰撞、重力、流体动力学等）的软件工具或库。 它的核心目标是在虚拟环境中逼真地模拟物体的运动和交互，广泛应用于 游戏开发、动画制作、虚…...
Qt/C++开发监控GB28181系统/取流协议/同时支持udp/tcp被动/tcp主动
一、前言说明 在2011版本的gb28181协议中，拉取视频流只要求udp方式，从2016开始要求新增支持tcp被动和tcp主动两种方式，udp理论上会丢包的，所以实际使用过程可能会出现画面花屏的情况，而tcp肯定不丢包，起码…...
简易版抽奖活动的设计技术方案
1.前言 本技术方案旨在设计一套完整且可靠的抽奖活动逻辑，确保抽奖活动能够公平、公正、公开地进行，同时满足高并发访问、数据安全存储与高效处理等需求，为用户提供流畅的抽奖体验，助力业务顺利开展。本方案将涵盖抽奖活动的整体架构设计、核心流程逻辑、关键功能实现以及…...
Spring Boot 实现流式响应（兼容 2.7.x）
在实际开发中，我们可能会遇到一些流式数据处理的场景，比如接收来自上游接口的 Server-Sent Events（SSE） 或 流式 JSON 内容，并将其原样中转给前端页面或客户端。这种情况下，传统的 RestTemplate 缓存机制会…...
MFC内存泄露
1、泄露代码示例 void X::SetApplicationBtn() {CMFCRibbonApplicationButton* pBtn GetApplicationButton();// 获取 Ribbon Bar 指针// 创建自定义按钮CCustomRibbonAppButton* pCustomButton new CCustomRibbonAppButton();pCustomButton->SetImage(IDB_BITMAP_Jdp26)…...
python爬虫：Newspaper3k 的详细使用（好用的新闻网站文章抓取和解析的Python库）
更多内容请见： 爬虫和逆向教程-专栏介绍和目录 文章目录 一、Newspaper3k 概述1.1 Newspaper3k 介绍1.2 主要功能1.3 典型应用场景1.4 安装二、基本用法2.2 提取单篇文章的内容2.2 处理多篇文档三、高级选项3.1 自定义配置3.2 分析文章情感四、实战案例4.1 构建新闻摘要聚合器…...
Android 之 kotlin 语言学习笔记三（Kotlin-Java 互操作）
参考官方文档：https://developer.android.google.cn/kotlin/interop?hlzh-cn 一、Java（供 Kotlin 使用） 1、不得使用硬关键字 不要使用 Kotlin 的任何硬关键字作为方法的名称 或字段。允许使用 Kotlin 的软关键字、修饰符关键字和特殊标识…...
MFC 抛体运动模拟：常见问题解决与界面美化
在 MFC 中开发抛体运动模拟程序时，我们常遇到 轨迹残留、无效刷新、视觉单调、物理逻辑瑕疵 等问题。本文将针对这些痛点，详细解析原因并提供解决方案，同时兼顾界面美化，让模拟效果更专业、更高效。 问题一：历史轨迹与小球残影残留 现象 小球运动后，历史位置的 “残影”…...
08. C#入门系列【类的基本概念】：开启编程世界的奇妙冒险
C#入门系列【类的基本概念】：开启编程世界的奇妙冒险 嘿，各位编程小白探险家！欢迎来到 C# 的奇幻大陆！今天咱们要深入探索这片大陆上至关重要的 “建筑”—— 类！别害怕，跟着我，保准让你轻松搞…...
前端中slice和splic的区别
1. slice slice 用于从数组中提取一部分元素，返回一个新的数组。 特点： 不修改原数组：slice 不会改变原数组，而是返回一个新的数组。提取数组的部分：slice 会根据指定的开始索引和结束索引提取数组的一部分。不包含…...