论坛 › 音乐沙龙 › 春光美（纯乐）

马黑黑 发表于 2022-1-26 17:49

春光美（纯乐）

<link rel="stylesheet" href="https://638183.freep.cn/638183/rar/denglong.css" />
<style type="text/css">
#mainBox {
        position: relative;
        margin: 70px auto;
        width: 1080px; height: 730px;
        left: -240px;
        background: olive url('/data/attachment/forum/202201/26/174904b33zws3f5xfwbzyi.jpg') no-repeat;
        box-shadow: 0px 0px 0px 4px olive;
        border-radius: 4px;
        transform: skew(2deg, 2deg);
}
#mainBox iframe {
        position: absolute;
        left:480px;
        top: 380px;
        width: 330px;
        height: 86px;
        clip-path: circle(33px at 43px 43px);
}
</style>

<div id="mainBox">
        <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="https://music.163.com/outchain/player?type=2&id=1868246455&auto=1&height=66"></iframe>
        <div class="lantern-con" style="left:390px; top:30px;">
                <div class="lantern-line"></div>
                <div class="lantern-light">
                      <div class="lantern-circle">
                                <div class="lantern-rect">
                                        <div class="lantern-text">春光</div>
                                </div>
                      </div>
                      <div class="lantern-tassel-top">
                                <div class="lantern-tassel-middle"></div>
                                <div class="lantern-tassel-bottom"></div>
                      </div>
                </div>
        </div>
</div>

马黑黑 发表于 2022-1-26 17:59

圆角：border-radius: 4px;
包边：box-shadow: 0px 0px 0px 4px olive;
倾斜：transform: skew(2deg, 2deg);
播放器切片并定位：
    clip-path: circle(33px at 43px 43px);
    left:480px;
    top: 380px;

灯笼定位：style="left:390px; top:30px;"

红影 发表于 2022-1-26 19:21

又是个新的各种效果组合，黑黑一下子出了这么多好帖子，要好好跟在后面学学了{:4_187:}

红影 发表于 2022-1-26 19:22

这个图片倾斜，居然让灯笼也跟着倾斜呢{:4_173:}

马黑黑 发表于 2022-1-26 19:54

红影 发表于 2022-1-26 19:22
这个图片倾斜，居然让灯笼也跟着倾斜呢

帖子里，灯笼以子元素出现，它继承父元素的能遗传的特性

马黑黑 发表于 2022-1-26 19:55

红影 发表于 2022-1-26 19:21
又是个新的各种效果组合，黑黑一下子出了这么多好帖子，要好好跟在后面学学了

啥呀？俺那个，落枕了，不做倾斜的看不舒服

绿叶清舟 发表于 2022-1-26 20:09

喝高了吧{:4_189:}

绿叶清舟 发表于 2022-1-26 20:10

一会也来玩个灯笼的

冬天的雨 发表于 2022-1-26 20:29

这个灯笼加的漂亮{:4_178:}

马黑黑 发表于 2022-1-26 21:02

冬天的雨 发表于 2022-1-26 20:29
这个灯笼加的漂亮

位置很好{:5_106:}

马黑黑 发表于 2022-1-26 21:06

绿叶清舟 发表于 2022-1-26 20:09
喝高了吧

{:4_206:}

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

绿叶清舟 发表于 2022-1-26 20:10
一会也来玩个灯笼的

支持

红影 发表于 2022-1-26 21:07

马黑黑 发表于 2022-1-26 19:54
帖子里，灯笼以子元素出现，它继承父元素的能遗传的特性

嗯嗯，只继承倾斜么，不继承包边么？

马黑黑 发表于 2022-1-26 21:08

红影 发表于 2022-1-26 21:07
嗯嗯，只继承倾斜么，不继承包边么？
不是所有的特性都自动遗传{:4_170:}

红影 发表于 2022-1-26 21:08

马黑黑 发表于 2022-1-26 19:55
啥呀？俺那个，落枕了，不做倾斜的看不舒服

哈哈，你咋不做旋转的呢，那不就斜得还厉害了{:4_189:}

马黑黑 发表于 2022-1-26 21:13

红影 发表于 2022-1-26 21:08
哈哈，你咋不做旋转的呢，那不就斜得还厉害了

凡事都得有个度

红影 发表于 2022-1-26 21:39

马黑黑 发表于 2022-1-26 21:08
不是所有的特性都自动遗传

传男不传女{:4_173:}

红影 发表于 2022-1-26 21:40

马黑黑 发表于 2022-1-26 21:13
凡事都得有个度

还行，你只转了2度，头不用歪得太厉害{:4_173:}

马黑黑 发表于 2022-1-26 21:50

红影 发表于 2022-1-26 21:39
传男不传女

好像是的

马黑黑 发表于 2022-1-26 21:51

红影 发表于 2022-1-26 21:40
还行，你只转了2度，头不用歪得太厉害

随便转转，转转更健康

查看完整版本: 春光美（纯乐）