P75-前端基础动画效果-过渡效果
2024-04-04 02:14:10
P75-前端基础动画效果-过渡效果
1.概述
这篇文章介绍动画效果其中的一个类型过渡效果。
2.过渡效果
2.1.过渡效果基础内容
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>过度动画效果</title><style>/* 初始化间距 */* {margin: 0;padding: 0;}.box1 {width: 800px;height: 800px;background-color: silver;overflow: hidden;}.box1 div {width: 100px;height: 100px;margin-bottom: 100px;margin-left: 0;}/* 过渡（transition）- 通过过渡可以指定一个属性发生变化时的切换方式- 通过过渡可以创建一些非常好的效果，提升用户的体验transition-property: 指定要执行过渡的属性 多个属性间使用,隔开 如果所有属性都需要过渡，则使用all关键字大部分属性都支持过渡效果，注意过渡时必须是从一个有效数值向另外一个有效数值进行过渡- transition-property: 指定要执行过渡的属性- transition-duration: 指定过渡效果的持续时间- transition-delay: 过渡效果的延迟，等待一段时间后在执行过渡- transition-timing-function: 过渡的时序函数 transition-timing-function: 过渡的时序函数指定过渡的执行的方式 可选值：ease 默认值，慢速开始，先加速，再减速linear 匀速运动ease-in 加速运动ease-out 减速运动ease-in-out 先加速 后减速cubic-bezier() 来指定时序函数https://cubic-bezier.comsteps() 分步执行过渡效果可以设置一个第二个值：end ， 在时间结束时执行过渡(默认值)start ， 在时间开始时执行过渡transition 可以同时设置过渡相关的所有属性，只有一个要求，如果要写延迟，则两个时间中第一个是持续时间，第二个是延迟 */.box2 {background-color: #bfa;/* 设置box2宽度动画效果 */transition: width 2s;/* transition简写形式，all指定所有变化的属性都具备动画效果。在box2的hover效果中添加背景颜色也会跟着改变。*/transition: all 2s;}.box1:hover .box2 {width: 200px;height: 200px;background-color: slateblue;}</style>
</head><body><div class="box1"><div class="box2"></div><div class="box3"></div></div>
</body></html>
2.2.设置元素移动效果
- 设置元素移动效果
.box2 {background-color: #bfa;/* 设置移动效果 */margin-left: 0px;transition: margin-left 2s;}.box1:hover .box2 {/* 改变元素间距大小达到移动效果*/margin-left: 700px;}
- 元素移动效果展示
2.3.设置元素过渡时间
- 设置元素过渡时间
.box2 {background-color: #bfa;/*设置动画效果持续时间transition-duration: 指定过渡效果的持续时间时间单位：s 和 ms 1s = 1000ms*//* 指定过度时间 */transition-property: width;transition-duration: 10ms;/* 指定两个属性不同的过度时间 */transition-property: width , height;/* 指定宽的变化时间1s，高变化时间2s完成 */transition-duration: 1s , 2s;}.box1:hover .box2 {width: 200px;height: 200px;}
- 设置元素过渡时间效果
2.4.设置元素过渡时序效果ease慢速开始，先加速，再减速
- 设置元素过渡时序效果ease
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>过度动画效果</title><style>/* 初始化间距 */* {margin: 0;padding: 0;}.box1 {width: 800px;height: 800px;background-color: silver;overflow: hidden;}.box1 div {width: 100px;height: 100px;margin-bottom: 100px;margin-left: 0;}.box2 {background-color: #bfa;/* transition-timing-function: ease 默认值，慢速开始，先加速，再减速 */transition-duration: 2s;transition-timing-function: ease}.box3 {background-color: orange;transition-duration: 2s;/* transition-timing-function: ease 默认值，慢速开始，先加速，再减速 */transition-timing-function: ease}.box1:hover div {margin-left: 700px;}</style>
</head><body><div class="box1"><div class="box2"></div><div class="box3"></div></div>
</body></html>
- 设置元素过渡时序效果ease效果
2.5.设置元素过渡时序效果linear匀速运动
- 元素过渡时序效果linear匀速运动
.box2 {background-color: #bfa;/* transition-timing-function: ease 默认值，慢速开始，先加速，再减速 */transition-duration: 2s;transition-timing-function: linear}.box3 {background-color: orange;transition-duration: 2s;/* transition-timing-function: ease 默认值，慢速开始，先加速，再减速 */transition-timing-function: ease}.box1:hover div {margin-left: 700px;}
-元素过渡时序效果观察box2和box3运动是同时到达
2.6.设置元素过渡时序效果ease-in 加速运动
- 元素过渡时序效果ease-in 加速运动
.box2 {background-color: #bfa;/* transition-timing-function: ease 默认值，慢速开始，先加速，再减速 */transition-duration: 2s;transition-timing-function: ease-in}.box3 {background-color: orange;transition-duration: 2s;/* transition-timing-function: ease 默认值，慢速开始，先加速，再减速 */transition-timing-function: linear }.box1:hover div {margin-left: 700px;}
- 元素过渡时序效果ease-in 加速运动效果
2.7.设置元素过渡时序效果ease-out 减速运动
- 元素过渡时序效果ease-out 减速运动
.box2 {background-color: #bfa;/* transition-timing-function: ease 默认值，慢速开始，先加速，再减速 */transition-duration: 2s;transition-timing-function: ease-out}.box3 {background-color: orange;transition-duration: 2s;/* transition-timing-function: ease 默认值，慢速开始，先加速，再减速 */transition-timing-function: linear }.box1:hover div {margin-left: 700px;}
- 元素过渡时序效果ease-out 减速运动效果
2.8.设置元素过渡时序效果ease-in-out 先加速 后减速
- 元素过渡时序效果ease-in-out 先加速 后减速
.box2 {background-color: #bfa;/* transition-timing-function: ease 默认值，慢速开始，先加速，再减速 */transition-duration: 2s;transition-timing-function: ease-in-out;}.box3 {background-color: orange;transition-duration: 2s;/* transition-timing-function: ease 默认值，慢速开始，先加速，再减速 */transition-timing-function: linear; }.box1:hover div {margin-left: 700px;}
- 元素过渡时序效果ease-in-out 先加速 后减速效果
2.8.设置元素过渡时序效果cubic-bezier() 来指定时序函数
这个函数可以设置任何运行轨迹，可以通过网站获取他的运行轨迹参数。
设置运行轨迹网站：https://cubic-bezier.com
- 运行轨迹设置方式
- 将复制的参数填写到下面函数中即可
.box2 {background-color: #bfa;/* transition-timing-function: cubic-bezier() 来指定时序函数 */transition-duration: 2s;transition-timing-function: cubic-bezier(.24,.95,.82,-0.88);}.box3 {background-color: orange;transition-duration: 2s;/* transition-timing-function: ease 默认值，慢速开始，先加速，再减速 */transition-timing-function: linear; }.box1:hover div {margin-left: 700px;}
2.9.设置元素过渡时序效果steps() 分步执行过渡
- 元素过渡时序效果steps() 分步执行过渡
.box2 {background-color: #bfa;/* steps() 分步执行过渡效果:end ， 在时间结束时执行过渡(默认值),start ， 在时间开始时执行过渡第一个参数数字表示经过几步完成，第二个参数表示是开始还是结束时开始动作*/transition-timing-function: steps(5, start);}.box3 {background-color: orange;transition-duration: 2s;/* transition-timing-function: ease 默认值，慢速开始，先加速，再减速 */transition-timing-function: linear; }.box1:hover div {margin-left: 700px;}
- 元素过渡时序效果steps() 分步执行过渡效果
2.10.设置元素过渡时序效果transition-delay延迟
- 元素过渡时序效果transition-delay延迟
.box2 {background-color: #bfa;/* transition-delay: 过渡效果的延迟，等待一段时间后在执行过渡 */transition-duration: 1s;transition-delay: 1s;}.box3 {background-color: orange;transition-duration: 2s;/* transition-timing-function: ease 默认值，慢速开始，先加速，再减速 */transition-timing-function: linear; }.box1:hover div {margin-left: 700px;}
- 元素过渡时序效果transition-delay延迟效果
2.10.transition同时设置过渡相关的所有属性
- transition 可以同时设置过渡相关的所有属性
.box2 {background-color: #bfa;/* transition 可以同时设置过渡相关的所有属性，只有一个要求，如果要写延迟，则两个时间中第一个是持续时间，第二个是延迟 */transition:2s margin-left 1s cubic-bezier(.24,.95,.82,-0.88);}.box3 {background-color: orange;transition-duration: 2s;/* transition-timing-function: ease 默认值，慢速开始，先加速，再减速 */transition-timing-function: linear; }.box1:hover div {margin-left: 700px;}
- transition 可以同时设置过渡相关的所有属性效果
3.过渡效果完整内容
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>过度动画效果</title><style>/* 初始化间距 */* {margin: 0;padding: 0;}.box1 {width: 800px;height: 800px;background-color: silver;overflow: hidden;}.box1 div {width: 100px;height: 100px;margin-bottom: 100px;margin-left: 0;}/* 过渡（transition）- 通过过渡可以指定一个属性发生变化时的切换方式- 通过过渡可以创建一些非常好的效果，提升用户的体验transition-property: 指定要执行过渡的属性 多个属性间使用,隔开 如果所有属性都需要过渡，则使用all关键字大部分属性都支持过渡效果，注意过渡时必须是从一个有效数值向另外一个有效数值进行过渡- transition-property: 指定要执行过渡的属性- transition-duration: 指定过渡效果的持续时间- transition-delay: 过渡效果的延迟，等待一段时间后在执行过渡- transition-timing-function: 过渡的时序函数 transition-timing-function: 过渡的时序函数指定过渡的执行的方式 可选值：ease 默认值，慢速开始，先加速，再减速linear 匀速运动ease-in 加速运动ease-out 减速运动ease-in-out 先加速 后减速cubic-bezier() 来指定时序函数https://cubic-bezier.comsteps() 分步执行过渡效果可以设置一个第二个值：end ， 在时间结束时执行过渡(默认值)start ， 在时间开始时执行过渡transition 可以同时设置过渡相关的所有属性，只有一个要求，如果要写延迟，则两个时间中第一个是持续时间，第二个是延迟 */.box2 {background-color: #bfa;/* 设置box2宽度动画效果 *//* transition: width 2s; *//* transition简写形式，all指定所有变化的属性都具备动画效果。在box2的hover效果中添加背景颜色也会跟着改变。*//* transition: all 2s; *//* 设置移动效果 *//* margin-left: 0px;transition: margin-left 2s; *//* 设置动画效果持续时间transition-duration: 指定过渡效果的持续时间时间单位：s 和 ms 1s = 1000ms*//* 指定过度时间 *//* transition-property: width;transition-duration: 10ms; *//* 指定两个属性不同的过度时间 *//* transition-property: width , height;transition-duration: 1s , 2s; *//* transition-timing-function: ease 默认值，慢速开始，先加速，再减速 *//* transition-duration: 2s;transition-timing-function: ease; *//* transition-timing-function: linear 匀速运动 *//* transition-duration: 2s;transition-timing-function: linear; *//* transition-timing-function: ease-in 加速运动 *//* transition-duration: 2s;transition-timing-function: ease-in; *//* transition-timing-function: ease-out 减速运动 *//* transition-duration: 2s;transition-timing-function: ease-out; *//* transition-timing-function: ease-in-out 先加速 后减速 *//* transition-duration: 2s;transition-timing-function: ease-in-out; *//* transition-timing-function: cubic-bezier() 来指定时序函数 *//* transition-duration: 2s;transition-timing-function: cubic-bezier(.24,.95,.82,-0.88); *//* steps() 分步执行过渡效果:end ， 在时间结束时执行过渡(默认值),start ， 在时间开始时执行过渡第一个参数数字表示经过几步完成，第二个参数表示是开始还是结束时开始动作*//* transition-duration: 2s;transition-timing-function: steps(5, start); *//* transition-delay: 过渡效果的延迟，等待一段时间后在执行过渡 *//* transition-duration: 1s;transition-delay: 1s; *//* transition 可以同时设置过渡相关的所有属性，只有一个要求，如果要写延迟，则两个时间中第一个是持续时间，第二个是延迟 */transition:2s margin-left 1s cubic-bezier(.24,.95,.82,-0.88);}.box3 {background-color: orange;transition-duration: 2s;transition-timing-function: linear;}.box1:hover div {/* width: 200px;height: 200px; *//* background-color: slateblue; */margin-left: 700px;}</style>
</head><body><div class="box1"><div class="box2"></div><div class="box3"></div></div>
</body></html>
P75-前端基础动画效果-过渡效果相关推荐
- P84-前端基础动画效果-动画3D复仇者联盟练习
P84-前端基础动画效果-动画3D复仇者联盟练习 1.概述 这篇文章通过一个3D动画,对前面学习的动画效果做一个总结性的练习. 知识点: 元素设置透明效果 设置3d变形效果 设置动画旋转 2. 3D复 ...
- P85-前端基础动画效果-动画缩放效果
P85-前端基础动画效果-动画缩放效果 1.概述 这篇文章介绍动画缩放效果 对元素进行缩放的函数: scaleX() 水平方向缩放 scaleY() 垂直方向缩放 scaleZ() Z方向缩放 sca ...
- UE4 Sequence添加基础动画效果 （03-主序列的使用）
在上一篇的基础上添加一些摄像头的跟拍效果 效果: 步骤: 1.鼠标右键新建 Animation->关卡序列 命名为主序列 2.双击打开主序列 3.点击 窗口->内容浏览器->内容浏览 ...
- 计算机动画设置进入,计算机文化基础动画效果设置.ppt
计算机文化基础动画效果设置 为了达到预期的效果,演示文稿创建的后期,静态效果上,应根据文稿的内容对演示文稿应用的设计模板.整体演示顺序作全局性考虑,对个别幻灯片的文字格式.背景.配色方案和版式布局作局 ...
- P82-前端基础动画效果-动画旋转练习鸭子表
P82-前端基础动画效果-动画旋转练习鸭子表 1.概述 这篇文章做个练习复习上篇文章学习的旋转动画,鸭子表. 2.鸭子表 我们的目标是做一个鸭子背景图案的钟表,有三个表针旋转.在这个案例中我们通过拆分 ...
- P83-前端基础动画效果-动画奔跑的小子练习
P83-前端基础动画效果-动画奔跑的小子练习 1.概述 这篇文章通过一个奔跑的少年练习动画效果 2.奔跑的小子 2.1.奔跑的小子图片 2.2.奔跑的小子代码 <!DOCTYPE html> ...
- H5前端,正方体动画效果
简单的正方体动画 简单的前端H5页面动画效果,量少易懂,本人偏爱狗图,有想要的留言呐! 以下是代码不分 html代码 <div class="wrap"><ul& ...
- 前端实现动画效果的几种方式（有实例）
现在对于前端的要求变大了很多,随着时代进步,人们的审美越来越挑剔,对于用户交互的体验成为了公司竞争的一大助力.而动画效果,可以说是最有效的提高用户体验的方式了.但是对于前端来说,实现动画的方法也有很多 ...
- 通过C3实现基础动画效果
动画最大的特点可以不用鼠标触发,自动的,反复的执行某些动画. 动画的定义和调用 <!DOCTYPE html> <html lang="en"><he ...
最新文章
- 模拟投掷硬币100次
- 新年立个小目标！代码写得更规范！
- Leetcode--994. 腐烂的橘子(java)
- 失忆症later和crowd什么关系_约惠七夕把爱给到对的人 费洛蒙香水作用危害，费洛蒙是什么东西，费洛蒙香水有用吗...
- 重读 CenterNet，一个在Github有5.2K星标的目标检测算法
- 10_python基础—数据序列（推导式）
- Ssm框架实现的学生信息管理系统
- 【python】装饰器的练习题
- 数据库高可用 MHA 搭建手册
- WAS集群系列（3）：集群搭建：步骤1：准备文件
- 从stm32转向Linux,STM32MP1Distrib
- atitit。html css框架Bootstrap Foundation的比较与不同 attilax大总结
- CSDN下载频道【2月热门资源TOP100】汇总
- 解决NLPIR汉语分词系统init failed问题
- 第三方推广——《互联网运营的知识体系与整体逻辑》笔记（十二）
- android仿美团外卖选择地址,Android仿美团地址选择
- 2022电大国家开放大学网上形考任务-贸易实务（山东）非免费（非答案）
- Unloaded branch node detected. “loadOptions“ prop is required to load its children.
- maven完全离线开发【解决jar包自动从网络下载导致打包失败】
- 阅读 v2.19.071322 for Android 官方清爽版 + 众多书源 + 添加书源方法教程