前端css中transition的使用

前端css中transition的使用

  • 一、前言
  • 二、transition的4个属性
  • 三、例子
    • 1.源码1
    • 2.源码1运行效果
  • 四、结语
  • 五、定位日期

一、前言

CSS中的transition(过渡),根据字面意思就可以理解成一种变化状态的过程。当我们有一个方形,我们想让它变化成一个圆,持续2秒钟的变换;又或者粉色方形变换成蓝色圆形,持续3秒钟的变换,那么前面这些需求我们可以使用transition来实现。
后边的代码运行后演示,可看出过渡动画是双向的。当我们鼠标悬停在组件上时,组件进行过渡动画,当鼠标离开组件时,也会触发进行过渡动画返回变化为初始状态。

二、transition的4个属性

举例:
transition: A B C D;
A ------ 过渡动画的对象或组件的某个属性,可以是某个按钮的颜色(背景颜色,边框颜色等),按钮圆角,等。

B ------ 持续这个过渡动画的时间,比如圆形变为方形这个过程持续2s。以秒(s)或毫秒(ms)为单位。

C ------ 过渡动画中的速度曲线,常用的值包括:

  • linear(直线的)动画从头到尾的速度相同
  • ease(舒适)动画慢速开始,然后快,结束前慢。默认的计时函数。
  • ease-in 开始慢,逐渐加快到完成。
  • ease-out 一开始全速快,然后逐渐减速到完成。
  • ease-in-out 动画开始结束慢,中间速度最快。
  • cubic-bezier(n,n,n,n) 自定义一个贝塞尔曲线。
  • steps(n, start | end) 指定一个固定步数的跳转效果,不是平滑过渡。

D ------ 延迟开始过渡的时间,说白了就是先停一下,过多久之后再开始,以秒(s)或毫秒(ms)为单位。

注意:
如果只需要一个组件的一个属性如按钮的背景颜色进行过渡动画,那么设置好下面的A,B,C,D就行,如下:

  • transition: background-color 2s linear, /* 背景颜色在2秒内以线性方式变化。 */

那如果我除了要对背景颜色,还对圆角进行过渡变换,那么需要用逗号,隔开,如下:

  • transition: background-color 2s linear, border-radius 3s ease 1s;

三、例子

1.源码1

<!DOCTYPE html>
<!-- DOCTYPE声明定义了文档的类型和HTML的版本。这里指定为HTML5。 -->
<html lang="en">
<!-- <html>标签是HTML文档的根元素。lang属性指定页面的语言,这里的'en'表示英语。 --><head><style>/* 在<head>部分的<style>标签内定义内部CSS样式。 */.box {width: 100px; /* 设置按钮的宽度为100像素。 */height: 100px; /* 设置按钮的高度为100像素。 */background-color: blue; /* 设置按钮的初始背景颜色为蓝色。 */border-color: pink; /* 设置按钮的边框颜色为粉红色。 */border-width: 5px; /* 设置边框宽度为5像素,使边框明显可见。 *//* 定义background-color和border-radius属性的过渡效果。 */transition: background-color 2s linear, /* 背景颜色在2秒内以线性方式变化。 */border-radius 3s ease 1s; /* 边框半径在3秒内以缓和方式变化,从1秒后开始变化。 */}.box:hover {background-color: red; /* 当鼠标悬停时,背景颜色变为红色。 */border-radius: 50%; /* 当鼠标悬停时,边框半径变为50%,创建圆形效果。 */border-color: aqua; /* 当鼠标悬停时,边框颜色变为水蓝色。 */}</style>
</head>
<body><!-- <body>标签包含HTML文档中将在网页上可见的内容。 --><button class="box"></button> <!-- 一个具有'class="box"'的按钮元素,应用了<head

2.源码1运行效果

鼠标悬停按钮,方形蓝底粉边框,过渡动画变为圆形红底天蓝边框

鼠标未悬停于按钮上时,为蓝底粉边框,如下图:
在这里插入图片描述
鼠标悬停于按钮上时,过渡变化为红底,淡蓝色边框,如下图:
在这里插入图片描述

四、结语

在前面关于css的border-radius属性中,用到了本文的transition,则为此专门花了点时间学习了transition。为此还自己尝试写出了个奇怪好玩的按钮。本文transition中关于过渡速度曲线中的* cubic-bezier(n,n,n,n)steps(n, start | end)只是简单的讲解,具体用法后续会根据需要编写相关的博文。

