漂亮的叶子

山人

山人

代码

1. <style>
   
2. #mydiv {
   
3.         margin: 50px auto 0;
   
4.         width: 160px;
   
5.         height: 200px;
   
6.         display: grid;
   
7.         place-items: center;
   
8.         position: relative;
   
9.         animation: rot 6s infinite linear;
   
10. }
    
11. .leaf {
    
12.         position: absolute;
    
13.         width: 40px;
    
14.         height: 40px;
    
15.         border-radius: 0% 100%;
    
16.         background: linear-gradient(45deg,green,green 49.5%,snow,green 50.5%);
    
17. }
    
18. .leaf:nth-of-type(1) { border-radius: 50%; background: radial-gradient(snow,green 60%, green 0); }
    
19. @keyframes rot { to { transform: rotate(-360deg); } }
    
20. </style>
    
21. 
    
22. <div id="mydiv"><span class="leaf"></span></div>
    
23. 
    
24. <script>
    
25. let total = 12;
    
26. Array.from({length: total}).forEach( (item,key) => {
    
27.         let span = document.createElement('span');
    
28.         span.className = 'leaf';
    
29.         span.style.cssText += `
    
30.                 transform: rotate(${360/total*key}deg) translate(80px);
    
31.         `;
    
32.         mydiv.appendChild(span);
    
33. });
    
34. </script>

复制代码

梦缘

不错，感谢老师分享！

起个网名好难

山人 发表于 2023-4-19 20:38
代码

欣赏、学习！

红影

非常漂亮，欣赏山人好帖

小辣椒

这山人也是代码高手

雨中悄然

这叶子排列的确很漂亮

马黑黑

醉美水芙蓉 发表于 2023-4-20 07:15
代码高手！

早上好

马黑黑

雨中悄然 发表于 2023-4-22 12:19
这叶子排列的确很漂亮

整齐划一