使用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
来区分,并且分别设置不同的背景颜色、位置和旋转角度来实现五颗不同颜色的环。
文章说明:
本文原创发布于探乎站长论坛,未经许可,禁止转载。
题图来自Unsplash,基于CC0协议。
该文观点仅代表作者本人,探乎站长论坛平台仅提供信息存储空间服务。