五、定位日期

2024.4.18
19:06

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

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

相关文章

Ubuntu 22最新dockers部署redis哨兵模式,并整合spring boot的详细记录(含spring boot项目包)

dockers部署redis哨兵模式&#xff0c;并整合spring boot 环境说明相关学习博客一、在docker中安装redis1、下载dockers镜像包和redis配置文件&#xff08;主从一样&#xff09;2、编辑配置文件&#xff08;主从一样&#xff09;3、启动redis&#xff08;主从一样&#xff09;4…

Flutter MQTT通信(实现聊天功能)

MQTT协议简介&#xff1a; MQTT&#xff08;Message Queuing Telemetry Transport&#xff09;是一种轻量级的、开放的、基于发布/订阅模式的消息传输协议&#xff0c;最初由IBM开发。它专门设计用于在低带宽、不稳定的网络环境下进行高效的消息传输。 学习完本篇文章&#x…

重启服务器或重启docker,导致emqx的Dashboard的密码重置为public

最近在项目中突然发现重启服务器,或者重启docker 修改好的emqx的Dashboard的密码重置为public 技术博客 http://idea.coderyj.com/ 1.解决办法就是固定 emqx的节点 # 拉取镜像 docker pull emqx/emqx# 创建目录&#xff0c;进行目录挂载 mkdir -p /docker/emqx/{etc,lib,data,…

llama-factory SFT系列教程 (三),chatglm3-6B 大模型命名实体识别实战

文章列表&#xff1a; llama-factory SFT系列教程 (一)&#xff0c;大模型 API 部署与使用llama-factory SFT系列教程 (二)&#xff0c;大模型在自定义数据集 lora 训练与部署 llama-factory SFT系列教程 (三)&#xff0c;chatglm3-6B 命名实体识别实战 简介 利用 llama-fa…

免费的壁纸api

# 联想壁纸 from enum import Enumimport requestsclass LenovoTopHeadersTypePage(Enum):"""头部页面类型wallpaper 精选wallpaperHot 热门wallpaperRank 排行"""wallpaper wallpaperwallpaperHot wallpaperHotwallpaperRank wallpaperRankc…

NL2SQL技术方案系列(1):NL2API、NL2SQL技术路径选择;LLM选型与Prompt工程技巧,揭秘项目落地优化之道

NL2SQL技术方案系列(1):NL2API、NL2SQL技术路径选择;LLM选型与Prompt工程技巧,揭秘项目落地优化之道 NL2SQL基础系列(1):业界顶尖排行榜、权威测评数据集及LLM大模型(Spider vs BIRD)全面对比优劣分析[Text2SQL、Text2DSL] NL2SQL基础系列(2):主流大模型与微调方法精选…

Android系统学习 —— 替换crash_dump文件

步骤 查看crash_dump所在的路径 vsoc_x86_64:/ # which crash_dump64 /apex/com.android.runtime/bin/crash_dump64可以看到&#xff0c;crash_dump放在了/apex/com.android.runtime下面。但是这个目录下的文件即使remount了也无法修改&#xff0c;而是需要通过/system/apex来…

1.2 海思SS928开发 - 开发环境 - 工具链安装

1.2 开发环境 - 工具链安装 为了方便使用&#xff0c;计划将工具链做成 SS928 SDK 仓库的一部分&#xff0c;并编写一个安装脚本。 创建仓库 在 gitlab 上创建 SS928 SDK 仓库&#xff0c;并命名为 SS928_SDK_G7.3_K4.19&#xff0c;其中 G7.3 代表 gcc 版本为 7.3&#xff0…

OpenHarmony轻量系统开发【12】OneNET云接入

12.1 OneNET云介绍 通常来说&#xff0c;一个物联网产品应当包括设备、云平台、手机APP。我将在鸿蒙系统上移植MQTT协议、OneNET接入协议&#xff0c;实现手机APP、网页两者都可以远程&#xff08;跨网络&#xff0c;不是局域网的&#xff09;访问开发板数据&#xff0c;并控制…

如何在阿里云主机上安装FreeBSD14系统

文章目录 在阿里云主机上安装FreeBSD14系统准备阿里云云主机识别目标磁盘下载 FreeBSD14解压缩 FreeBSD14系统镜像创建可启动的磁盘启动 FreeBSD14在阿里云主机上安装FreeBSD14系统 阿里云主机不支持 FreeBSD14 系统的镜像,因此需要手动进行安装。 准备阿里云云主机 在阿里云…

