第七周总结
在本周的学习之中，我愈发的感觉前端的内容之广阔，知识量确实不少，但这些知识可以通过不同方式的应用实现各种各样的功能，就拿线面的一个花瓣来说。里面的东西确实不复杂，但实现的效果却是相当可观的
<style>
body{
background-color: black;
height: 1200px;
}
.wrap{
width: 300px;
height: 300px;
position: relative;
margin: 100px auto;
/* background-color: black; */
transform: rotate(45deg);
}
.hua07{
/* background-color: white; */
background: linear-gradient(to bottom right,red,rgb(240, 201, 94),yellow,green,rgb(22, 185, 190),blue,rgb(150, 22, 209));
}
.huaBan{
width: 300px;
height: 300px;
position: absolute;
border-radius: 0 300px 0 300px;
transform-origin:300px 300px;
opacity: 0.8;
transition: all 3s;
/* background-color: pink; */
}
.wrap:hover .hua01{
transform: rotate(30deg);
background-color: rgb(22, 185, 190);
}
.wrap:hover .hua02{
transform: rotate(60deg);
background-color: blue;
}
.wrap:hover .hua03{
transform: rotate(90deg);
background-color: rgb(150, 22, 209);
}
.wrap:hover .hua04{
transform: rotate(-30deg);
background-color: yellow;
}
.wrap:hover .hua05{
transform: rotate(-60deg);
background-color: rgb(240, 201, 94);
}
.wrap:hover .hua06{
transform: rotate(-90deg);
background-color: red;
}
.wrap:hover .hua07{
background: linear-gradient(to bottom,green,green);
}
</style>```
```html
<body>
<div class="wrap">
<div class="huaBan hua01"></div>
<div class="huaBan hua02"></div>
<div class="huaBan hua03"></div>
<div class="huaBan hua04"></div>
<div class="huaBan hua05"></div>
<div class="huaBan hua06"></div>
<div class="huaBan hua07"></div>
</div>
</body>
接触到的第一感觉时我怎么没想到还可以这么玩，若是想到了是不是会想办法去实现呢，这可能它的好玩之处吧，尽管现在水平以及想法还是还不行，还是用的别人的模板，照葫芦画瓢，不过当功能实现后并且加入了一点自己的想法，确实可以在那儿玩上那么一会儿！