色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

用css3寫一個五星紅旗

江奕云2年前9瀏覽0評論

中國國旗是五星紅旗,它有特殊的寓意和意義。 如今,我們可以使用CSS3來設置五星紅旗的樣式,讓它在網頁上展現。

.flag {
width: 300px;
height: 200px;
background-color: red;
position: relative;
}
.flag:before {
content: "";
width: 250px;
height: 150px;
background-color: yellow;
position: absolute;
top: 25px;
left: 25px;
}
.flag:after {
content: "";
width: 20px;
height: 20px;
background-color: yellow;
border-radius: 50%;
position: absolute;
top: calc(50% - 10px);
left: 40px;
}
.flag .star {
width: 60px;
height: 60px;
background-color: yellow;
position: absolute;
transform: rotate(45deg);
}
.flag .star:before,
.flag .star:after {
content: "";
width: 0px;
height: 0px;
border: 30px solid yellow;
border-radius: 50%;
position: absolute;
top: -30px;
left: -30px;
}
.flag .star:before {
border-top-color: transparent;
border-right-color: transparent;
}
.flag .star:after {
border-bottom-color: transparent;
border-left-color: transparent;
}
.flag .star1 {
transform: rotate(18deg);
top: calc(50% - 30px);
left: 60px;
}
.flag .star2 {
transform: rotate(90deg);
top: calc(50% - 30px);
left: 110px;
}
.flag .star3 {
transform: rotate(162deg);
top: calc(50% - 30px);
left: 60px;
}
.flag .star4 {
transform: rotate(234deg);
top: calc(50% - 30px);
left: 110px;
}
.flag .star5 {
transform: rotate(306deg);
top: calc(50% - 30px);
left: 60px;
}

代碼的實現看似復雜,但細心的你一定可以理解,下面是五星紅旗的HTML代碼:

<div class="flag">
<div class="star star1"></div>
<div class="star star2"></div>
<div class="star star3"></div>
<div class="star star4"></div>
<div class="star star5"></div>
</div>

在網頁中,這段代碼應該被放在<style>標簽內以保證其樣式生效。這樣我們就可以在頁面上看到一個美麗的五星紅旗了!