搜索
首页web前端html教程css3 过渡记_html/css_WEB-ITnose

CSS3 过渡

  CSS3的transition允许CSS的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击,获得焦点,被点击或对元素任何改变中触发,并平滑地以动画效果改变CSS的属性值。

transition:[<transition-property> || <transition-duration> || <transition-timing-function> || <transition-delay>]

  transition-property:指定过渡的CSS属性。
  transition-duration:指定完成过渡所需的时间。
  transition-timing-function:指定过渡调速函数。
  transition -delay:指定过渡开始出现的延迟时间。

  transition属性类似于border,font这些属性,可以简写,也可以单独来写。简写时,各函数之间用空格隔开,且需要按一定的顺序排列。另外,作用于多个过渡属性时,中间用逗号隔开。如下:

<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /><title></title><style>   div{       width:50px;       height:100px;       background:#ffd800;       /*分开使用transition的扩展属性*/       transition-property:width,height,background;       transition-duration:1s;       transition-timing-function:ease;       transition-delay:.2s;       /*使用transition简写属性*/       transition:width 1s ease .2s,height 1s ease .2s,background 1s ease .2s;   }   div:hover{       width:100px;       height:50px;       background:#00ff90;   }</style></head><body>	<div></div></body></html>

transition-property语法:

transition-property:no | all | <single-transition-property> [, <single-transition-property>] *

  none:没有指定任何样式。
  all:默认值,表示指定元素所有支持transition-property属性的样式。
  :指定一个或多个样式。
  并不是所有样式都能应用transition-property进行过渡,只有具有一个中点值的样式才能具备过渡效果,如颜色,长度,渐变等。

transition-duration语法

transition-duration:<time> [,<time>] *  

  

transition-timing-function语法

transition-timing-function:<single-transition-timing-function> [,<single-transition-timing-function>] *  

  单一的过渡函数

  指单一的过渡函数,主要包括下面几个属性值。
  ease:默认值,元素样式从初始状态过渡到终止状态时速度由快到慢,逐渐变慢。
  linear:元素样式从初始状态过渡到终止状态速度是恒速。
  ease-in:元素样式从初始状态过渡到终止状态时,速度越来越快,呈一种加速状态。这种效果称为渐显效果。
  ease-out:元素样式从初始状态过渡到终止状态时,速度越来越慢,呈一种减速状态。这种效果称为渐隐效果。
  ease-in-out:元素样式从初始状态到终止状态时,先加速再减速。这种效果称为渐显渐隐效果。

  三次贝塞尔曲线:用来定义精确度更高的过渡函数。

  定义三次贝赛尔曲线的语法如下:

cubic-bezier(p0,p1,p2,p3)

  每个点值只允许0~1的值,相当于0%到100%,p0与p3的值固定的,他们始终代表起点坐标(0,0)与终点坐标(1,1)。因此只需要设置p1,p2的点值就行了。

可以用在线的三次贝塞尔工具模拟并实现。

<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /><title></title><style>   div{       width:50px;       height:100px;       background:#ffd800;       transition-property:width,height,background;       transition-duration:1s;		/*定义了三次贝塞尔曲线函数,p1的坐标是(.57,.07),p2的坐标是(.69,.16)*/       transition-timing-function:cubic-bezier(.57,.07,.69,.16);       transition-delay:.2s;   }   div:hover{       width:100px;       height:50px;       background:#00ff90;   }</style></head><body>	<div></div></body></html>

  steps()函数:用于把整个操作领域划成同样大小的间隔,每个间隔都是相等的。

steps(<integer> [, [start | end]]?)

  第一个参数是一个数值,主要用来指定steps()函数的间隔数量,此值必须是一个大于0的正整数。
  第二个参数是可选的,默认值为end。

  transition-timing-function:steps(3,start);
  

  表示分3个步骤,动画的步骤效果从每步的开始时跳,所以步骤是3/1, 3/2, 3/3。

  transition-timing-function:steps(3,end);

  

  表示分3个步骤,动画的步骤效果从每步的结束时跳,所以步骤是0, 3/1, 3/2。

transition-delay语法

transition-delay:<time> [, <time>] *

  transition-delay:用来指定一个动画开始执行的时间,也就是说当改变元素属性值后多长时间开始执行过渡效果,它可以是正整数,负整数和0,非零的时候必须将单位设置为s(秒)或ms(毫秒)。
  正整数时好理解,就是延迟几秒开始执行过渡,负整数时,将元素的之前时间截断,也就是transition-duration过渡时间所用的值减去transition-delay的延迟值,这中间的值不会发生,直接跳到剩下的值进行过渡。

CSS3过渡的基础知识你已经掌握了,简单来说就是一个属性四个值,接下来只需要打几遍代码,体会一下各值效果,就可以融会贯通了。

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
&gt; gt;的目的是什么 元素?&gt; gt;的目的是什么 元素?Mar 21, 2025 pm 12:34 PM

本文讨论了HTML&lt; Progress&gt;元素,其目的,样式和与&lt; meter&gt;元素。主要重点是使用&lt; progress&gt;为了完成任务和LT;仪表&gt;对于stati

&lt; datalist&gt;的目的是什么。 元素?&lt; datalist&gt;的目的是什么。 元素?Mar 21, 2025 pm 12:33 PM

本文讨论了html&lt; datalist&gt;元素,通过提供自动完整建议,改善用户体验并减少错误来增强表格。Character计数:159

&lt; meter&gt;的目的是什么。 元素?&lt; meter&gt;的目的是什么。 元素?Mar 21, 2025 pm 12:35 PM

本文讨论了HTML&lt; meter&gt;元素,用于在一个范围内显示标量或分数值及其在Web开发中的常见应用。它区分了&lt; meter&gt;从&lt; progress&gt;和前

视口元标签是什么?为什么对响应式设计很重要?视口元标签是什么?为什么对响应式设计很重要?Mar 20, 2025 pm 05:56 PM

本文讨论了视口元标签,这对于移动设备上的响应式Web设计至关重要。它解释了如何正确使用确保最佳的内容缩放和用户交互,而滥用可能会导致设计和可访问性问题。

如何使用HTML5表单验证属性来验证用户输入?如何使用HTML5表单验证属性来验证用户输入?Mar 17, 2025 pm 12:27 PM

本文讨论了使用HTML5表单验证属性,例如必需的,图案,最小,最大和长度限制,以直接在浏览器中验证用户输入。

我如何使用html5&lt; time&gt; 元素以语义表示日期和时间?我如何使用html5&lt; time&gt; 元素以语义表示日期和时间?Mar 12, 2025 pm 04:05 PM

本文解释了HTML5&lt; time&gt;语义日期/时间表示的元素。 它强调了DateTime属性对机器可读性(ISO 8601格式)的重要性,并在人类可读文本旁边,增强Accessibilit

&lt; iframe&gt;的目的是什么。 标签?使用时的安全考虑是什么?&lt; iframe&gt;的目的是什么。 标签?使用时的安全考虑是什么?Mar 20, 2025 pm 06:05 PM

本文讨论了&lt; iframe&gt;将外部内容嵌入网页,其常见用途,安全风险以及诸如对象标签和API等替代方案的目的。

HTML5中跨浏览器兼容性的最佳实践是什么?HTML5中跨浏览器兼容性的最佳实践是什么?Mar 17, 2025 pm 12:20 PM

文章讨论了确保HTML5跨浏览器兼容性的最佳实践,重点是特征检测,进行性增强和测试方法。

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
3 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
3 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您听不到任何人,如何修复音频
3 周前By尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

PhpStorm Mac 版本

PhpStorm Mac 版本

最新(2018.2.1 )专业的PHP集成开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

EditPlus 中文破解版

EditPlus 中文破解版

体积小,语法高亮,不支持代码提示功能

mPDF

mPDF

mPDF是一个PHP库,可以从UTF-8编码的HTML生成PDF文件。原作者Ian Back编写mPDF以从他的网站上“即时”输出PDF文件,并处理不同的语言。与原始脚本如HTML2FPDF相比,它的速度较慢,并且在使用Unicode字体时生成的文件较大,但支持CSS样式等,并进行了大量增强。支持几乎所有语言,包括RTL(阿拉伯语和希伯来语)和CJK(中日韩)。支持嵌套的块级元素(如P、DIV),