用过渡做一个风车

最新推荐文章于 2024-07-20 17:12:48 发布

原创最新推荐文章于 2024-07-20 17:12:48 发布 · 706 阅读

0 ·

CC 4.0 BY-SA版权

web 专栏收录该内容

12 篇文章

订阅专栏

今天教大家使用过渡做一个简单的动画：

首先我们先来了解一过渡的基础知识：

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）进行旋转。