论坛 › 欢乐水吧 › 这片叶子送给羽羽吧

马黑黑 发表于 2022-3-29 12:20

这片叶子送给羽羽吧

<style type="text/css">

.mumBox{
        width: 100%;
        min-height: 400px;
        background: #333;
        position: relative;
}

.leaf {
        position: relative;
        left: calc(50% - 100px);
        top: 5px;
        width: 200px;
        height: 200px;
        border-radius: 10% 100% 10% 100% / 0 100% 0 100%;
        background: linear-gradient(45deg,green 49%,transparent 50%,green 50%);
        transform-origin: 0 0;
        animation: swift 5s ease-in infinite;
}

.leaf::before, .leaf::after { content: ''; position: absolute; }

.leaf::before {
        width: 30px;
        height: 8px;
        background: olive;
        opacity: .75;
        border-radius: 1px;
        left: -25px;
        top: -5px;
        transform: rotate(15deg);
}

.leaf::after {
        width: 25px;
        height: 20px;
        border-radius: 50%;
        background: #eee;
        opacity: 0.4;
        left: 25%;
        top: 25%;
        animation: bigger 5s linear infinite;
}
@keyframes bigger {
        0% { left: -10px;top: -10px; width: 10px; height: 8px; opacity: .1; }
        10% { left: 25%;top: 25%; width: 10px; height: 15px;opacity: .2 }
        20% { left: 65%; top: 64%; width: 20px; height: 20px;opacity: .3 }
        30% { left: 65%; top: 64%; width: 30px; height: 35px;opacity: .4 }
        40% { left: 65%; top: 64%; width: 35px; height: 38px;opacity: .4 }
        50% { left: 65%; top: 64%; width: 40px; height: 48px;opacity: .4 }
        60% { left: 65%; top: 64%; width: 45px; height: 50px;opacity: .4 }
        70% { left: 70%; top: 70%; width: 50px; height: 45px;opacity: .3 }
        80% { left: 70%; top: 70%; width: 45px; height: 55px;opacity: .2 }
        90% { left: 70%; top: 80%; width: 50px; height: 50px;opacity: .1 }
        100% { left: 70%; top: 80%; width: 50px; height: 60px;opacity: 0 }
}

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

<div class="mumBox">
        <div class="leaf"></div>
</div>

马黑黑 发表于 2022-3-29 12:23

<p>代码：<br><br></p>
<pre style="font-size: 14px;">&lt;style type=<span style="color: magenta">"text/css"</span>&gt;

<span style="color: red;">.mumBox</span>{
<span style="color: blue;">&nbsp; &nbsp;width</span>: 100%;
<span style="color: blue;">&nbsp; &nbsp;min-height</span>: 400px;
<span style="color: blue;">&nbsp; &nbsp;background</span>: #333;
<span style="color: blue;">&nbsp; &nbsp;position</span>: relative;
}

<span style="color: red;">.leaf </span>{
<span style="color: blue;">&nbsp; &nbsp;position</span>: relative;
<span style="color: blue;">&nbsp; &nbsp;left</span>: calc(50% - 100px);
<span style="color: blue;">&nbsp; &nbsp;top</span>: 5px;
<span style="color: blue;">&nbsp; &nbsp;width</span>: 200px;
<span style="color: blue;">&nbsp; &nbsp;height</span>: 200px;
<span style="color: blue;">&nbsp; &nbsp;border-radius</span>: 10% 100% 10% 100% / 0 100% 0 100%;
<span style="color: blue;">&nbsp; &nbsp;background</span>: linear-gradient(45deg,green 49%,transparent 50%,green 50%);
<span style="color: blue;">&nbsp; &nbsp;transform-origin</span>: 0 0;
<span style="color: blue;">&nbsp; &nbsp;animation</span>: swift 5s ease-in infinite;
}

<span style="color: blue;">.leaf</span>::before, .leaf::after { content: <span style="color: magenta">''</span>; position: absolute; }

<span style="color: blue;">.leaf</span>::before {
<span style="color: blue;">&nbsp; &nbsp;width</span>: 30px;
<span style="color: blue;">&nbsp; &nbsp;height</span>: 8px;
<span style="color: blue;">&nbsp; &nbsp;background</span>: olive;
<span style="color: blue;">&nbsp; &nbsp;opacity</span>: .75;
<span style="color: blue;">&nbsp; &nbsp;border-radius</span>: 1px;
<span style="color: blue;">&nbsp; &nbsp;left</span>: -25px;
<span style="color: blue;">&nbsp; &nbsp;top</span>: -5px;
<span style="color: blue;">&nbsp; &nbsp;transform</span>: rotate(15deg);
}

