老师看看还有哪里可以优化的
来源：2-13 编程练习
烟波皓渺
2021-03-05 23:14:50
老师，帮忙看看还有哪里可以优化的。
这个题感觉就是硬调的位置，本来还想用浮动先定个位的，最后发现还是滚动像素数值进行调整。
另外，任务中提到的定义两个伪元素 是什么意思？ 是还有其他方法吗？我想象不到这里怎么应用伪元素
相关代码：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>2-3</title>
<style type="text/css">
/* 此处写代码*/
*{
margin:0;
padding:0;
}
.box {
width: 300px;
height: 200px;
background-color:red;
perspective: 300px;
}
p {
color: gold;
width: 25px;
height: 25px;
text-align: center;
line-height: 25px;
}
.p1 {
width: 100px;
height: 100px;
line-height: 100px;
transform: scale(5) translate(0px,0px)
}
.p2 {
transform: translate(76px,-99px) rotate(-46deg);
}
.p3 {
transform: translate(94px,-101px) rotate(-24deg);
}
.p4 {
transform: translate(96px,-99px) rotate(0deg);
}
.p5 {
transform: translate(80px,-101px) rotate(30deg);
</style>
</head>
<body>
<!-- 此处写代码 -->
<div class="box">
<p class="p1">★</p>
<p class="p2">★</p>
<p class="p3">★</p>
<p class="p4">★</p>
<p class="p5">★</p>
</div>
</body>
</html>
写回答
1回答
-
好帮手慕张
2021-03-06
同学你好，代码效果是正确，也不需要优化了。
使用伪元素实现思路为：在一个元素的前面后面分别添加一个伪元素形成的三角形，加上实际元素一共三个三角形，然后通过三个三角形的旋转实现五角星，同学可参考以下代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 300px;
height: 200px;
background-color: red;
margin: 0 auto;
}
.box .triangel {
width: 0;
height: 0;
border: 18px solid transparent;
border-top: 12px solid rgb(255, 255, 0);
position: relative;
transform: rotate(0deg);
}
.box .triangel::before {
content: "";
position: absolute;
width: 0;
height: 0;
top: -21px;
left: -23px;
border: 18px solid transparent;
border-right: 12px solid rgb(255, 255, 0);
transform: rotate(-20deg);
}
.box .triangel::after {
content: "";
position: absolute;
width: 0;
height: 0;
top: -21px;
left: -7px;
border: 18px solid transparent;
border-left: 12px solid rgb(255, 255, 0);
transform: rotate(20deg);
}
.box .triangel:nth-child(1) {
transform: scale(1.2) translateX(20px) translateY(30px);
}
.box .triangel:nth-child(2) {
transform: scale(0.5) rotate(15deg) translateX(118px) translateY(-80px);
}
.box .triangel:nth-child(3) {
transform: scale(0.5) rotate(15deg) translateX(131px) translateY(-32px);
}
.box .triangel:nth-child(4) {
transform: scale(0.5) rotate(38deg) translateX(51px) translateY(-215px);
}
.box .triangel:nth-child(5) {
transform: scale(0.5) translateX(177px) translateY(-148px)
}
</style>
</head>
<body>
<div class="box">
<div class="triangel "></div>
<div class="triangel "></div>
<div class="triangel "></div>
<div class="triangel "></div>
<div class="triangel "></div>
</div>
</body>
</html>祝学习愉快！
1
相似问题