第七周总结

最新推荐文章于 2022-05-08 21:44:53 发布

Flying____fish

最新推荐文章于 2022-05-08 21:44:53 发布

阅读量129

点赞数

分类专栏：个人总结文章标签： css html5

本文链接：https://blog.csdn.net/Flying____fish/article/details/114207180

版权

个人总结专栏收录该内容

35 篇文章 0 订阅

订阅专栏

第七周总结

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

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

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

Flying____fish

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
第七周总结

第七周总结在本周的学习之中，我愈发的感觉前端的内容之广阔，知识量确实不少，但这些知识可以通过不同方式的应用实现各种各样的功能，就拿线面的一个花瓣来说。里面的东西确实不复杂，但实现的效果却是相当可观的<style> body{ background-color: black; height: 1200px; } .wrap{ width: 300px; height: 300px; position
复制链接

扫一扫

专栏目录