CSS3动画--过渡效果

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、案例效果

posted @ 2017-08-18 23:40  牛新龙的IT技术博客  阅读(288)  评论(0)  编辑  收藏  举报