CSS3使用transition属性实现过渡效果

站长资源 2024/11/28 佚名

42 1538 42

DDR爱好者之家 Design By 杰米

属性详解

transition属性目的是让css的一些属性（如background）的以平滑过渡的效果出现。它是一个合并属性，是由以下四个属性组合而成：

transition-property：设置应用过渡的CSS属性，如background。
transition-duration：设置过渡效果花费的时间。默认是 0。
transition-timing-function：设置过渡效果的时间曲线。默认是 "ease"。
transition-delay：规定过渡效果何时开始。默认是 0。

示例：

 button{
    transition: background 1s;
    -webkit-transition: background 1s; /* Safari */
 }

定义transition属性时，transition-property和transition-duration是必选，其他两个为可选。

transition-property和transition-duration

transition-property用来指定应用过渡效果的CSS属性，这些属性包括（可能不全）：

width
height
color
background (color, image, position)
transform (in the next post)
border (color, width)
position (top, bottom, left, right )
text (size, weight, shadow, word-spacing)
margin
padding
opacity
visibility
z-index
all

transition-duration属性用来设置指定属性的过渡效果花费时间，可以是秒（s）或者毫秒（ms）。

transition-delay和transition-timing-function

transition-delay用来设置过渡效果开始的时间，默认为0，可以是秒（s）或者毫秒（ms）。如果transition-delay是负数，表示过渡效果提前开始。

transition-timing-function用来设置过渡的效果，这些效果包括：

ease - 开始慢，中间快，结束慢
ease-in - 渐入效果，慢入快出
ease-out - 渐出效果，快入慢出.
ease-in-out - 开始慢和结束慢
cubic-bezier(n,n,n,n) - 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值

示例：

 button{
   transition: background 1s ease-in-out 2s;
   -webkit-transition: background 1s ease-in-out 2s; /* Safari */
 }

多属性

对于多个属性，各个属性的效果以逗号隔开：

  button{
     transition: background 1s ease-in-out 2s, width 2s linear;
     -webkit-transition: background 1s ease-in-out 2s, width 2s linear; /* Safari */
   }

兼容性

Internet Explorer 10、Firefox、Opera 和 Chrome 支持 transition 属性。

Safari 支持替代的 -webkit-transition 属性。

Internet Explorer 9 以及更早版本的浏览器不支持 transition 属性。

触发

需要注意的是，过渡效果是需要之前已经定义好了属性，过渡效果通过触发来应用，比如:hover, :focus, and :active等。

总结

以上所述是小编给大家介绍的CSS3使用transition属性实现过渡效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

transition过渡的效果,css3,transition过渡

DDR爱好者之家 Design By 杰米

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

DDR爱好者之家 Design By 杰米

评论“CSS3使用transition属性实现过渡效果”

暂无评论...

P70系列延期，华为新旗舰将在下月发布

3月20日消息，近期博主@数码闲聊站透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。

而博主@定焦数码爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？
根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。

更新日志

2024年11月28日

CSS3使用transition属性实现过渡效果

纯CSS实现radio和checkbox实现效果示例

CSS模仿遥控器按钮

评论“CSS3使用transition属性实现过渡效果”

P70系列延期，华为新旗舰将在下月发布

更新日志

友情链接