|
|

楼主 |
发表于 2022-5-1 17:03
|
显示全部楼层
本帖最后由 马黑黑 于 2022-5-1 17:06 编辑
代码分享:
- <style>
- .outer {
- margin: auto;
- display: flex;
- justify-content: center;
- align-items: center;
- width: 300px;
- height: 300px;
- filter: drop-shadow(0px 0px 100px gray);
- perspective: 1800px;
- position: relative;
- }
- .flower {
- width: 50%;
- height: 50%;
- border-radius: 0 100%;
- background-color: #ccc;
- opacity: .85;
- transform-origin: 100% 100%;
- transform-style: preserve-3d;
- position: absolute;
- }
- </style>
- <div class="outer"></div>
- <script>
- let outer = document.querySelector('.outer');
- let str = '';
- for(j=0; j< 8; j++) {
- let c1 = `#${Math.random().toString(16).substr(-6)}`;
- let c2 = `#${Math.random().toString(16).substr(-6)}`;
- str += `<div class='flower' style='background-image: linear-gradient(${c1}, ${c2}); transform: rotate(${45*j}deg);'></div>`;
- }
- outer.innerHTML = str;
- </script>
复制代码
|
|