最近在Github 上看到的一个项目，一个不知道有多么无聊的程序媛小姐姐，完全纯粹使用HTML+CSS，画了一个18世纪油画风格的页面。。。这得是有多热爱 CSS 啊。点击下面“阅读原文“即可查看小姐姐的油画项目。
跟大家分享：CSS 典藏版技巧项目：https://github.com/AllThingsSmitty/css-protips
这是一个帮你提升 CSS 技巧的收藏集，还是一个有中文版翻译的项目，项目的结构非常的清晰，一个问题，一段代码，一个演示,你值得拥有！
下面在跟大家分享一个我学css样式时写过的一个例子-动画大风车 -（注释很详细的）：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>大风车</title>
<style type="text/css">
#d span{
display: block;/*使其变成块级元素*/
width:100px;
height: 50px;
opacity: 0.6;/*透明度0-1*/
position: relative;
border-radius: 25px;
}
#d .one{
background: #f00;
transform: skew(30deg);/*扭曲形状*/
top:30px;
left: -13px;
}
#d .two{
background:#00f;
transform: rotate(120deg) skew(30deg);
top:-38px;
left:43px;
}
#d .three{
background: peru;
transform: rotate(240deg) skew(30deg);
top:-30px;
left:30px;
}
#tree{
margin: 0 auto;
width: 10px;
height: 200px;
border-radius: 10px 10px 0 0;
background: #999;
z-index: -1;
position: relative;
top: -97px;
}
#d{
width: 140px;
height:140px;
margin: 20px auto;
-webkit-animation-name: demo;/*动画的名称*/
-webkit-animation-duration:2s ;/*动画持续的时间*/
-webkit-animation-iteration-count:infinite;/*动画运动的次数，无限循环*/
-webkit-animation-timing-function: linear;/*匀速运动*/
-webkit-animation-delay: 2s;/*动画延迟的时间*/
}
/*关键帧*/
@keyframes demo{
from/*或换成 0%*/{transform:rotate(0deg);}
to/*或换成100%*/{transform: rotate(360deg);}
}
</style>
</head>
<div id="d">
<span class="one"></span>
<span class="two"></span>
<span class="three"></span>
</div>
<div id="tree"></div>
<body>
</body>
</html>
