鲜花献给最美劳动者

马黑黑

马黑黑

代码分享：

1. <style>
   
2. .outer {
   
3.         margin: auto;
   
4.         display: flex;
   
5.         justify-content: center;
   
6.         align-items: center;
   
7.         width: 300px;
   
8.         height: 300px;
   
9.         filter: drop-shadow(0px 0px 100px gray);
   
10.         perspective: 1800px;
    
11.         position: relative;
    
12. }
    
13. .flower {
    
14.         width: 50%;
    
15.         height: 50%;
    
16.         border-radius: 0 100%;
    
17.         background-color: #ccc;
    
18.         opacity: .85;
    
19.         transform-origin: 100% 100%;
    
20.         transform-style: preserve-3d;
    
21.         position: absolute;
    
22. }
    
23. </style>
    
24. 
    
25. <div class="outer"></div>
    
26. 
    
27. <script>
    
28. let outer = document.querySelector('.outer');
    
29. let str = '';
    
30. for(j=0; j< 8; j++) {
    
31.         let c1 = `#${Math.random().toString(16).substr(-6)}`;
    
32.         let c2 = `#${Math.random().toString(16).substr(-6)}`;
    
33.         str += `<div class='flower' style='background-image: linear-gradient(${c1}, ${c2}); transform: rotate(${45*j}deg);'></div>`;
    
34. }
    
35. outer.innerHTML = str;
    
36. </script>

复制代码

马黑黑

修改基点，就是如下这句（可以的话还有其他东东也可修改），

transform-origin: 100% 100%;

会得到意想不到的形态

加林森

老黑制作得真漂亮，赞！

梦油

黑黑朋友节日好！最美的鲜花，献给最美的劳动者。劳动者最光荣！

马黑黑

梦油 发表于 2022-5-1 17:48
黑黑朋友节日好！最美的鲜花，献给最美的劳动者。劳动者最光荣！

是的

马黑黑

加林森 发表于 2022-5-1 17:47
老黑制作得真漂亮，赞！

这个还看的过去吧

加林森

马黑黑 发表于 2022-5-1 17:51
这个还看的过去吧

相当漂亮的。

马黑黑

加林森 发表于 2022-5-1 17:59
相当漂亮的。

一般般的吧

加林森

马黑黑 发表于 2022-5-1 19:46
一般般的吧

不一般的。我喜欢你制作的。

马黑黑

加林森 发表于 2022-5-1 19:54
不一般的。我喜欢你制作的。

谢谢认同

红影

随机变色的花儿，真美啊

红影

马黑黑 发表于 2022-5-1 17:04
修改基点，就是如下这句（可以的话还有其他东东也可修改），

transform-origin: 100% 100%;

去试了，数值越大散得越开，越小越挤在一起

马黑黑

红影 发表于 2022-5-1 20:40
去试了，数值越大散得越开，越小越挤在一起

基点不仅仅是改大改小，而是改它处在元素的什么位置

马黑黑

红影 发表于 2022-5-1 20:32
随机变色的花儿，真美啊

一般美

加林森

马黑黑 发表于 2022-5-1 20:05
谢谢认同

不客气啊。

马黑黑

加林森 发表于 2022-5-1 21:27
不客气啊。

应该的

加林森

马黑黑 发表于 2022-5-1 21:53
应该的

明天来学习了，今天有点累了。

红影

马黑黑 发表于 2022-5-1 21:03
基点不仅仅是改大改小，而是改它处在元素的什么位置

嗯嗯，因为位置变化，导致形态发生变化。

红影

马黑黑 发表于 2022-5-1 17:04
修改基点，就是如下这句（可以的话还有其他东东也可修改），

transform-origin: 100% 100%;

看到你取 0 100% 变成了相框一样了