maybe yes 发表于2015-05-12 23:52
使用 CSS3 的新特性 transition 可以很方便的实现像 JQuery 的 animate 方法一样的动画效果，但是有点遗憾的是，transition 只支持一个属性，重复定义后面的属性会覆盖前面的属性。
transition 有四个参数，分别是 transition-property（规定设置过渡效果的 CSS 属性的名称），transition-duration（规定完成过渡效果需要多少秒或毫秒），transition-timing-function（规定速度效果的速度曲线），transition-delay（开始过滤效果的延迟时间）
请看下面的例子，下面的例子中，红色的区域鼠标悬停后的动画效果是完全 CSS 实现的，鼠标悬停延迟一秒才开始运动，请使用鼠标悬停查看完整的粉红区域内的完整内容。
^_^，原来坚持一个把你当做空气的人，真的好难！这世上没有什么是做不到的，关键是坚持。就比如我，明知道喜欢的男生视我为空气，但我还是坚持每天给他发短信说早安、午安和晚安，就这么坚持了一个月，我终于把原本每个月都用不完的短信套餐用完了呢。
立即学习“前端免费学习笔记（深入）”；
实现上面效果的重点 CSS3 代码如下：
<style>div#transition_animate_div{ height: 50px; overflow: hidden; background: pink; line-height: 50px; transition: height 2s ease-in-out 1s; -moz-transition: height 2s ease-in-out 1s; /* Firefox 4 */ -webkit-transition: height 2s ease-in-out 1s; /* Safari and Chrome */ -o-transition: height 2s ease-in-out 1s; /* Opera */}div#transition_animate_div:hover{ height: 200px;}</style>阅(264)评(0)查看评论
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
广告![ThinkPHP5快速开发企业站点[全程实录]](https://img.php.cn/upload/course/000/000/068/6253d918a3ce7278.png)
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
910
