css3實現奧運五環

2021-08-21 18:37:52 字數 793 閱讀 6502

五環可以利用五個統計的div來實現,要實現五環的巢狀關係,需要分別給這五個div加偽元素。

這裡主要用到了兩個css3屬性:

1. z-index調各環的層級關係

2. transparent設定透明度

具體**:

lang="en">

charset="utf-8">

titletitle>

* div

div::after

.blue

.blue

::after

.black

.black

::after

.red

.red

::after

.yellow

.yellow

::after

.green

.green

::after

style>

head>

class="blue">

div>

class="black">

div>

class="red">

div>

class="yellow">

div>

class="green">

div>

body>

html>效果圖:

奧運五環的繪製

最終效果圖 關鍵操作 在 選區 功能中結合快捷鍵shift畫出選取圓形選取 滑鼠右擊選擇 變換選區 同時按下alt shift,畫出同一圓心的圓形 選中要複製圖形所在的圖層,然後將滑鼠移到目標圖形,並按下alt鍵,同時實現圖層和圖形的新建複製 注意點 畫好外部圓形選區,記得先上色,然後再使用 選區變...

Python繪製奧運五環

繪製奧運五環主要涉及到python中的turtle繪相簿運用 turtle.forward distance 向當前畫筆方向移動distance畫素長度 turtle.backward distance 向當前畫筆相反方向移動distance畫素長度 turtle.right degree 順時針移...

查詢奧運五環色的位置

problem sets 1336948160465235968 problems 1336959055094378496不檢查我就直接庫函式,略略略 strcmp函式本質上是利用指標構造的函式,可以點開頭檔案康康學習一下 include include intmain void char sort...