20190705作业

CSS部分

实例

/*body{*/
/*    border: 1px solid red;*/
/*    position: absolute;*/
/*}*/
.zy1{
    width: 100px;
    height: 100px;
    background-color: #ff7e05;
    border-radius: 0 100px;
    transform: rotate(29deg);
    position: absolute;
    top: 41px;
    left: 358px;
}
.zy2{
     width: 100px;
     height: 100px;
    background-color: #ff730b;
    border-radius: 0 100px;
    position: absolute;
    top: 38px;
    left: 384px;
    transform: rotate(49deg);
 }
.zy3{
    width: 100px;
    height: 100px;
    background-color: #ff134c;
    border-radius: 0 100px;
    position: absolute;
    top: 57px;
    left: 323px;
    transform: rotate(1deg);
}
.zy4{
    width: 100px;
    height: 100px;
    background-color: #ff0c6e;
    border-radius: 0 100px;
    position: absolute;
    top: 37px;
    left: 415px;
    transform: rotate(-114deg);

}
.zy5{
    width: 100px;
    height: 100px;
    background-color: #cf44ff;
    border-radius: 0 100px;
    position: absolute;
    top: 64px;
    left: 447px;
    transform: rotate(-87deg);
}
.zy6{
    width: 100px;
    height: 100px;
    background-color: #435aff;
    border-radius: 0 100px;
    position: absolute;
    top: 98px;
    left: 471px;
    transform: rotate(-64deg);
}
.zy7{
    width: 100px;
    height: 100px;
    background-color: #30b3ff;
    border-radius: 0 100px;
    position: absolute;
    top: 141px;
    left: 477px;
    transform: rotate(-34deg);
}
.zy15{
    width: 100px;
    height: 100px;
    background-color: #1fddff;
    border-radius: 0 100px;
    position: absolute;
    top: 175px;
    left: 419px;
    transform: rotate(-159deg);
}
.zy16{
    width: 100px;
    height: 100px;
    background-color: #24ffbc;
    border-radius: 0 100px;
    position: absolute;
    top: 175px;
    left: 453px;
    transform: rotate(-191deg);
}
.zy8{
    width: 100px;
    height: 100px;
    background-color: #23ff8c;
    border-radius: 0 100px;
    position: absolute;
    top: 175px;
    left: 391px;
    transform: rotate(-119deg);
}
.zy10{
    width: 100px;
    height: 100px;
    background-color: #20ff59;
    border-radius: 0 100px;
    position: absolute;
    top: 172px;
    left: 352px;
    transform: rotate(-107deg);
}
.zy11{
    width: 100px;
    height: 100px;
    background-color: #4eff1b;
    border-radius: 0 100px;
    position: absolute;
    top: 148px;
    left: 319px;
    transform: rotate(-87deg);
}
.zy12{
    width: 100px;
    height: 100px;
    background-color: #c8ff2b;
    border-radius: 0 100px;
    position: absolute;
    top: 93px;
    left: 304px;
    transform: rotate(-32deg);
}
.zy13{
    width: 100px;
    height: 100px;
    background-color: #ffaf11;
    border-radius: 0 100px;
    position: absolute;
    top: 126px;
    left: 306px;
    transform: rotate(-64deg);
}

.zy9{
    width: 100px;
    height: 100px;
    background-color: #f6ff0a;
    border-radius: 50%;
    position: absolute;
    top: 109px;
    left: 386px;

}















.zy14 {
    margin:600px;
    width: 100px;
    height: 100px;
    border: 20px solid #333;
    border-left-color:#00c850;
    border-right-color:yellow;
    border-bottom-color:blue;
    border-top-color:green;
    border-radius:50%;


}
#box{position:relative; width:200px;margin:200px auto;}
#div{
    border-radius:0px50%;
    width:100px;
    height:100px;background:red;
    margin:50px auto;
    transform:rotate(45deg);
    position:absolute;top:-80px;z-index:20;
}
#div2{border-radius:0px50%;
    width:100px;
    height:100px;background:red;
    margin:50px auto;
    transform:rotate(-45deg);
    position:absolute;left: -80px;z-index:20;}
#div3{
    border-radius:0px50%;
    width:100px;
    height:100px;background:red;
    margin:50px auto;
    transform:rotate(-45deg);
    position:absolute;left:80px;z-index:20;
}
#div4{border-radius:0px50%;
    width:100px;
    height:100px;background:red;
    margin:50px auto;
    transform:rotate(45deg);
    position:absolute;top:80px;z-index:20;}
#div9{ border-left:10px solid green;
    height:400px; position:absolute;
    top:150px;left:45px;z-index:15;}
#div8{border-radius:0px50%;
    width:100px;
    height:100px;background:green;
    margin:50px auto;
    transform:rotate(0deg);
    position:absolute;top:200px;
    left:-45px;}
#div7{border-radius:0px50%;
    width:100px;
    height:100px;background:green;
    margin:50px auto;
    transform:rotate(90deg);
    position:absolute;top:280px;
    left:50px;}
#div5{
    width:70px;
    height:70px;background:yellow;position:absolute;z-index:21;border-radius:50%;top:60px;left:15px;overflow:hidden;box-shadow:0 0 50px yellow;}
#max{
    width:250px;
    height:100px;border-radius:50%;position:absolute;z-index:10;top:520px;
    background:#ccc;left:-70px;
    background:linear-gradient(#FFD39B,#FFE7BA)
}
.box5{
    width: 0;
    height: 0;
    border: 60px solid #f33936;
    border-radius: 100%;
    border-right-color: transparent;
}
.box2{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color:#f33936 ;
    position: absolute;
    top: 1378px;
    left: 129px;
}

html部分

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>0705作业</title>
    <link rel="stylesheet" href="static/css/zuoye.css">
</head>
<body>
<div class="zy1"></div>
<div class="zy2"></div>
<div class="zy3"></div>
<div class="zy4"></div>
<div class="zy5"></div>
<div class="zy6"></div>
<div class="zy7"></div>
<div class="zy8"></div>

<div class="zy10"></div>
<div class="zy11"></div>
<div class="zy12"></div>
<div class="zy13"></div>
<div class="zy14"></div>
<div class="zy15"></div>
<div class="zy16"></div>
<div class="zy17"></div>
<div class="zy9"></div>

<div id="box">
    <div id="div"></div>
    <div id="div2"></div>
    <div id="div3"></div>
    <div id="div4"></div>
    <div id="div5"></div>
    <div id="div9"></div>
    <div id="div8"></div>
    <div id="div7"></div>
    <div id="max"></div>
</div>
<div class="box5"></div>
<div class="box2"></div>



</body>
</html>