老师麻烦帮检查一下代码的正确性和规范性

老师麻烦帮检查一下代码的正确性和规范性

具体遇到的问题

老师我的思路大致是这样的:

1.制作三角形

2.调整三角形的位置,使其组合为五角星

3.调整每个五角星的位置,放置到红色背景上,组成红旗

我遇到的问题是这样的:

1.组成的五角星不匀称,目测每个尖角的大小好像不一致,
调整三角形组合的角度,又会对不齐。

2.调增小五角星的位置,全靠手动调整像素,感觉这样是不可行的,有没有更好的办法呢

3.调整五角星后,想给四个小五角星分别设置角度,可是不知道以哪里为中心,而且我在代码中尝试调整,可旋转的角度不起效果。

希望老师帮我修改一下,能够更贴合设计图的效果。

如果老师您有更好的思路,提示我一下。我绞尽脑汁写了这一串代码,效果出来后,感觉丑的很(无奈~)

粘贴全部相关代码,切记添加代码注释(请勿截图)

<!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 text="style/sheels">
        * {
            margin: 0;
            padding: 0;
        }
        
        .box {
            width: 600px;
            height: 400px;
            background-color: red;
            margin-top: 50px;
            margin-left: 50px;
            perspective: 600px;
            position: relative;
        }
        /* 上面的三角 */
        
        .angle1 {
            width: 0px;
            height: 0px;
            border: 100px solid transparent;
            border-top-color: #ffff00;
            position: absolute;
            margin-top: 100px;
        }
        /* 右侧三角 */
        
        .angle2 {
            width: 0px;
            height: 0px;
            border: 100px solid transparent;
            border-right-color: #ffff00;
            position: absolute;
            transform: rotateZ(-26deg) translateX(-50px);
            margin-top: 60px;
        }
        /* 左侧三角 */
        
        .angle3 {
            width: 0px;
            height: 0px;
            border: 100px solid transparent;
            border-left-color: #ffff00;
            position: absolute;
            transform: rotateZ(26deg) translateX(50px);
            margin-top: 60px;
        }
        
        .star1 {
            position: relative;
            transform: scale(0.45);
            padding-top: 70px;
            margin-left: -150px;
        }
        
        .star2 {
            position: relative;
            /* transform: rotateX(30deg) center center; */
            transform: scale(0.18);
            top: -55px;
            margin-left: -130px;
        }
        
        .star3 {
            position: relative;
            /* transform: rotateX(30deg) center center; */
            transform: scale(0.18);
            top: 0px;
            margin-left: -70px;
        }
        
        .star4 {
            position: relative;
            /* transform: rotateX(30deg) center center; */
            transform: scale(0.18);
            top: 60px;
            margin-left: -70px;
        }
        
        .star5 {
            position: relative;
            /* transform: rotateX(30deg) center center; */
            transform: scale(0.18);
            top: 120px;
            margin-left: -120px;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="star1">
            <div class="angle1"></div>
            <div class="angle2"></div>
            <div class="angle3"></div>
        </div>
        <div class="star2">
            <div class="angle1"></div>
            <div class="angle2"></div>
            <div class="angle3"></div>
        </div>
        <div class="star3">
            <div class="angle1"></div>
            <div class="angle2"></div>
            <div class="angle3"></div>
        </div>
        <div class="star4">
            <div class="angle1"></div>
            <div class="angle2"></div>
            <div class="angle3"></div>
        </div>
        <div class="star5">
            <div class="angle1"></div>
            <div class="angle2"></div>
            <div class="angle3"></div>
        </div>
    </div>


</body>


</html>

</html>

正在回答

登陆购买课程后可参与讨论,去登陆

2回答

同学你好,老师也是慢慢调试做出来的。做这个没有技巧,只能手动调试哦!

祝学习愉快~

好帮手慕码 2020-11-12 11:17:29

同学你好,整体效果是可以的。本练习题主要考察rotate、translate  、scale、transform等方法的掌握情况,所以对于实现的效果来说不是最主要的。而且调整位置、旋转的角度等没有具体的方法,所以手动调整像素是最简单直接的。如果想设置旋转

可以参考如下代码,实现的五角星会更美观一些:

http://img1.sycdn.imooc.com//climg/5faca6a00908cfff03830179.jpg

http://img1.sycdn.imooc.com//climg/5faca6b209b5e61104820804.jpg

祝学习愉快~

  • 提问者 日拱一卒_ #1
    好的,谢谢老师的解答
    2020-11-12 11:21:13
  • 提问者 日拱一卒_ #2
    老师你是怎么想的,太神奇了 几行代码就做出来了,思路还很清晰,太厉害了(๑•̀ㅂ•́)و✧
    2020-11-12 13:34:56
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师