绿叶清舟 发表于 2022-1-29 22:28

空花梵行 - 巫娜

本帖最后由 绿叶清舟 于 2022-1-29 22:33 编辑 <br /><br /><DIV align=center>
<tablestyle="position: relative; LEFT: -180px; width:790px;TOP: 180px"border="0" cellspacing="0" cellpadding="0">
<TBODY><TR><TD height=421 background=https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg13.360buyimg.com%2Fcms%2Fjfs%2Ft556%2F42%2F772274453%2F76518%2Fd0d45ea3%2F5486731eN2e5b0a58.jpg&refer=http%3A%2F%2Fimg13.360buyimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1646058267&t=9ec21ca897bbd08c79cc2e7f48fd9ecb>

<style type="text/css">


.box{
    width: 200px;
    height: 200px;
    box-sizing: border-box;
    border: 1px solid #cb6341;
    position: fixed;
    left: 50%;
    top: 50%;
    margin-top: -100px;
    margin-left: -100px;
}
.box:after, .box:before{
    content: "";
    width: 110%;
    height: 110%;
    box-sizing: border-box;
    border: 2px solid;
    position: absolute;
    top: -5%;
    left: -5%;
    animation: boxBorder 6s linear infinite;
}
.box:before{
    animation-delay: -3s;
}

/* 布局结束 */
/* 动画开始 */

@keyframes boxBorder {
    0%{
      border-color: #fff;
      clip: rect(0, 220px, 2px ,0);
    }
    25%{
      border-color: yellow;
      clip: rect(0, 2px, 220px ,0);
    }
    50%{
      border-color: blue;
      clip: rect(218px, 220px, 220px ,0);
    }
    75%{
      border-color: green;
      clip: rect(0, 220px, 220px ,218px);
    }
    100%{
      border-color: aqua;
      clip: rect(0, 220px, 2px ,0);
    }
}
</style>
<div style="position: relative; LEFT: 580px; width:200px;TOP: 80px" class="box">    <div class="icon icon1"></div>    <div class="icon icon2"></div><iframe style="opacity: 0.3;" frameborder="no" border="0" marginwidth="0" marginheight="0" width=200 height=200 src="//music.163.com/outchain/player?type=1&id=3308432&auto=1&height=200"></iframe></div>
</TD></TR>
</table></div><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>

红影 发表于 2022-1-29 23:53

这个动画正好围绕播放器，真漂亮。{:4_187:}

红影 发表于 2022-1-29 23:54

这个动画也是css语句啊，这个牛了{:4_199:}

大猫咪 发表于 2022-2-6 20:09

沉醉在音乐的优美旋律之中，身心皆融入曲中，然后 随风飘散。。。

清舟好分享，老喜欢了   收藏！

{:4_204:}{:4_199:}

加林森 发表于 2022-2-8 17:50

了不得了啊，清舟好制作。{:4_199:}

绿叶清舟 发表于 2022-2-8 21:04

红影 发表于 2022-1-29 23:53
这个动画正好围绕播放器，真漂亮。

影好，闲逛时看到这个漂亮就搬来了

绿叶清舟 发表于 2022-2-8 21:04

加林森 发表于 2022-2-8 17:50
了不得了啊，清舟好制作。

谢谢队长

绿叶清舟 发表于 2022-2-8 21:05

大猫咪 发表于 2022-2-6 20:09
沉醉在音乐的优美旋律之中，身心皆融入曲中，然后 随风飘散。。。

清舟好分享，老喜欢了   收藏！


巫娜的差不多都搬了一回了{:4_189:}

大猫咪 发表于 2022-2-8 21:07

绿叶清舟 发表于 2022-2-8 21:05
巫娜的差不多都搬了一回了

百听不厌说的就是巫娜了 ， 真舒服她的音乐{:4_187:}

绿叶清舟 发表于 2022-2-8 21:15

大猫咪 发表于 2022-2-8 21:07
百听不厌说的就是巫娜了 ， 真舒服她的音乐

是啊要说尝乐还得是咱国粹的

大猫咪 发表于 2022-2-8 21:16

绿叶清舟 发表于 2022-2-8 21:15
是啊要说尝乐还得是咱国粹的

嗯嗯必须滴

冬天的雨 发表于 2022-2-9 21:23

清舟这个精致的小帖，音乐也是特别的喜欢{:4_178:}

绿叶清舟 发表于 2022-2-9 21:44

冬天的雨 发表于 2022-2-9 21:23
清舟这个精致的小帖，音乐也是特别的喜欢

在那玩活动的没时间做图片，偷懒了

马黑黑 发表于 2022-2-10 09:26

这个要好好听一下。感谢分享。

绿叶清舟 发表于 2022-2-10 20:13

马黑黑 发表于 2022-2-10 09:26
这个要好好听一下。感谢分享。

这么客气，为啥那框一改大小就变形了啊

马黑黑 发表于 2022-2-11 07:45

绿叶清舟 发表于 2022-2-10 20:13
这么客气，为啥那框一改大小就变形了啊

尺寸彼此间依赖，你要改大号的就一一修改，包括各元素的尺寸以及相关设定

绿叶清舟 发表于 2022-2-11 12:21

马黑黑 发表于 2022-2-11 07:45
尺寸彼此间依赖，你要改大号的就一一修改，包括各元素的尺寸以及相关设定

下面的动画改起来麻烦啊得按百分比重新计算？

马黑黑 发表于 2022-2-11 12:42

绿叶清舟 发表于 2022-2-11 12:21
下面的动画改起来麻烦啊得按百分比重新计算？

你得研究好人家的设计，吃透了原理，才能有效改动
页: [1]
查看完整版本: 空花梵行 - 巫娜