Html和Css合併和拆分製作大風車的代碼及詳解

1.說明：

推薦指數：★★★★

通俗易懂。

2.效果圖

3.一個含有內部的css的html，名叫：風車-1.html代碼：

<code>








    
    
        
        
        
        <title>大風車DIY1/<title>
        
        
        
    
    
    
        
 

            
            

                
                

                

                

                

                

            

            
            

        


    

/<code>

4.如何將css拆開，單獨呢？大型項目都是css單獨一個文件夾，裡面一大堆css文件。

4.1 建一個fengche.css文件，將下面代碼複製進去，和風車-2.html放在同一個文件夾中。

fengche.css的代碼：

<code>#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);
}
}/<code>

4.2 風車-2.html的代碼：注意修改部分。

<code>



    
        
        <title>大風車DIY2/<title>
        
        <link> 

    
    
        

            

                

                

                

                

                

            

            

        


    
/<code>

怎麼樣？通俗易懂吧，看了後，立馬入門。

閱讀更多 易三一世 的文章

關鍵字: 詳解 拆分 CSS