css border渐变_Html和Css合并和拆分制作大风车的代码及详解

1.说明：

推荐指数：★★★★

通俗易懂。

2.效果图

3.一个含有内部的css的html，名叫：风车-1.html代码：

                        大风车DIY1

4.如何将css拆开，单独呢？大型项目都是css单独一个文件夹，里面一大堆css文件。

4.1 建一个fengche.css文件，将下面代码复制进去，和风车-2.html放在同一个文件夹中。

fengche.css的代码：

#box {width: 10px;height: 10px;margin: 5px auto;position: relative;}#main {width: 400px;height: 400px;animation: dfc 1s linear infinite;}/*这是css的注释方法*//*风车的每一扇叶的设置,因为4个扇叶的设置是一样的，所以用这样*//*4个扇叶的共性设置*/.css1,.css2,.css3,.css4 {width: 200px;height: 100px;border: 1px solid blue;border-radius: 100px 100px 0 0;position: absolute;/*4个扇叶的颜色渐变设置*/background-image: linear-gradient(green, yellow);}/*扇叶1的个性设置*/.css1 {top: 100px;}/*扇叶2的个性设置*/.css2 {top: 50px;left: 150px;-webkit-transform: rotate(90deg);-moz-transform: rotate(90deg);-ms-transform: rotate(90deg);-o-transform: rotate(90deg);transform: rotate(90deg);}/*扇叶3的个性设置*/.css3 {top: 200px;left: 200px;-webkit-transform: rotate(180deg);-moz-transform: rotate(180deg);-ms-transform: rotate(180deg);-o-transform: rotate(180deg);transform: rotate(180deg);}/*扇叶4的个性设置*/.css4 {top: 250px;left: 50px;-webkit-transform: rotate(270deg);-moz-transform: rotate(270deg);-ms-transform: rotate(270deg);-o-transform: rotate(270deg);transform: rotate(270deg);}/*中间的圆形的设置*/.ssss {width: 100px;height: 100px;border-radius: 100%;position: absolute;top: 150px;left: 150px;z-index: 10;/*请注意下面css的颜色设置，可以是小写的英文字母，也可以是大写的，还可以是十六进制*//*中间圆的渐变颜色设置*/background-image: radial-gradient(pink, blue);}/*风车的竖直杆的设置*/.hhh {width: 2px;height: 250px;background-image: radial-gradient(black, RED);position: absolute;top: 200px;left: 199px;z-index: -1;}/*运动的功能定义*/@keyframes dfc {0% {    -webkit-transform: rotate(0deg);    -moz-transform: rotate(0deg);    -ms-transform: rotate(0deg);    -o-transform: rotate(0deg);    transform: rotate(0deg);}25% {    -webkit-transform: rotate( 90deg);    -moz-transform: rotate( 90deg);    -ms-transform: rotate( 90deg);    -o-transform: rotate( 90deg);    transform: rotate( 90deg);}50% {    -webkit-transform: rotate(180deg);    -moz-transform: rotate(180deg);    -ms-transform: rotate(180deg);    -o-transform: rotate(180deg);    transform: rotate(180deg);}75% {    -webkit-transform: rotate(270deg);    -moz-transform: rotate(270deg);    -ms-transform: rotate(270deg);    -o-transform: rotate(270deg);    transform: rotate(270deg);}100% {    -webkit-transform: rotate(360deg);    -moz-transform: rotate(360deg);    -ms-transform: rotate(360deg);    -o-transform: rotate(360deg);    transform: rotate(360deg);}}

4.2 风车-2.html的代码：注意修改部分。

            大风车DIY2

怎么样？通俗易懂吧，看了后，立马入门。