首頁 > 開發者 > JavaScript
使用C3的一些新屬性繪製Google瀏覽器的表徵圖，c3繪製Google瀏覽器
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0; } body { background-color: lightskyblue; } .container { width: 400px; height: 400px; border: 1px solid #999; box-sizing: border-box; border-radius: 50%; margin: 200px auto; position: relative; overflow: hidden; background-color: yellow; transform: rotate(-80deg); } .container::before { content: ""; width: 100px; height: 100px; /*border: 1px solid black;*/ background-color: deepskyblue; border-radius: 50%; box-shadow: 0px 0px 0px 10px whitesmoke; position: absolute; top: 150px; left: 150px; z-index: 1; } .one { width: 300px; height: 300px; /*border: 1px solid black;*/ position: absolute; transform: skew(-30deg); left: -12px; top: -100px; background-color: green; } .one::before { content: ""; width: 300px; height: 200px; /*border: 1px solid black;*/ position: absolute; top: 159px; left: 30px; background-color: green; } .two { width: 300px; height: 300px; /*border: 1px solid black;*/ position: absolute; transform: skew(-30deg, 60deg); left: 286px; top: 160px; background-color: red; } .two::before { content: ""; width: 40px; height: 300px; /*border: 1px solid black;*/ position: absolute; top: 26px; left: -8px; transform: rotate(10deg); background-color: red; } @keyframes autoRotate { from { } to { transform: rotate(3600deg); } } .animate { animation: autoRotate 30s linear infinite; } </style></head><body><div class="container animate"> <div class="one"></div> <div class="two"></div> <div class="three"></div></div></body></html>
//利用Css3裡面的一些新屬性，做了一個Google瀏覽器表徵圖
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
