首页 > 代码库 > 使用变换属性的旋转和动画属性实现大风车效果
使用变换属性的旋转和动画属性实现大风车效果
主体部分:
<div id="car"> <div class="one"></div> <div class="two"></div> <div class="three"></div> <div class="four"></div> </div>
最外面的div是这个大风车的框,里面的四个div是4半圆的样式框架,
通过旋转#car到达大风车旋转的效果
样式部分:
<style> * { margin: 0; padding: 0; } .one, .two, .three, .four { position: absolute; width: 300px; height: 100px; border: 1px solid gray; border-radius: 150px 150px 0 0; } .one { left: 100px; top: 100px; background: red; transform: rotate(-90deg); } .two { left: 0px; top: 300px; background-color: green; transform: rotate(180deg); } .three { left: 200px; top: 400px; background-color: orange; transform: rotate(90deg); } .four { left: 300px; top: 200px; background-color: blue; transform: rotate(0deg); } #car { margin: 200px; width: 600px; height: 600px; position: relative; animation: cart 5s linear 0s infinite normal; } @keyframes cart { 0% { transform: rotate(0deg); } 25% { transform: rotate(-90deg); } 50% { transform: rotate(-180deg); } 75% { transform: rotate(-270deg); } 100% { transform: rotate(-360deg); } } </style>
使用变换属性的旋转和动画属性实现大风车效果
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。