第七周总结

第七周总结

在本周的学习之中,我愈发的感觉前端的内容之广阔,知识量确实不少,但这些知识可以通过不同方式的应用实现各种各样的功能,就拿线面的一个花瓣来说。里面的东西确实不复杂,但实现的效果却是相当可观的

<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>

接触到的第一感觉时我怎么没想到还可以这么玩,若是想到了是不是会想办法去实现呢,这可能它的好玩之处吧,尽管现在水平以及想法还是还不行,还是用的别人的模板,照葫芦画瓢,不过当功能实现后并且加入了一点自己的想法,确实可以在那儿玩上那么一会儿!

上一篇:弹性盒子的使用(flexbox)(父元素的使用)


下一篇:今日总结