路上的杨柳依然神彩奕奕的低垂着黄绿色的发丝,好像冬天的降温没带给她们多少伤害。我倒感受到她们内心的寒冷,叶子摸着十分冰冷,也缺少了昔日的水分。冬天的到来,摧残了多少无辜的生命,又演绎了多少生命的童话。
用CSS3实现了一个小风车的效果,转转转,挺简单。
效果
代码
XML/HTML Code复制内容到剪贴板
- <!DOCTYPEhtml>
- <htmllang="en">
- <head>
- <metacharset="UTF-8">
- <title>小风车-转啊转</title>
- <styletype="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:3remauto;
- 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;
- -ms-flex-pack:distribute;
- justify-content:space-around;
- -webkit-align-content:space-around;
- -ms-flex-line-pack:distribute;
- align-content:space-around;
- -webkit-transform:translateZ(0);
- transform:translateZ(0);
- -webkit-animation:rotate-windmill1slinearinfinite;
- animation:rotate-windmill1slinearinfinite;
- border-radius:50%;
- border:0.1remsolid#DBE526;
- -webkit-transition:border-radius2slinear;
- transition:border-radius2slinear;
- }
- /*两片叶子的包裹层*/
- .wrapper{
- 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-flex-wrap:wrap;
- -ms-flex-wrap:wrap;
- flex-wrap:wrap;
- -webkit-box-pack:justify;
- -webkit-justify-content:space-between;
- -ms-flex-pack:justify;
- justify-content:space-between;
- height:135%;
- width:50%;
- -webkit-box-align:center;
- -webkit-align-items:center;
- -ms-flex-align:center;
- align-items:center;
- }
- /*包裹层对称*/
- .wrapper1{
- -webkit-transform:rotate(-45deg)translate(5rem);
- transform:rotate(-45deg)translate(5rem);
- -webkit-transform-origin:rightcenter;
- transform-origin:rightcenter;
- }
- .wrapper2{
- -webkit-transform:rotate(45deg)translate(-5rem);
- transform:rotate(45deg)translate(-5rem);
- -webkit-transform-origin:leftcenter;
- transform-origin:leftcenter;
- }
- /*扇叶的形状及底色*/
- .leaf{
- height:13rem;
- width:5rem;
- border-radius:5rem/5rem5rem20rem20rem;
- -webkit-box-shadow:0.1rem0.1rem1remrgba(64,56,56,.35)inset,0.2rem0.2rem0.05remrgba(0,0,0,.65);
- box-shadow:0.1rem0.1rem1remrgba(64,56,56,.35)inset,0.2rem0.2rem0.05remrgba(0,0,0,.65);
- }
- .leaf1{
- border:0.05remsolid#D1A23A;
- -webkit-transform:rotate(0deg)translate(0);
- transform:rotate(0deg)translate(0);
- background-color:rgba(230,0,100,5);
- background:-webkit-gradient(linear,lefttop,leftbottom,from(#D02CE4),to(#f5f5f5));
- background:-webkit-linear-gradient(top,#D02CE4,#f5f5f5);
- background:linear-gradient(180deg,#D02CE4,#f5f5f5);
- -webkit-transition:background2slinear;
- transition:background2slinear;
- }
- .leaf2{
- border:0.05remsolid#49D13A;
- background-color:rgba(230,0,150,5);
- -webkit-transform:rotate(-180deg)translate(0);
- transform:rotate(-180deg)translate(0);
- background:-webkit-gradient(linear,lefttop,leftbottom,from(#B91717),to(#f5f5f5));
- background:-webkit-linear-gradient(top,#B91717,#f5f5f5);
- background:linear-gradient(180deg,#B91717,#f5f5f5);
- -webkit-transition:background2slinear2s;
- transition:background2slinear2s;
- }
- .leaf3{
- border:0.05remsolid#C6079D;
- background-color:rgba(130,0,100,5);
- -webkit-transform:rotate(0deg)translate(0);
- transform:rotate(0deg)translate(0);
- background:-webkit-gradient(linear,lefttop,leftbottom,from(#1CBA9F),to(#f5f5f5));
- background:-webkit-linear-gradient(top,#1CBA9F,#f5f5f5);
- background:linear-gradient(180deg,#1CBA9F,#f5f5f5);
- -webkit-transition:background2slinear;
- transition:background2slinear;
- -webkit-transition:background2slinear4s;
- transition:background2slinear4s;
- }
- .leaf4{
- border:0.05remsolid#3A5FD1;
- background-color:rgba(230,100,100,5);
- -webkit-transform:rotate(-180deg)translate(0);
- transform:rotate(-180deg)translate(0);
- background:-webkit-gradient(linear,lefttop,leftbottom,from(#335642),to(#f5f5f5));
- background:-webkit-linear-gradient(top,#335642,#f5f5f5);
- background:linear-gradient(180deg,#335642,#f5f5f5);
- -webkit-transition:background2slinear6s;
- transition:background2slinear6s;
- }
- /*尾部*/
- .windmill-pillar{
- -webkit-transform:translateZ(0);
- transform:translateZ(0);
- width:3rem;
- height:20rem;
- background:#FFF;
- -webkit-transform:translateY(-52%);
- transform:translateY(-52%);
- position:relative;
- z-index:-2;
- border-radius:50%50%00;
- -webkit-animation:cd2slinearinfinite;
- animation:cd2slinearinfinite;
- }
- @-webkit-keyframesrotate-windmill{
- 0%{
- -webkit-transform:rotate(0);
- transform:rotate(0);
- }
- 100%{
- -webkit-transform:rotate(360deg);
- transform:rotate(360deg);
- }
- }
- @keyframesrotate-windmill{
- 0%{
- -webkit-transform:rotate(0);
- transform:rotate(0);
- }
- 100%{
- -webkit-transform:rotate(360deg);
- transform:rotate(360deg);
- }
- }
- @-webkit-keyframescd{
- 0%{
- background:#F5F5F5;
- }
- 50%{
- background:#E1CB82;
- }
- 75%{
- background:#F1F358;
- }
- 100%{
- background:#FFFC00;
- }
- }
- @keyframescd{
- 0%{
- background:#F5F5F5;
- }
- 50%{
- background:#E1CB82;
- }
- 75%{
- background:#F1F358;
- }
- 100%{
- background:#FFFC00;
- }
- }
- </style>
- </head>
- <body>
- <divclass="windmill">
- <divclass="windmill-head">
- <divclass="wrapperwrapper1">
- <divclass="leafleaf1"></div>
- <divclass="leafleaf2"></div>
- </div>
- <divclass="wrapperwrapper2">
- <divclass="leafleaf3"></div>
- <divclass="leafleaf4"></div>
- </div>
- </div>
- <divclass="windmill-pillar"></div>
- </div>
- </body>
- </html>