我心依旧

马黑黑

马黑黑

心形效果代码分享：

<style type="text/css">

.fbox {
        margin: 200px auto;
        position: relative;
        left: 160px;
        width: 400px;
        height: 400px;
}

.xin {
        position: relative;
        width: 100px;
        height: 100px;
        left: 0;
        top: 0;
        background: red;
        filter: drop-shadow(1px 2px 4px #000);
        transform: rotate(45deg);
        animation: scale 1s infinite alternate;
}

.xin::before, .xin::after {
        content: "";
        position: absolute;
        width: 100px;
        height: 100px;
        background: red;
        border-radius: 50%;
}

.xin::before { left: -50px; }

.xin::after { top: -50px; }

@keyframes scale{
        0% 100% { transform: rotate(45deg) scale(0.9,0.9); }
        30% { transform:rotate(45deg) scale(0.9,0.9); }
}

</style>

<div class="fbox">
        <div class="xin"></div>
</div>

红影

这个效果好漂亮

马黑黑

红影 发表于 2022-1-14 23:18
这个效果好漂亮

就是在那个一生二的基础上鼓捣一下出来的效果

红影

代码有点复杂，好像前面讲的很多都用在里面的。怪我前面的没学好

马黑黑

红影 发表于 2022-1-14 23:19
代码有点复杂，好像前面讲的很多都用在里面的。怪我前面的没学好

代码量大了一点点，但都是基础的，而那个啥，效果的实现，思路还是不很复杂的

加林森

老黑的这个效果真好！

马黑黑

加林森 发表于 2022-1-15 08:48
老黑的这个效果真好！

玩玩

加林森

马黑黑 发表于 2022-1-15 08:48
玩玩

嗯嗯，喝茶！

红影

马黑黑 发表于 2022-1-14 23:19
就是在那个一生二的基础上鼓捣一下出来的效果

一生二知道，变成圆形也知道，那个转45度有嗲难于理解，咋就正好凑出这个效果呢。

红影

马黑黑 发表于 2022-1-14 23:38
代码量大了一点点，但都是基础的，而那个啥，效果的实现，思路还是不很复杂的

有点复杂，不明白怎么会正好对齐的。

马黑黑

红影 发表于 2022-1-15 19:50
有点复杂，不明白怎么会正好对齐的。

这个要感受一下

马黑黑

红影 发表于 2022-1-15 19:49
一生二知道，变成圆形也知道，那个转45度有嗲难于理解，咋就正好凑出这个效果呢。

你可以测试一下不转45度，看看效果，慢慢领悟

绿叶清舟

这个心漂亮

马黑黑

绿叶清舟 发表于 2022-1-15 21:01
这个心漂亮

本来想弄个黑心的

绿叶清舟

马黑黑 发表于 2022-1-15 21:01
本来想弄个黑心的

是不是最后发现还没变黑了啊

马黑黑

绿叶清舟 发表于 2022-1-15 21:05
是不是最后发现还没变黑了啊

找了下镜子，好着呢

绿叶清舟

马黑黑 发表于 2022-1-15 21:07
找了下镜子，好着呢

你那魔镜啊，还好着呢

加林森

继续学习~~~~~~~~~~~~~~

小辣椒