喜洋洋

马黑黑

庆祝
元旦

加林森

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

马黑黑

加林森 发表于 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>

马黑黑

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

红影

厉害，漂浮在最上面。前面讲的东西的综合运用

小辣椒

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

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

小辣椒

这个圆至少有3种颜色

小辣椒

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

小辣椒

left:0px;
  top:0px;

应该可以移动

马黑黑

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

可以

马黑黑

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

嗯嗯，用了 calc 函数

小辣椒

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

黑黑，我帖子做出来了，就这个圆球的颜色不会改，我发在音乐板块

元诗酒

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

元诗酒

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

马黑黑

小辣椒 发表于 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-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:01
马黑黑喜洋洋，上花潮潮过元旦旦

元烟酒上午好

马黑黑

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

元蛋蛋

加林森

起来

元诗酒

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

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