论坛 › 马黑黑教程专版 › CSS三叶草代码分享

马黑黑 发表于 2023-2-4 10:55

CSS三叶草代码分享

本帖最后由 马黑黑 于 2023-2-4 10:59 编辑 <br /><br /><style>
.chj_code {
        position: relative;
        margin: 10px 0 10px 60px;
        border-left: 2px solid tan;
        font: normal 16px/20px Consolas, Monaco, monospace;
}
.chj_code > p {
        margin: 3px 0 3px 10px;
        position: relative;
        white-space: pre-wrap;
        tab-size: 4;
}
.chj_code > p::before {
        position: absolute;
        width: 40px;
        left: -55px;
        content: attr(data-line);
        text-align: right;
        color: #ccc;
}
</style>

<div class="chj_code">
<p>&lt;style&gt;</p>
<p><span style="color: red;">.mplayer </span>{</p>
<p>        <span style="color: blue;">margin</span>: auto;</p>
<p>        <span style="color: blue;">top</span>: 100px;</p>
<p>        <span style="color: blue;">position</span>: relative;</p>
<p>        <span style="color: blue;">width</span>: 200px;</p>
<p>        <span style="color: blue;">height</span>: 200px;</p>
<p>        <span style="color: blue;">cursor</span>: pointer;</p>
<p>        <span style="color: blue;">filter</span>: drop-shadow(10px 10px 20px hsla(0,0%,0%,.75));</p>
<p>        <span style="color: blue;">animation</span>: spin 10s infinite linear;</p>
<p>}</p>
<p><span style="color: red;">.leaf </span>{</p>
<p>        <span style="color: blue;">position</span>: absolute;</p>
<p>        <span style="color: blue;">width</span>: 50%;</p>
<p>        <span style="color: blue;">height</span>: 50%;</p>
<p>        <span style="color: blue;">border-radius</span>: 0 100%;</p>
<p>        <span style="color: blue;">background</span>: olive linear-gradient(-20deg,yellow,green);</p>
<p>        <span style="color: blue;">transform-origin</span>: 98% 98%;</p>
<p>}</p>
<p><span style="color: red;">.leaf:nth-of-type(1) </span>{</p>
<p>        <span style="color: blue;">transform</span>: rotate(0);</p>
<p>}</p>
<p><span style="color: red;">.leaf:nth-of-type(2) </span>{</p>
<p>        <span style="color: blue;">transform</span>: rotate(120deg);</p>
<p>}</p>
<p><span style="color: red;">.leaf:nth-of-type(3) </span>{</p>
<p>        <span style="color: blue;">transform</span>: rotate(240deg);</p>
<p>}</p>
<p><br></p>
<p><span style="color: red;">@keyframes spin </span>{</p>
<p>        to { <span style="color: blue;">transform</span>: rotate(360deg); }</p>
<p>}</p>
<p>&lt;/style&gt;</p>
<p><br></p>
<p>&lt;<span style="color:darkred">div</span> <span style="color: red">class</span><span style="color: blue">=</span><span style="color: magenta">"mplayer"</span>&gt;</p>
<p>        &lt;<span style="color:darkred">span</span> <span style="color: red">class</span><span style="color: blue">=</span><span style="color: magenta">"leaf"</span>&gt;&lt;<span style="color: darkred">/span</span>&gt;</p>
<p>        &lt;<span style="color:darkred">span</span> <span style="color: red">class</span><span style="color: blue">=</span><span style="color: magenta">"leaf"</span>&gt;&lt;<span style="color: darkred">/span</span>&gt;</p>
<p>        &lt;<span style="color:darkred">span</span> <span style="color: red">class</span><span style="color: blue">=</span><span style="color: magenta">"leaf"</span>&gt;&lt;<span style="color: darkred">/span</span>&gt;</p>
<p>&lt;<span style="color: darkred">/div</span>&gt;</p>
</div>

<script>
(function setLineNum() {
        let code_papas = document.querySelectorAll('.chj_code');
        Array.from(code_papas).forEach( (item,key) => {
                let pps = item.children;
                Array.from(pps).forEach( (p,pkey) => {
                        p.setAttribute('data-line', pkey + 1);
                });
        });       
})();
</script>

