论坛 › 马黑黑教程专版 › 喜洋洋

马黑黑 发表于 2021-12-30 22:50

喜洋洋

本帖最后由 马黑黑 于 2021-12-30 23:12 编辑 <br /><br /><style type="text/css">

.yd {
        width:180px;
        height:180px;
        padding:10px;
        text-align:center;
        border-radius:50%;
        box-shadow: 4px 4px 8px #aaa;
        background:coral;
        font-size:56px;
        font-family:'微软雅黑','黑体',Arial, sans-serif;
        font-weight:bold;
        color:red;
        position: absolute;
        left:0px;
        top:0px;
        text-shadow:4px 4px 8px pink;
        animation:linear gonow 10s infinite alternate;
}

.ifrm {
        transform:translateX(-50px);
}

@keyframes gonow { 100% { transform:translateX(calc(100vw - 200px)); } }

</style>

<div class="yd">庆祝<br>元旦</div>
<iframe class="ifrm" frameborder="no" border="0" marginwidth="0" marginheight="0" width="330" height="86" src="https://music.163.com/outchain/player?type=2&amp;id=160764&amp;auto=1&amp;height=66"></iframe>

加林森 发表于 2021-12-30 22:56

老黑厉害，佩服佩服！新年快乐！

马黑黑 发表于 2021-12-30 22:59

加林森 发表于 2021-12-30 22:56
老黑厉害，佩服佩服！新年快乐！
简单的元素，并不华丽

参考代码：

<style type="text/css">

.yd {
      width:170px;
      height:170px;
      padding:10px;
      text-align:center;
      border-radius:50%;
      box-shadow: 4px 4px 8px #aaa;
      background:coral;
      font-size:60px;
      font-family:'微软雅黑','黑体',Arial, sans-serif;
      font-weight:bold;
      color:red;
      position: absolute;
      left:0px;
      top:0px;
      text-shadow:4px 4px 8px pink;
      animation:linear gonow 10s infinite alternate;
}

.ifrm { transform:translateX(-100px); }

@keyframes gonow { 100% { transform:translateX(calc(100vw - 200px)); } }

</style>
<div class="yd">庆祝<br />元旦</div>
<iframe class="ifrm" frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="https://music.163.com/outchain/player?type=2&id=160764&auto=1&height=66"></iframe>

马黑黑 发表于 2021-12-30 23:13

播放器左移并不用 position 的负左边值

红影 发表于 2021-12-30 23:29

厉害，漂浮在最上面。前面讲的东西的综合运用{:4_199:}

小辣椒 发表于 2021-12-30 23:29

马黑黑 发表于 2021-12-30 23:13
播放器左移并不用 position 的负左边值

黑黑我还是没有理解这个色码怎么上去的

小辣椒 发表于 2021-12-30 23:30

这个圆至少有3种颜色

小辣椒 发表于 2021-12-30 23:31

黑黑~~这个圆可以上下移动吗

小辣椒 发表于 2021-12-30 23:33

left:0px;
top:0px;

应该可以移动

马黑黑 发表于 2021-12-30 23:48

小辣椒 发表于 2021-12-30 23:31
黑黑~~这个圆可以上下移动吗

可以

马黑黑 发表于 2021-12-30 23:49

红影 发表于 2021-12-30 23:29
厉害，漂浮在最上面。前面讲的东西的综合运用

嗯嗯，用了 calc 函数

小辣椒 发表于 2021-12-30 23:57

马黑黑 发表于 2021-12-30 23:48
可以
黑黑，我帖子做出来了，就这个圆球的颜色不会改，我发在音乐板块

元诗酒 发表于 2021-12-31 07:59

厉害啊，第一次见这样的移动悬浮。

元诗酒 发表于 2021-12-31 08:01

马黑黑喜洋洋，上花潮潮过元旦旦

马黑黑 发表于 2021-12-31 08:19

小辣椒 发表于 2021-12-30 23:29
黑黑我还是没有理解这个色码怎么上去的

这就是你说过的CSS的神奇之处，来了解一下（下面的代码我略作些整理）：

.yd {
      width:170px;
      height:170px;
      padding:10px;
      text-align:center;
      box-shadow: 4px 4px 8px #aaa;
      color:red;
      background:coral;
      text-shadow:4px 4px 8px pink;
      font-size:60px;
      font-family:'微软雅黑','黑体',Arial, sans-serif;
      font-weight:bold;
      border-radius:50%;
      position: absolute;
      left:0px;
      top:0px;
      animation:linear gonow 10s infinite alternate;
}


这里，定义了以个 .yd 的CSS样式代码，前四句是设计宽、高、内边距和文本对齐方式，红色的四句与圆球色彩有关：box-shadow是文字阴影（#aaa），color是文本颜色(red），background是背景色（coral），text-shadow是文本阴影（pink），这四个修饰得出你感受到的色码；往下蓝色那句，运用了边角弧度，50%针对正方形就是圆球；最后一句是调用另外定义的CSS动画。

马黑黑 发表于 2021-12-31 08:22

小辣椒 发表于 2021-12-30 23:33
left:0px;
top:0px;


上下移动不是这样做的，应修改 @keyframes ，下面这是，用的是 translateX，水平移动：

@keyframes gonow { 100% { transform:translateX(calc(100vw - 200px)); } }

改用 translateY 和相应数值，垂直移动：

@keyframes gonow {
    100% { transform:translateY(calc(100vh - 120px));
   }
}

马黑黑 发表于 2021-12-31 08:26

元诗酒 发表于 2021-12-31 08:01
马黑黑喜洋洋，上花潮潮过元旦旦

元烟酒上午好{:4_170:}

马黑黑 发表于 2021-12-31 08:27

元诗酒 发表于 2021-12-31 08:01
马黑黑喜洋洋，上花潮潮过元旦旦

元蛋蛋{:4_170:}

加林森 发表于 2021-12-31 08:53

{:4_178:}起来

元诗酒 发表于 2021-12-31 09:28

马黑黑 发表于 2021-12-31 08:26
元烟酒上午好

我很少抽烟，虽然说烟酒不分家。
黑黑上午好

查看完整版本: 喜洋洋