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

三位一体还是一体三位？

<style>

.paBox {
        width: 100%;
        min-height: 500px;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: rgba(0, 0, 0, .8);
        filter: contrast(30);
}

.ball {
        position: absolute;
        width: 150px;
        height: 150px;
        border-radius: 50%;
        background: blue;
        transition: transform .8s;
        filter: blur(15px);
}

.ball-1 { animation: mvL 4s linear infinitealternate; }
.ball-2 { animation:wave linear 1s infinite alternate; }
.ball-3 { animation: mvR 4s linear infinite alternate; }

@keyframes wave { to { transform: scale(1.5) rotate(180deg); } }
@keyframes mvL { to { transform: translateX(-165px); } }
@keyframes mvR { to { transform: translateX(165px); } }

</style>

<div class="paBox">
        <div class="ball ball-1"></div>
        <div class="ball ball-2"></div>
        <div class="ball ball-3"></div>
</div>

马黑黑 发表于 2022-3-24 13:19

本帖最后由 马黑黑 于 2022-3-24 13:29 编辑 <br /><br /><pre>
<span style="color: #800000;">&lt;style&gt;

.paBox </span><span style="color: #000000;">{</span><span style="color: #FF0000;">
    width</span><span style="color: #000000;">:</span><span style="color: #0000FF;"> 100%</span><span style="color: #000000;">;</span><span style="color: #FF0000;">
    min-height</span><span style="color: #000000;">:</span><span style="color: #0000FF;"> 500px</span><span style="color: #000000;">;</span><span style="color: #FF0000;">
    display</span><span style="color: #000000;">:</span><span style="color: #0000FF;"> flex</span><span style="color: #000000;">;</span><span style="color: #FF0000;">
    justify-content</span><span style="color: #000000;">:</span><span style="color: #0000FF;"> center</span><span style="color: #000000;">;</span><span style="color: #FF0000;">
    align-items</span><span style="color: #000000;">:</span><span style="color: #0000FF;"> center</span><span style="color: #000000;">;</span><span style="color: #FF0000;">
    background-color</span><span style="color: #000000;">:</span><span style="color: #0000FF;"> rgba(0, 0, 0, .8)</span><span style="color: #000000;">;</span><span style="color: #FF0000;">
    filter</span><span style="color: #000000;">:</span><span style="color: #0000FF;"> contrast(30)</span><span style="color: #000000;">;</span><span style="color: #FF0000;">
</span><span style="color: #000000;">}</span><span style="color: #800000;">

.ball </span><span style="color: #000000;">{</span><span style="color: #FF0000;">
    position</span><span style="color: #000000;">:</span><span style="color: #0000FF;"> absolute</span><span style="color: #000000;">;</span><span style="color: #FF0000;">
    width</span><span style="color: #000000;">:</span><span style="color: #0000FF;"> 150px</span><span style="color: #000000;">;</span><span style="color: #FF0000;">
    height</span><span style="color: #000000;">:</span><span style="color: #0000FF;"> 150px</span><span style="color: #000000;">;</span><span style="color: #FF0000;">
    border-radius</span><span style="color: #000000;">:</span><span style="color: #0000FF;"> 50%</span><span style="color: #000000;">;</span><span style="color: #FF0000;">
    background</span><span style="color: #000000;">:</span><span style="color: #0000FF;"> blue</span><span style="color: #000000;">;</span><span style="color: #FF0000;">
    transition</span><span style="color: #000000;">:</span><span style="color: #0000FF;"> transform .8s</span><span style="color: #000000;">;</span><span style="color: #FF0000;">
    filter</span><span style="color: #000000;">:</span><span style="color: #0000FF;"> blur(15px)</span><span style="color: #000000;">;</span><span style="color: #FF0000;">
</span><span style="color: #000000;">}</span><span style="color: #800000;">

.ball-1 </span><span style="color: #000000;">{</span><span style="color: #FF0000;"> animation</span><span style="color: #000000;">:</span><span style="color: #0000FF;"> mvL 4s linear infinitealternate</span><span style="color: #000000;">;</span><span style="color: #FF0000;"> </span><span style="color: #000000;">}</span><span style="color: #800000;">
.ball-2 </span><span style="color: #000000;">{</span><span style="color: #FF0000;"> animation</span><span style="color: #000000;">:</span><span style="color: #0000FF;">wave linear 1s infinite alternate</span><span style="color: #000000;">;</span><span style="color: #FF0000;"> </span><span style="color: #000000;">}</span><span style="color: #800000;">
.ball-3 </span><span style="color: #000000;">{</span><span style="color: #FF0000;"> animation</span><span style="color: #000000;">:</span><span style="color: #0000FF;"> mvR 4s linear infinite alternate</span><span style="color: #000000;">;</span><span style="color: #FF0000;"> </span><span style="color: #000000;">}</span><span style="color: #800000;">