<span style="color: blue;">.leaf</span>::after {
<span style="color: blue;">&nbsp; &nbsp;width</span>: 25px;
<span style="color: blue;">&nbsp; &nbsp;height</span>: 20px;
<span style="color: blue;">&nbsp; &nbsp;border-radius</span>: 50%;
<span style="color: blue;">&nbsp; &nbsp;background</span>: #eee;
<span style="color: blue;">&nbsp; &nbsp;opacity</span>: 0.4;
<span style="color: blue;">&nbsp; &nbsp;left</span>: 25%;
<span style="color: blue;">&nbsp; &nbsp;top</span>: 25%;
<span style="color: blue;">&nbsp; &nbsp;animation</span>: bigger 5s linear infinite;
}
<span style="color: red;">@keyframes bigger </span>{
<span style="color: blue;">&nbsp; &nbsp;0% { left</span>: -10px;top: -10px; width: 10px; height: 8px; opacity: .1; }
<span style="color: blue;">&nbsp; &nbsp;10% { left</span>: 25%;top: 25%; width: 10px; height: 15px;opacity: .2 }
<span style="color: blue;">&nbsp; &nbsp;20% { left</span>: 65%; top: 64%; width: 20px; height: 20px;opacity: .3 }
<span style="color: blue;">&nbsp; &nbsp;30% { left</span>: 65%; top: 64%; width: 30px; height: 35px;opacity: .4 }
<span style="color: blue;">&nbsp; &nbsp;40% { left</span>: 65%; top: 64%; width: 35px; height: 38px;opacity: .4 }
<span style="color: blue;">&nbsp; &nbsp;50% { left</span>: 65%; top: 64%; width: 40px; height: 48px;opacity: .4 }
<span style="color: blue;">&nbsp; &nbsp;60% { left</span>: 65%; top: 64%; width: 45px; height: 50px;opacity: .4 }
<span style="color: blue;">&nbsp; &nbsp;70% { left</span>: 70%; top: 70%; width: 50px; height: 45px;opacity: .3 }
<span style="color: blue;">&nbsp; &nbsp;80% { left</span>: 70%; top: 70%; width: 45px; height: 55px;opacity: .2 }
<span style="color: blue;">&nbsp; &nbsp;90% { left</span>: 70%; top: 80%; width: 50px; height: 50px;opacity: .1 }
<span style="color: blue;">&nbsp; &nbsp;100% { left</span>: 70%; top: 80%; width: 50px; height: 60px;opacity: 0 }
}

<span style="color: red;">@keyframes swift </span>{
<span style="color: blue;">&nbsp; &nbsp;to { transform</span>: rotate(5deg); }
}
&lt;/style&gt;

&lt;<span style="color:darkred">div</span> <span style="color: red">class</span><span style="color: blue">=</span><span style="color: magenta">"mumBox"</span>&gt;
&nbsp; &nbsp;&lt;<span style="color:darkred">div</span> <span style="color: red">class</span><span style="color: blue">=</span><span style="color: magenta">"leaf"</span>&gt;&lt;<span style="color: darkred">/div</span>&gt;
&lt;<span style="color: darkred">/div</span>&gt;

</pre>

马黑黑 发表于 2022-3-29 12:32

下面酱紫的效果也很不错：
<style type="text/css">

.mumBox{
        width: 100%;
        min-height: 400px;
        background: #333;
        position: relative;
}

.leaf {
        position: relative;
        left: calc(50% - 100px);
        top: 5px;
        width: 200px;
        height: 200px;
        border-radius: 10% 100% 10% 100% / 0 100% 0 100%;
        background: linear-gradient(45deg,green 49%,transparent 50%,green 50%);
        transform-origin: 0 0;
        animation: swift 2s ease-in infinite;
}

.leaf::before, .leaf::after { content: ''; position: absolute; }

.leaf::before {
        width: 30px;
        height: 8px;
        background: olive;
        opacity: .75;
        border-radius: 1px;
        left: -25px;
        top: -5px;
        transform: rotate(15deg);
}

