本文主要是介绍用过渡做一个风车，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
今天教大家使用过渡做一个简单的动画：
首先我们先来了解一过渡的基础知识：
transition：过渡（css3的动画的一种）transition-property：要运动的样式（all || [attr] || none）
transition-duration：规定完成过渡效果需要多少秒或毫秒
transition-delay：定义动画延迟多久开始
transition-timing-function：运动速度曲线。ease：（逐渐变慢）默认值；linear：（匀速）；ease-in：(加速)；ease-out：（减速）；ease-in-out：（先加速后减速）；cubic-bezier 贝塞尔曲线（ x1, y1, x2, y2 ），可以百度一下贝赛尔曲线的图
transition: property duration timing-function delay //集合样式
接下来是我自己写的一个风车旋转的简单的动画：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style type="text/css">
.wrap{width:600px; height:600px; margin:100px auto; overflow:hidden; transition:all 6s linear;}
.wrap div{width:300px; height:300px; background-color:red; float:left;}
.wrap div:nth-child(1),.wrap div:nth-child(4){border-radius:0 90%;}
.wrap div:nth-child(2),.wrap div:nth-child(3){border-radius:90% 0;}
.wrap:hover{transform:rotate(1080deg);}
</style>
</head>
<body>
<div class="wrap"><div></div><div></div><div></div><div></div>
</div>
</body>
</html>
这个代码中风车的页的设计是4个div通过border-radius的来完成的，
风车旋转的实现是通过CSS样式：
transition:all 6s linear 再搭配hover伪类 transform：rotate（1080deg）进行旋转。
下面是效果图：
这篇关于用过渡做一个风车的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
