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
怎么样?通俗易懂吧,看了后,立马入门。