<html>
<head>
<meta charset="UTF-8">
<title>动态风车</title>
<style>
body {
background: purple
overflow: hidden
}
* {
margin: 0
padding: 0
}
ul {
position: relative
width: 100px
height: 100px
top: 100px
left: 50%
margin-left: -50px
transform-style: preserve-3d
animation: sport 15s linear 0s infinite normal
}
ul:hover {
animation: sport 1.5s linear 0s infinite normal
}
@keyframes sport {
form {
transform: rotateZ(0deg)
}
to {
transform: rotateZ(360deg)
}
}
ul li {
position: absolute
top: 0
left: 0
border: 50px solid transparent
list-style: none
}
li.li_1st {
border-bottom: 50px solid #5697FD
transform: translateY(-70px) rotateZ(45deg)
}
li.a {
border: 35px solid transparent
border-bottom: 35px solid #5687E7
transform: translate(50px,-20px) rotateZ(90deg)
}
li.li_2nd {
border-bottom: 50px solid #A1BD76
transform: translateX(70px) rotateZ(135deg)
}
li.b {
border: 35px solid transparent
border-bottom: 35px solid #3AA37A
transform: translate(50px,50px) rotateZ(180deg)
}
li.li_3th {
border-bottom: 50px solid #FFB12C
transform: translateY(70px) rotateZ(225deg)
}
li.c {
border: 50px solid transparent
border-bottom: 50px solid #FFCD34
transform: translate(0px,0px) rotateZ(45deg)
z-index: 1
}
li.li_4th {
border-bottom: 50px solid #EF7A64
transform: translateX(-70px) rotateZ(315deg)
}
li.d {
border: 35px solid transparent
border-bottom: 35px solid #C1523E
transform: translate(-20px,-20px) rotateZ(0deg)
}
div.e {
position: relative
width: 10px
height: 200px
background-color: gray
top: 50px
left: 257px
z-index: -1
}
</style>
</head>
<body>
<div class="box">
<ul>
<li class="li_1st"></li>
<li class="a"></li>
<li class="li_2nd"></li>
<li class="b"></li>
<li class="li_3th"></li>
<li class="c"></li>
<li class="li_4th"></li>
<li class="d"></li>
</ul>
<div class="e"></div>
</div>
</body>
</html>
所以，编写CSS的方法和编写HTML文档的方法是一样的。 您可以用任何一种文本编辑工具来编写。比如Windows下的记事本和写字板、专门的HTML文本编辑工具（FrontPage、Ultraedit等），都可以用来编辑CSS文档。 那么您可能会问，独立编辑好的CSS文档怎样加入到HTML文档中呢？其实在第一章中的例子里已经介绍了两种方法。 一种是把CSS文档放到文档中： …… 其中中的“type=‘text/CSS’”的意思是中的代码是定义样式表单的。 另一种方法是把CSS样式表写在HTML的行内，比如下面的代码： 蓝色14号文字 这是采用的格式把样式写在HTML中的任意行内，这样比较方便灵活。 还有一种方法是：把您编辑好的CSS文档保存成“.CSS”文件，然后在中定义。定义的格式是这样的： …… 我们看到这里应用了一个，“rel=stylesheet”指连接的元素是一个样式表（stylesheet）文档。一般这里是不需要您改动的。 而后面的“href=../../‘style.CSS’”指的是需要连接的文件地址。您只需把编辑好的“.CSS”文件的详细路径名写进去就可以了。这种方法非常适宜同时定义多个文档。它能使多个文档同时使用相同的样式，从而减少了大量的冗余代码。 本章主要介绍了编写CSS的方法以及如何把作好的CSS文档与HTML结合起来运用。您可以根据自己编写的HTML代码的结构、长度来选择用哪一种方法将CSS与之结合。一般css两种写法.class{样式1:样式1样式2:样式2样式3:样式3样式4:样式4}
.class{样式1:样式1样式2:样式2样式3:样式3样式4:样式4}
另一种是
.class{样式1:样式1
样式2:样式2
样式3:样式3
样式4:样式4}
border、margin、padding这些可以缩写的标签尽量缩写。
第一种样式写出来样式表会比较小，基本没有多余代码，但是对于修改会比较麻烦一点，第二种方式有比较多的代码(回车和空格会影响文件大小，但是影响不大)，但是修改起来比较方便，然而这样竖着写有时样式太多还是容易混乱。现在还没个标准，怎么写顺手就怎么写，简洁主要在布局和使用的样式减少，而不在写法，可以多定义些共用的样式，class="样式1 样式2"可以同时使用多个样式，这样可以节省css代码，而且更清晰