.leaf::after {
        width: 25px;
        height: 20px;
        border-radius: 50%;
        background: #eee;
        opacity: 0.4;
        left: 25%;
        top: 25%;
        animation: bigger 2s ease-in-out infinite;
}
@keyframes bigger {
        from { left: -10px; top: -10px; width: 8px; height: 8px; }
        to { left: 80%; top: 80%; width: 40px; height: 45px; }
}

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

<div class="mumBox">
        <div class="leaf"></div>
</div>

加林森 发表于 2022-3-29 12:39

本帖最后由 加林森 于 2022-3-29 13:18 编辑

@千羽这下又够千羽玩的了。收礼开心~~~~~~~~~~

马黑黑 发表于 2022-3-29 13:16

加林森 发表于 2022-3-29 12:39
这下又够千羽玩的了。

{:5_117:}

加林森 发表于 2022-3-29 13:17

马黑黑 发表于 2022-3-29 13:16


老黑中午不休息吗？

红影 发表于 2022-3-29 15:41

这片叶子上还有水珠滴落呢，太美了{:4_199:}

红影 发表于 2022-3-29 15:42

马黑黑 发表于 2022-3-29 12:32
下面酱紫的效果也很不错：

这个又是什么样子的呢，我来放到帖子里看一看{:4_173:}

红影 发表于 2022-3-29 15:43

<style type="text/css">

.yuBox{
      width: 100%;
      min-height: 400px;
      background: #333;
      position: relative;
}

.leaf1 {
      position: relative;
      left: calc(50% - 100px);
      top: 5px;
      width: 200px;
      height: 200px;
      border-radius: 10% 100% 10% 100% / 0 100% 0 100%;
      background: linear-gradient(45deg,green 49%,transparent 50%,green 50%);
      transform-origin: 0 0;
      animation: swift 5s ease-in infinite;
}

.leaf1::before, .leaf1::after { content: ''; position: absolute; }

.leaf1::before {
      width: 30px;
      height: 8px;
      background: olive;
      opacity: .75;
      border-radius: 1px;
      left: -25px;
      top: -5px;
      transform: rotate(15deg);
}

.leaf1::after {
      width: 25px;
      height: 20px;
      border-radius: 50%;
      background: #eee;
      opacity: 0.4;
      left: 25%;
      top: 25%;
      animation: bigger 5s ease-in-out infinite;
}
@keyframes bigger {
      from { left: -10px; top: -10px; width: 8px; height: 8px; }
      to { left: 80%; top: 80%; width: 40px; height: 45px; }
}

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

<div class="yuBox">
      <div class="leaf1"></div>
</div>

红影 发表于 2022-3-29 15:51

原来是水珠不同的运动方式，效果差不多，后者却简单了很多{:4_187:}

来看你 发表于 2022-3-29 15:56

叶子上还有会动的光点 {:4_199:}

千羽快来收礼，春天的叶子 {:4_195:}

马黑黑 发表于 2022-3-29 18:15

来看你 发表于 2022-3-29 15:56
叶子上还有会动的光点

千羽快来收礼，春天的叶子

不是水珠吗{:5_117:}

马黑黑 发表于 2022-3-29 18:15

红影 发表于 2022-3-29 15:42
这个又是什么样子的呢，我来放到帖子里看一看

末尾部分我处理的不太好

马黑黑 发表于 2022-3-29 18:15

红影 发表于 2022-3-29 15:51
原来是水珠不同的运动方式，效果差不多，后者却简单了很多

对，还是简单的好

马黑黑 发表于 2022-3-29 18:16

加林森 发表于 2022-3-29 13:17
老黑中午不休息吗？

休息的，比任正非老总多休息40分钟

加林森 发表于 2022-3-29 18:17

马黑黑 发表于 2022-3-29 18:16
休息的，比任正非老总多休息40分钟

那就很幸福了嘛

马黑黑 发表于 2022-3-29 18:23

加林森 发表于 2022-3-29 18:17
那就很幸福了嘛

必须的

加林森 发表于 2022-3-29 18:28

马黑黑 发表于 2022-3-29 18:23
必须的

是的是的

千羽 发表于 2022-3-29 19:40

来收礼啦{:4_187:}

千羽 发表于 2022-3-29 19:42

很有趣的精致礼物，谢谢黑黑老师{:4_187:}

查看完整版本: 这片叶子送给羽羽吧