CSS transition 过渡

1 前言

CSS过渡(transition)可以在一个元素切换到另一种状态时为其定义平滑的过渡效果。

例如,用户鼠标悬停在按钮上时,按钮颜色平滑的从一个颜色过渡到另一个颜色。

.btn:hover{background-color: red;color: black;
}

默认悬停效果

动画

添加过渡效果

.btn{transition-duration: 0.8s;transition-timing-function: ease;
}

动画

transition是transition-property、transition-duration、transition-timing-function、transition-delay的简写属性。

下面来一一介绍这些属性。

2 transition-property

这个属性指定应用过渡效果的属性名。

它有以下取值:

  • all:默认值,表示过渡效果应用到所有可过渡的属性上。
  • none:没有过渡动画。
  • <property-name>:指定应用过渡效果的属性名,你可以指定多个值,使用逗号分隔。
  • initial:重置为初始值。
  • unet:重置为默认值。

3 transition-duration

过渡周期,过渡效果的持续时间。

默认值为0s,即没有过渡效果。

属性值以秒或毫秒为单位,像transition-property一样,你也可以设置多个值,它们会自动对应transition-property指定的属性名。

如果时间周期数小于过渡属性数,那么周期数会重复应用;如果时间周期数大于过渡属性数,那么时间周期数多余的部分被忽略。

4 transition-timing-function

过渡效果的时间函数,决定了动画变化速度。

image-20230901204205527

下面是它的属性值介绍。

1)ease

默认值。

过渡在开始时速度较慢,中间时加速,结束时减速。

2)ease-in

过渡开始时速度较慢,然后逐渐加速。

3)ease-out

开始时速度较快,然后逐渐减速。

4)ease-in-out

过渡开始和结束时速度较慢,中间时速度较快。相比于ease更加平滑。

5)linear

过渡速度恒定,没有加速或减速,呈线性变化。

6)step-start

在过渡的开始时立即跳到结束状态。

7)step-end

在过渡的结束时立即跳回开始状态。

8)steps函数

例如steps(4,jump-end)表示将过渡划分为4步,每一步结束时立即跳到结束状态。

第二个参数有以下值:

  • jump-start:在每一步开始时立即跳到结束状态。
  • jump-end:在每一步结束时立即跳到结束状态。
  • jump-none:没有跳跃,过渡效果平滑进行。
  • jump-both:在每一步的开始和结束时都立即跳到结束状态。

9)cubic-bezier函数

image-20230901204417462

接受四个参数,分别定义了时间曲线上的两个控制点。

这四个参数的取值范围是从0到1之间。

这四个参数的组合决定了贝塞尔曲线的形状,从而影响了过渡效果的速度和变化。

你可以使用在线的贝塞尔曲线生成器来可视化和调整这些参数。

5 transition-delay

过渡之前需要等待的时间。

6 移动小球Demo

动画

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>移动小球Demo</title><style>body {margin: 0;padding: 0;}.ball{position: absolute;width: 50px;height: 50px;border-radius: 50px;background-color: red;transition:all  7s ease;}.move {transform: translateX(300px); /* 将小球向右移动 */}</style>
</head><body><button id="animateButton">移动</button><div class="ball"></div><script>const animateButton = document.getElementById("animateButton");const ball = document.querySelector(".ball");animateButton.addEventListener("click", () => {ball.classList.toggle("move");});</script>
</body></html>

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

网工内推 | 上市公司,IT工程师、服务器工程师,IP以上优先

01 烟台睿创微纳技术股份有限公司 招聘岗位&#xff1a;IT工程师 职责描述&#xff1a; 1、负责网络及安全架构的规划、设计、性能优化&#xff1b; 2、负责网络设备的安装、配置、管理、排错、维护&#xff0c;提供网络设备维护方案&#xff1b; 3、负责防火墙、上网行为管理…

Python数据分析:从导入数据到生成报告的全面指南

随着数据科学和人工智能的迅速发展&#xff0c;Python 已经成为了最受欢迎的数据分析语言之一。Python 具有简单易学、灵活性强、可扩展性高等优点&#xff0c;使其在数据分析领域具有广泛的应用。本文将介绍 Python 数据分析的基本步骤&#xff0c;帮助你了解如何使用 Python …

滑动窗口和双指针

滑动窗口和双指针 一、循环不变量1.1 定义1.2 总结 二、使用循环不变量写对代码2.1 注意2.2 总结 三、滑动窗口3.1 固定长度的滑动窗口&#xff08;同向交替移动的两个变量&#xff09;3.2 不定长度的滑动窗口3.2.1 定义3.2.2 总结 3.3 计数问题3.3.1 标准3.3.2 总结 3.4 使用数…

react app教程

react app教程 环境准备 下载node 下载npx npm install npx创建app npx create-react-app automedia cd automedia npm start构建发布版本 npm run build安装调试工具 # .vscode/launch.json {// 使用 IntelliSense 了解相关属性。 // 悬停以查看现有属性的描述。// 欲了…

前端基础4——jQuery

文章目录 一、基本了解1.1 导入jQuery库1.2 基本语法1.3 选择器 二、操作HTML2.1 隐藏和显示元素2.2 获取与设置内容2.3 获取、设置和删除属性2.4 添加元素2.5 删除元素2.6 设置CSS样式 三、jQuery Ajax3.1 基本语法3.2 回调函数3.3 常用HTTP方法3.4 案例一3.4.1 准备工作3.4.2…

Java,Linux,Mysql小白入门

