簡介這篇文章主要介紹了Css Html 大風車(示例代碼)以及相關的經驗技巧，文章約3675字，瀏覽量138，點贊數2，值得參考！

div{ border-radius: 50%;position: absolute; }

.red{

border-top:100px solid red;

border-right: 100px solid transparent;

border-bottom: 100px solid transparent;

border-left: 100px solid red;

transform:rotate(-45deg);

left:150px;

top:50px;

}

.yellow{

border-top:100px solid yellow;

border-right: 100px solid transparent;

border-bottom: 100px solid transparent;

border-left: 100px solid yellow;

left:250px;

top:150px;

transform:rotate(45deg);

}

.pink{

border-top:100px solid pink;

border-right: 100px solid transparent;

border-bottom: 100px solid transparent;

border-left: 100px solid pink;

left:150px;

top:250px;

transform:rotate(135deg);

}

.cyna{

border-top:100px solid cyan;

border-right: 100px solid transparent;

border-bottom: 100px solid transparent;

border-left: 100px solid cyan;

left:50px;

top:150px;

transform:rotate(-135deg);

}

@keyframes run{

from{transform: rotate(0deg);}

to{transform: rotate(360deg);}

}

@-webkit-keyframes run{

from{transform: rotate(0deg);}

to{transform: rotate(360deg);}

}

.wrap{

width: 500px;

height: 500px;

line-height: 500px;

text-align: center;

border-radius: 0;

position: relative;

margin:0 auto;

animation:run 2s linear infinite;

}

.limb{

width: 10px;

height: 300px;

border-radius: 0;

background-color: #000;

margin: 0 auto;

left: 245px;

top: 0;

margin-top: -250px;

position: static;

z-index: -1;

}

總結

以上是生活随笔為你收集整理的html风车相册代码,Css Html 大风车(示例代码)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。