本文主要包含css3风车,html5 css3动画特效,css3关键帧动画,css3 3d旋转动画,css3动画特效等相关知识,crper 希望在学习及工作中可以帮助到您
用CSS3实现了一个小风车的效果，转转转，挺简单。
效果
代码
</div>- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>小风车-转啊转</title>
- <style type="text/css">
- html {
- font-size: 10px;
- }
- html * {
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
- }
- .windmill {
- width: 25rem;
- min-height: 30rem;
- height: auto;
- margin: 3rem auto;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -webkit-flex-direction: column;
- -ms-flex-direction: column;
- flex-direction: column;
- -webkit-box-pack: start;
- -webkit-justify-content: flex-start;
- -ms-flex-pack: start;
- justify-content: flex-start;
- -webkit-box-align: center;
- -webkit-align-items: center;
- -ms-flex-align: center;
- align-items: center;
- }
- /* 头部 */
- .windmill-head {
- height: 20rem;
- width: 20rem;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: horizontal;
- -webkit-box-direction: normal;
- -webkit-flex-direction: row;
- -ms-flex-direction: row;
- flex-direction: row;
- -webkit-flex-wrap: wrap;
- -ms-flex-wrap: wrap;
- flex-wrap: wrap;
- -webkit-justify-content: space-around;