<!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里面的一些新属性，做了一个谷歌浏览器图标