马黑黑 发表于 2023-2-4 10:56

<style>
.mplayer {
        margin: auto;
        top: 100px;
        position: relative;
        width: 200px;
        height: 200px;
        cursor: pointer;
        filter: drop-shadow(10px 10px 20px hsla(0,0%,0%,.75));
        animation: spin 10s infinite linear;
}
.leaf {
        position: absolute;
        width: 50%;
        height: 50%;
        border-radius: 0 100%;
        background: olive linear-gradient(-20deg,yellow,green);
        transform-origin: 98% 98%;
}
.leaf:nth-of-type(1) {
        transform: rotate(0);
}
.leaf:nth-of-type(2) {
        transform: rotate(120deg);
}
.leaf:nth-of-type(3) {
        transform: rotate(240deg);
}

@keyframes spin {
        to {transform: rotate(360deg); }
}
</style>

<div class="mplayer">
        <span class="leaf"></span>
        <span class="leaf"></span>
        <span class="leaf"></span>
</div>

红影 发表于 2023-2-4 11:16

三叶草，三个叶瓣平分360度。这个配色真漂亮，好像当中的特别亮{:4_187:}

红影 发表于 2023-2-4 11:17

transform-origin: 98% 98%; 这个为什么不是100%？

起个网名好难 发表于 2023-2-4 11:39

红影 发表于 2023-2-4 11:17
transform-origin: 98% 98%; 这个为什么不是100%？

三片叶子略有重合看起来效果更好些。

醉美水芙蓉 发表于 2023-2-4 11:45

马黑黑 发表于 2023-2-4 11:55

醉美水芙蓉 发表于 2023-2-4 11:45
记得老师以前分享过，但是这个更漂亮！

原理差不多

马黑黑 发表于 2023-2-4 11:56

红影 发表于 2023-2-4 11:16
三叶草，三个叶瓣平分360度。这个配色真漂亮，好像当中的特别亮

和过去的做法原理一致，不同的是一些小小的细节

马黑黑 发表于 2023-2-4 11:56

起个网名好难 发表于 2023-2-4 11:39
三片叶子略有重合看起来效果更好些。

是这个道理

马黑黑 发表于 2023-2-4 11:57

红影 发表于 2023-2-4 11:17
transform-origin: 98% 98%; 这个为什么不是100%？

100%也行，三张叶子会有些离散

红影 发表于 2023-2-4 13:15

起个网名好难 发表于 2023-2-4 11:39
三片叶子略有重合看起来效果更好些。

哦哦，是这样啊，谢谢指点{:4_187:}

红影 发表于 2023-2-4 13:17

马黑黑 发表于 2023-2-4 11:56
和过去的做法原理一致，不同的是一些小小的细节

是的，黑黑以前也做过的。还有一次带个杆子而且有投影的。

红影 发表于 2023-2-4 13:18

马黑黑 发表于 2023-2-4 11:57
100%也行，三张叶子会有些离散

所以重叠一点点更好看{:4_187:}

樵歌 发表于 2023-2-4 13:58

创造了生命！

海笑 发表于 2023-2-4 14:51

学习了，谢谢！

庶民 发表于 2023-2-4 15:13

这个是分开的，欣赏。

马黑黑 发表于 2023-2-4 16:24

庶民 发表于 2023-2-4 15:13
这个是分开的，欣赏。

{:4_191:}

马黑黑 发表于 2023-2-4 16:33

红影 发表于 2023-2-4 13:18
所以重叠一点点更好看

也许吧，主要是为了看起来更像是连成一体的

马黑黑 发表于 2023-2-4 16:34

樵歌 发表于 2023-2-4 13:58
创造了生命！

{:4_191:}

马黑黑 发表于 2023-2-4 16:34

红影 发表于 2023-2-4 13:17
是的，黑黑以前也做过的。还有一次带个杆子而且有投影的。

好像都做过的

查看完整版本: CSS三叶草代码分享