Java入门 java后端__阿伟_的博客-CSDN博客 Linux与Git入门 Linux与Git入门教程__阿伟_的博客-CSDN博客 Mysql入门 Linux与Git入门教程__阿伟_的博客-CSDN博客

go语言配置

1、Go语言的环境变量 与Java等编程语言一样&#xff0c;安装Go语言开发环境需要设置全局的操作系统环境变量&#xff08;除非是用包管理工具直接安装&#xff09; 主要的系统级别的环境变量有两个: &#xff08;1&#xff09;GOROOT&#xff1a;表示Go语言环境在计算机上的安…

springboot docker

在Spring Boot中使用Docker可以帮助你将应用程序与其依赖的容器化&#xff0c;并简化部署和管理过程。 当你在Spring Boot中使用Docker时&#xff0c;你的代码不需要特殊的更改。你可以按照通常的方式编写Spring Boot应用程序。 java示例代码&#xff0c;展示了如何编写一个基…

lv3 嵌入式开发-3 linux shell命令(权限、输入输出)

1 Shell概述 随着各式Linux系统的图形化程度的不断提高&#xff0c;用户在桌面环境下&#xff0c;通过点击、拖拽等操作就可以完成大部分的工作。 然而&#xff0c;许多Ubuntu Linux功能使用shell命令来实现&#xff0c;要比使用图形界面交互&#xff0c;完成的更快、更直接。…

AcWing 785:快速排序 ← vector

【题目来源】https://www.acwing.com/problem/content/787/【题目描述】 给定你一个长度为 n 的整数数列。 请你使用快速排序对这个数列按照从小到大进行排序。 并将排好序的数列按顺序输出。【输入格式】 输入共两行&#xff0c;第一行包含整数 n。 第二行包含 n 个整数&#…

MOS场效应管

导体三极管中参与导电的有两种极性的载流子&#xff0c;所以也称为双极型三极管。本文将介绍另一种三极管&#xff0c;这种三极管只有一种载流子参与导电&#xff0c;所以也称为单极型三极管&#xff0c;因为这种管子是利用电场效应控制电流的&#xff0c;所以也叫场效应三极管…

JVM 垃圾收集器

重点&#xff1a;CMS&#xff0c;G1&#xff0c;ZGC 主要垃圾收集器如下&#xff0c;图中标出了它们的工作区域、垃圾收集算法&#xff0c;以及配合关系。 Serial 收集器 Serial 收集器是最基础、历史最悠久的收集器。 如同它的名字&#xff08;串行&#xff09;&#xff0c…

javaee spring 用注解的方式实现ioc

spring 用注解的方式实现ioc spring核心依赖 <?xml version"1.0" encoding"UTF-8"?><project xmlns"http://maven.apache.org/POM/4.0.0" xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation"…

使用实体解析和图形神经网络进行欺诈检测

图形神经网络的表示形式&#xff08;作者使用必应图像创建器生成的图像&#xff09; 一、说明 对于金融、电子商务和其他相关行业来说&#xff0c;在线欺诈是一个日益严重的问题。为了应对这种威胁&#xff0c;组织使用基于机器学习和行为分析的欺诈检测机制。这些技术能够实时…

生命周期【Vue】

文章目录 引出生命周期实现方式一&#xff1a;通过外部的定时器实现实现方式二&#xff1a;methods实现方式三&#xff1a;生命周期mounted 分析生命周期总结生命周期 引出生命周期 实现一个透明度来回变化的效果。 实现方式一&#xff1a;通过外部的定时器实现 缺点&#x…

从0创建vite+vue3项目遇到的一些坑

使用ws自动创建的vitevue3项目后设置不了alias 答&#xff1a;不懂原理&#xff0c;但是有其他方法解决。直接在命令行执行“npm init vitelatest"后&#xff0c;一路选下去有create-vue的选项&#xff0c;就选这个create-vue创建&#xff1b;创建后会自动导入一个叫node…

滑动窗口最大值

题目链接 滑动窗口最大值 题目描述 注意点 只可以看到在滑动窗口内的 k 个数字返回 滑动窗口中的最大值1 < k < nums.length 解答思路 首先使用双端队列解决本题&#xff0c;队列中存储的是元素在数组中的下标&#xff0c;不断往队尾添加元素下标。在双端队列中&…

【图解算法数据结构】分治算法篇 + Java代码实现

文章目录 一、重建二叉树二、数值的整数次方三、打印从 1 到最大的 n 位数四、二叉搜索树的后序遍历序列五、数组中的逆序对 一、重建二叉树 public class Solution {int[] preorder;HashMap<Integer, Integer> dic new HashMap<>();public TreeNode buildTree(in…

算法:分治思想处理归并递归问题

文章目录 算法原理实现思路典型例题排序数组数组中的逆序对计算右侧小于当前元素的个数 总结 算法原理 利用归并思想进行分治也是很重要的一种思路&#xff0c;在解决逆序对的问题上有很大的需求空间 于是首先归并排序是首先的&#xff0c;归并排序要能写出来&#xff1a; c…

Linux学习之vsftpd虚拟用户

/etc/vsftpd/vsftpd.conf里边有几项跟vsftpd虚拟用户有关的主要配置&#xff1a; guest_enableYES&#xff0c;允许匿名用户登录vsftpd guest_usernamevirtual&#xff0c;指定虚拟用户账户为virtual&#xff0c;就是把虚拟用户映射成Linux本地用户&#xff0c;这样可以使用Lin…