@keyframes wave </span><span style="color: #000000;">{</span><span style="color: #FF0000;"> to { transform</span><span style="color: #000000;">:</span><span style="color: #0000FF;"> scale(1.5) rotate(180deg)</span><span style="color: #000000;">;</span><span style="color: #FF0000;"> </span><span style="color: #000000;">}</span><span style="color: #800000;"> }
@keyframes mvL </span><span style="color: #000000;">{</span><span style="color: #FF0000;"> to { transform</span><span style="color: #000000;">:</span><span style="color: #0000FF;"> translateX(-165px)</span><span style="color: #000000;">;</span><span style="color: #FF0000;"> </span><span style="color: #000000;">}</span><span style="color: #800000;"> }
@keyframes mvR </span><span style="color: #000000;">{</span><span style="color: #FF0000;"> to { transform</span><span style="color: #000000;">:</span><span style="color: #0000FF;"> translateX(165px)</span><span style="color: #000000;">;</span><span style="color: #FF0000;"> </span><span style="color: #000000;">}</span><span style="color: #800000;"> }

&lt;/style&gt;</span>

<span style="color: #0000FF;">&lt;</span><span style="color: #800000;">div </span><span style="color: #FF0000;">class</span><span style="color: #0000FF;">=&quot;paBox&quot;</span><span style="color: #0000FF;">&gt;</span><span style="color: #000000;">
    </span><span style="color: #0000FF;">&lt;</span><span style="color: #800000;">div </span><span style="color: #FF0000;">class</span><span style="color: #0000FF;">=&quot;ball ball-1&quot;</span><span style="color: #0000FF;">&gt;&lt;/</span><span style="color: #800000;">div</span><span style="color: #0000FF;">&gt;</span><span style="color: #000000;">
    </span><span style="color: #0000FF;">&lt;</span><span style="color: #800000;">div </span><span style="color: #FF0000;">class</span><span style="color: #0000FF;">=&quot;ball ball-2&quot;</span><span style="color: #0000FF;">&gt;&lt;/</span><span style="color: #800000;">div</span><span style="color: #0000FF;">&gt;</span><span style="color: #000000;">
    </span><span style="color: #0000FF;">&lt;</span><span style="color: #800000;">div </span><span style="color: #FF0000;">class</span><span style="color: #0000FF;">=&quot;ball ball-3&quot;</span><span style="color: #0000FF;">&gt;&lt;/</span><span style="color: #800000;">div</span><span style="color: #0000FF;">&gt;</span><span style="color: #000000;">
</span><span style="color: #0000FF;">&lt;/</span><span style="color: #800000;">div</span><span style="color: #0000FF;">&gt;</span>
</pre>

加林森 发表于 2022-3-24 13:22

一个变3个，3个又回到 一个。看老黑的试验。

红影 发表于 2022-3-24 16:23

这个有趣，跟变戏法似的，css语句好奇妙啊{:4_199:}

红影 发表于 2022-3-24 16:25

还以为又是那个融色的，原来就一种颜色啊。

马黑黑 发表于 2022-3-24 18:26

红影 发表于 2022-3-24 16:25
还以为又是那个融色的，原来就一种颜色啊。

融合，不叫融色

马黑黑 发表于 2022-3-24 18:27

红影 发表于 2022-3-24 16:23
这个有趣，跟变戏法似的，css语句好奇妙啊

可以尝试处一些有趣的东东

红影 发表于 2022-3-24 21:08

马黑黑 发表于 2022-3-24 18:26
融合，不叫融色

哦哦，我的用词不对{:4_173:}

红影 发表于 2022-3-24 21:08

马黑黑 发表于 2022-3-24 18:27
可以尝试处一些有趣的东东

这个就非常有趣呢{:4_187:}

绿叶清舟 发表于 2022-3-24 21:12

还难舍难分啊{:4_189:}

加林森 发表于 2022-3-24 21:23

在手机上看，三个小球差点分里了呢。

马黑黑 发表于 2022-3-24 21:44

加林森 发表于 2022-3-24 21:23
在手机上看，三个小球差点分里了呢。

可以的

马黑黑 发表于 2022-3-24 21:44

红影 发表于 2022-3-24 21:08
这个就非常有趣呢

一般好玩

马黑黑 发表于 2022-3-24 21:44

绿叶清舟 发表于 2022-3-24 21:12
还难舍难分啊

差不多是酱紫

马黑黑 发表于 2022-3-24 21:44

红影 发表于 2022-3-24 21:08
哦哦，我的用词不对

嗯呢
{:4_181:}

加林森 发表于 2022-3-24 21:46

马黑黑 发表于 2022-3-24 21:44
可以的

看了的，球球都跑出边框了又缩回去了。

马黑黑 发表于 2022-3-24 21:47

加林森 发表于 2022-3-24 21:46
看了的，球球都跑出边框了又缩回去了。

手机屏幕不够大

加林森 发表于 2022-3-24 21:48

马黑黑 发表于 2022-3-24 21:47
手机屏幕不够大

是的是的。

绿叶清舟 发表于 2022-3-24 21:58

马黑黑 发表于 2022-3-24 21:44
差不多是酱紫

换成图片会咋样呢

马黑黑 发表于 2022-3-24 21:59

绿叶清舟 发表于 2022-3-24 21:58
换成图片会咋样呢

这个，对纯色有效果，你可以试试，不要太 kiss 了
页: [1] 2
查看完整版本: 三位一体还是一体三位？