1.前端之路-一个五星红旗
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
.huabu{
height: 200px;
width: 300px;
background-color: red;
margin: 0 auto;
}
.xingxing{
display: block;
color: yellow;
position: absolute;
}
.daxingxing{
transform: scale(3) translate(15px,15px);
}
.xiaoxingxing1{
transform: translate(100px,10px) rotate(15deg);
}
.xiaoxingxing2{
transform: translate(120px,40px);
}
.xiaoxingxing3{
transform: translate(120px,70px);
}
.xiaoxingxing4{
transform: translate(100px,100px) rotate(165deg);
}
</style>
<body>
<div class="huabu">
<div class="daxingxing xingxing">
★
</div>
<div class="xiaoxingxing1 xingxing">
★
</div>
<div class="xiaoxingxing2 xingxing">
★
</div>
<div class="xiaoxingxing3 xingxing">
★
</div>
<div class="xiaoxingxing4 xingxing">
★
</div>
</div>
</body>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
.huabu{
height: 200px;
width: 300px;
background-color: red;
margin: 0 auto;
}
.xingxing{
display: block;
color: yellow;
position: absolute;
}
.daxingxing{
transform: scale(3) translate(15px,15px);
}
.xiaoxingxing1{
transform: translate(100px,10px) rotate(15deg);
}
.xiaoxingxing2{
transform: translate(120px,40px);
}
.xiaoxingxing3{
transform: translate(120px,70px);
}
.xiaoxingxing4{
transform: translate(100px,100px) rotate(165deg);
}
</style>
<body>
<div class="huabu">
<div class="daxingxing xingxing">
★
</div>
<div class="xiaoxingxing1 xingxing">
★
</div>
<div class="xiaoxingxing2 xingxing">
★
</div>
<div class="xiaoxingxing3 xingxing">
★
</div>
<div class="xiaoxingxing4 xingxing">
★
</div>
</div>
</body>
</html>