首页 > Web开发 > 详细

CSS3动画--过渡效果

时间:2017-08-19 00:21:11      阅读:342      评论:0      收藏:0      [点我收藏+]

CSS3动画--过渡效果

transition                               设置四个过渡属性

transition-property            过渡的名称

transition-duration       过度效果花费的时间

transition-timing function  过渡效果的时间曲线

transition-delay         过渡效果开始时间

1、案例源码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3动画--过渡效果</title>
<style>
*{margin: 0;padding: 0}
section{width: 200px;height: 200px;background-color: coral;transition:width 2s,height 2s, transform 2s;
margin: 50px auto;}
section:hover{width: 400px;height: 400px;transform:rotate(360deg);}
</style>
</head>
<body>
<section></section>
</body>
</html>

2、案例效果

技术分享

CSS3动画--过渡效果

原文:http://www.cnblogs.com/qikeyishu/p/7392557.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!