马黑黑 发表于 2022-1-14 22:51

我心依旧

<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width="330" height="86" src="https://music.163.com/outchain/player?type=2&amp;id=29326596&amp;auto=1&amp;height=66"></iframe>
<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:00

心形效果代码分享：

<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

这个效果好漂亮{:4_187:}

马黑黑 发表于 2022-1-14 23:19

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

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

红影 发表于 2022-1-14 23:19

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

马黑黑 发表于 2022-1-14 23:38

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

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

加林森 发表于 2022-1-15 08:48

老黑的这个效果真好！{:4_190:}

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

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

玩玩

加林森 发表于 2022-1-15 08:49

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

嗯嗯，喝茶！{:4_190:}

红影 发表于 2022-1-15 19:49

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

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

红影 发表于 2022-1-15 19:50

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

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

马黑黑 发表于 2022-1-15 21:00

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

这个要感受一下

马黑黑 发表于 2022-1-15 21:01

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

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

绿叶清舟 发表于 2022-1-15 21:01

这个心漂亮{:4_199:}

马黑黑 发表于 2022-1-15 21:01

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

本来想弄个黑心的{:4_170:}

绿叶清舟 发表于 2022-1-15 21:05

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

是不是最后发现还没变黑了啊{:4_189:}

马黑黑 发表于 2022-1-15 21:07

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

找了下镜子，好着呢

绿叶清舟 发表于 2022-1-15 21:17

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

你那魔镜啊，还好着呢{:4_189:}

加林森 发表于 2022-1-15 22:33

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

小辣椒 发表于 2022-1-15 22:55

<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>
页: [1] 2 3 4 5 6
查看完整版本: 我心依旧