论坛 › 马黑黑教程专版 › 漂亮的叶子

山人 发表于 2023-4-19 20:28

漂亮的叶子

本帖最后由 山人 于 2023-4-19 20:37 编辑 <br /><br /><style>
#mydiv {
        margin: 50px auto 0;
        width: 160px;
        height: 200px;
        display: grid;
        place-items: center;
        position: relative;
        animation: rot 6s infinite linear;
}
.leaf {
        position: absolute;
        width: 40px;
        height: 40px;
        border-radius: 0% 100%;
        background: linear-gradient(45deg,green,green 49.5%,snow,green 50.5%);
}
.leaf:nth-of-type(1) { border-radius: 50%; background: radial-gradient(snow,green 60%, green 0); }
@keyframes rot { to { transform: rotate(-360deg); } }
</style>

<div id="mydiv"><span class="leaf"></span></div>

<script>
let total = 12;
Array.from({length: total}).forEach( (item,key) => {
        let span = document.createElement('span');
        span.className = 'leaf';
        span.style.cssText += `
                transform: rotate(${360/total*key}deg) translate(80px);
        `;
        mydiv.appendChild(span);
});
</script>

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

代码
<style>
#mydiv {
        margin: 50px auto 0;
        width: 160px;
        height: 200px;
        display: grid;
        place-items: center;
        position: relative;
        animation: rot 6s infinite linear;
}
.leaf {
        position: absolute;
        width: 40px;
        height: 40px;
        border-radius: 0% 100%;
        background: linear-gradient(45deg,green,green 49.5%,snow,green 50.5%);
}
.leaf:nth-of-type(1) { border-radius: 50%; background: radial-gradient(snow,green 60%, green 0); }
@keyframes rot { to { transform: rotate(-360deg); } }
</style>

<div id="mydiv"><span class="leaf"></span></div>

<script>
let total = 12;
Array.from({length: total}).forEach( (item,key) => {
        let span = document.createElement('span');
        span.className = 'leaf';
        span.style.cssText += `
                transform: rotate(${360/total*key}deg) translate(80px);
        `;
        mydiv.appendChild(span);
});
</script>

梦缘 发表于 2023-4-19 20:44

不错，感谢老师分享！{:4_204:}

起个网名好难 发表于 2023-4-19 21:31

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

欣赏、学习！

红影 发表于 2023-4-19 23:10

非常漂亮，欣赏山人好帖{:4_187:}

小辣椒 发表于 2023-4-19 23:50

这山人也是代码高手{:4_178:}

醉美水芙蓉 发表于 2023-4-20 07:15

雨中悄然 发表于 2023-4-22 12:19

这叶子排列的确很漂亮

马黑黑 发表于 2023-4-29 07:37

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

早上好

马黑黑 发表于 2023-4-29 07:37

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

整齐划一

查看完整版本: 漂亮的叶子