css6写奥运五环

使用CSS6写奥运五环 pre { background-color: #f7f7f7; border: 1px solid #ccc; font-size: 14px; line-height: 1.5; margin-bottom: 15px; padding: 10px; overflow: auto; word-wrap: break-word; } p { font-size: 16px; line-height: 1.8; } .ring-container { position: relative; width: 400px; margin: 0 auto; margin-top: 50px; } .ring { position: absolute; width: 100px; height: 100px; border-radius: 50%; } .ring1 { background-color: #0093dd; top: 60px; left: 0; transform: rotate(-30deg); } .ring2 { background-color: #f4c300; top: 60px; left: 80px; transform: rotate(42deg); } .ring3 { background-color: #00a651; top: -10px; left: 160px; transform: rotate(-30deg); } .ring4 { background-color: #df1616; top: 60px; left: 160px; transform: rotate(42deg); } .ring5 { background-color: #791f9c; top: 60px; left: 80px; transform: rotate(-30deg); }

奥运五环是国际奥组委会标志之一，它代表着五大洲：欧洲、亚洲、非洲、美洲和大洋洲。下面我们就使用CSS6来实现奥运五环的效果。

<div class="ring-container">
    <div class="ring ring1"></div>
    <div class="ring ring2"></div>
    <div class="ring ring3"></div>
    <div class="ring ring4"></div>
    <div class="ring ring5"></div>
</div> 

我们首先创建一个容器，然后在容器中创建五个圆环，每一个圆环都是一个 div 元素，并且使用 .ring 类名来为这些元素设置共同的 CSS 样式。五个圆环分别使用不同的类名 .ring1 ~ .ring5 来区分，并且分别设置不同的背景颜色、位置和旋转角度来实现五颗不同颜色的环。