项目_预览和模拟器运行_真机运行鸿蒙应用---HarmonyOS4.0+鸿蒙NEXT工作笔记002

然后再来看如何使用预览,可以看到 右侧有个preview,点开就可以了 然后再有一个tools,这里 Device Manager,这个是模拟器 点开以后可以看到让我们连接,本地模拟器,还是远程模拟器,还是远程设备 这里我们选择phone 如果选择remote device,这个需要登录华为账号,会自动弹出来登…

前端网络---http协议演变

http协议的演变 什么是http协议&#xff1f; HTTP 协议全称为 Hypertext Transfer Protocol&#xff0c;即超文本传输协议&#xff0c;是互联网上应用最为广泛的一种网络传输协议 http协议演变 1991年0.9版本-------1996年1.0版本-------1997年1.1版本--------2015年2版本-…

探索SQL深入理解数据库操作的关键概念与技巧【文末送书】

文章目录 SQL语言从入门到精通入门篇进阶篇高级篇深入理解SQL SQL语言从入门到精通&#xff08;软件开发视频大讲堂&#xff09;【文末送书】 SQL语言从入门到精通 SQL&#xff08;Structured Query Language&#xff0c;结构化查询语言&#xff09;是一种用于管理关系型数据库…

Linux命令-du命令(显示每个文件和目录的磁盘使用空间)

说明 du命令 也是查看使用空间的&#xff0c;但是与df命令不同的是Linux du命令是对文件和目录磁盘使用的空间 的查看&#xff0c;还是和df命令有一些区别的 语法 du(选项)(参数)选项 -a, --all 显示目录中个别文件的大小。 -B, --block-size大小 使用指定字节数的块 -b, -…

数据结构-贪心策略(贪心算法)

贪心算法 1.贪心算法的核心思想 局部最优思想:在每一步决策时做出对当前看起来最优的解,并且期望这些局部最优的选择能成全全局最优解.全局最优构造:对于给定的问题&#xff0c;其全局最优解可以通过将问题分解为一系列子问题&#xff0c;然后在每个子问题上独立做出贪心选择来…

李飞飞团队发布《2024年人工智能指数报告》,预测人工智能未来发展趋势

昨天&#xff0c;斯坦福大学 Human-Center Artificial Intelligence (HAI)研究中心发布了《2024年人工智能指数报告》。 由斯坦福大学发起的人工智能指数&#xff08;AI Index&#xff09;是一个追踪 AI 动态和进展的非营利性项目&#xff0c;旨在全面研究 AI 行业状况&#xf…

Android Framework 常见解决方案(29)添加应用开发的共享库

1 原理说明 通过设置配置文件public.libraries.txt以及在system分区下添加so动态库的方式&#xff0c;让系统扩展动态库。关于动态库的拷贝较为简单&#xff0c;直接配置即可&#xff0c;这里主要解读下配置文件public.libraries.txt。 1.1 public.libraries.txt配置文件是什…

Redis主从复制及其原理

为什么要有主从复制 为了避免服务的单点故障&#xff0c;通过给主从复制可以把数据复制多个副本放在不同的服务器上&#xff0c;拥有数据副本的服务器可以用于处理客户端的读请求&#xff0c;扩展整体的性能 Redis的主从复制搭建 准备3台机器&#xff0c;主服务器ip为192.16…

云服务器租用一年、1个月优惠价格表,阿里/腾讯/京东/华为云

现在租一个服务器多少一个月&#xff1f;优惠价格低至3.8元1个月&#xff0c;租用一个月云服务器收费价格表&#xff1a;阿里云和腾讯云2核2G3M服务器优惠价格61元一年&#xff0c;折合一个月5元&#xff0c;京东云轻量云主机5.8元一个月&#xff0c;华为云服务器优惠价格3.8元…

未来交通:UWB模块引领智能交通系统的发展方向

随着城市化进程的加速和交通需求的不断增长&#xff0c;智能交通系统正成为解决城市交通问题的重要途径之一。UWB不断发展正在引领智能交通系统的发展方向。UWB模块作为UWB技术的核心组成部分&#xff0c;具有精准定位、快速响应、抗干扰等特点&#xff0c;为智能交通系统的构建…