老师帮我检查一下看看可不可以
来源：2-8 编程练习
Victor19950925
2019-05-09 17:12:01
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>2-3</title>
<style type="text/css">
/* 此处写代码*/
*{padding: 0;margin: 0;}
.china{width: 600px; height:400px; margin: 0 auto; background-color: red;position: relative;}
.c{
position: absolute;
left: 40px;
top: 80px;
width: 0;
height: 0;
border-width: 38px 55px;
border-style: solid;
border-color: yellow transparent transparent transparent;
}
.c2{
transform-origin: 50% 25%;
transform:rotate(72deg);
}
.c3{
transform-origin: 50% 25%;
transform:rotate(142deg);
}
.a2{
position:absolute;
left: 160px;
top:10px;
transform: scale(0.3)
}
.a2>.c1{
transform-origin: 50% 25%;
transform: rotate(-45deg);
}
.a2>.c2{
transform: rotate(27deg);
}
.a2>.c3{
transform: rotate(97deg);
}
.a3{
position:absolute;
left: 195px;
top:45px;
transform: scale(0.3)
}
.a3>.c1{
transform-origin: 50% 25%;
transform: rotate(-27deg);
}
.a3>.c2{
transform: rotate(45deg);
}
.a3>.c3{
transform: rotate(115deg);
}
.a4{
position:absolute;
left: 200px;
top:95px;
transform: scale(0.3)
}
.a5{
position:absolute;
left: 160px;
top:135px;
transform: scale(0.3)
}
.a5>.c1{
transform-origin: 50% 25%;
transform: rotate(30deg);
}
.a5>.c2{
transform: rotate(102deg);
}
.a5>.c3{
transform: rotate(172deg);
}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div class="china">
<div class="a1">
<div class="c1 c"></div>
<div class="c2 c"></div>
<div class="c3 c"></div>
</div>
<div class="a2">
<div class="c1 c"></div>
<div class="c2 c"></div>
<div class="c3 c"></div>
</div>
<div class="a3">
<div class="c1 c"></div>
<div class="c2 c"></div>
<div class="c3 c"></div>
</div>
<div class="a4">
<div class="c1 c"></div>
<div class="c2 c"></div>
<div class="c3 c"></div>
</div>
<div class="a5">
<div class="c1 c"></div>
<div class="c2 c"></div>
<div class="c3 c"></div>
</div>
</div>
</body>
</html>，我自己感觉写到一半后觉得写的很复杂，不简便，。。。想重新写一下，但是又要改各种数据。只有硬着头皮继续写下去了。
写回答
1回答
-
同学你好！
代码效果实现的很好~确实这个css动画是一个细致的活儿，所以写的会比较麻烦。
建议同学在写之前先想一下布局等等，不要着急直接写代码。可以多练习一下哦~
如果帮助到了你 欢迎采纳 祝学习愉快~
1
相似问题