马黑黑 发表于 2022-1-22 19:00

追梦人（笛子版）

本帖最后由 马黑黑 于 2022-1-22 20:05 编辑 <br /><br /><style>
.mengBox {
        width:900px;height:383px;position:relative;left:-152px;background:transparent url('/data/attachment/forum/202201/22/185505kocciylnge51ezyo.jpg') no-repeat;opacity:0.8;cursor:pointer;}
.mengBox:hover .wyfram { opacity: 0.6; }
.mengBox img { position:absolute;left: 660px;clip-path:ellipse(80px 100px at 120px 130px);opacity:0.8; }
.wyfram { opacity:0.3; }
</style>

<div class="mengBox">
        <img alt="" src="/data/attachment/forum/202201/22/185504qdv13q515dlgg1d6.jpg" />
        <iframe class="wyfram" frameborder="no" border="0" marginwidth="0" marginheight="0" width=208 height=52 src="https://music.163.com/outchain/player?type=2&id=1805328866&auto=1&height=32"></iframe>
</div>

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

这个播放器又是新的玩法，不用鼠标滑过隐现，而是滑过是不同的透明度。原来display: none和display: block跟不不用写，直接给透明度就可以了。
这个也是图上加图的范例。有趣{:4_187:}

小辣椒 发表于 2022-1-22 19:59

黑黑的精彩不断，欣赏加学习{:4_187:}

马黑黑 发表于 2022-1-22 20:03

这里用到了 clip-path 裁剪方法，webkit 内核的浏览器完美支持（比如Chrome早在十年前就已支持，现在的edge、百分浏览器等都可100%渲染），但其他浏览器不敢保证。如果不支持，右边的图像裁剪不能呈现完美的椭圆图像。

CSS3的 clip-path 属性将取代被废弃的 clip 属性，

马黑黑 发表于 2022-1-22 20:07

红影 发表于 2022-1-22 19:36
这个播放器又是新的玩法，不用鼠标滑过隐现，而是滑过是不同的透明度。原来display: none和display: block ...

opacity 设为 0 是完全透明，可以试试

马黑黑 发表于 2022-1-22 20:13

小辣椒 发表于 2022-1-22 19:59
黑黑的精彩不断，欣赏加学习

小辣椒晚上好

大猫咪 发表于 2022-1-22 20:18

当这熟悉的曲子和词句在脑海中流淌时，更是让人有一番憧憬。。

老黑制作真棒！一直喜欢的经典！晚上好！

{:4_204:}{:4_179:}

马黑黑 发表于 2022-1-22 20:19

大猫咪 发表于 2022-1-22 20:18
当这熟悉的曲子和词句在脑海中流淌时，更是让人有一番憧憬。。

老黑制作真棒！一直喜欢的经典！晚上好 ...

猫咪晚上好。喝了么

大猫咪 发表于 2022-1-22 20:20

马黑黑 发表于 2022-1-22 20:19
猫咪晚上好。喝了么

刚长途回来，没喝呢{:4_170:}

马黑黑 发表于 2022-1-22 20:29

大猫咪 发表于 2022-1-22 20:20
刚长途回来，没喝呢

今天没有三陪呀

大猫咪 发表于 2022-1-22 20:37

马黑黑 发表于 2022-1-22 20:29
今天没有三陪呀

就是三陪才回来啊{:4_170:}

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

大猫咪 发表于 2022-1-22 20:37
就是三陪才回来啊

那不得喝吗

大猫咪 发表于 2022-1-22 21:02

马黑黑 发表于 2022-1-22 21:00
那不得喝吗

吃饭猫就找故事溜了，要不半夜夜回不来。。

{:5_117:}

红影 发表于 2022-1-22 21:15

马黑黑 发表于 2022-1-22 20:03
这里用到了 clip-path 裁剪方法，webkit 内核的浏览器完美支持（比如Chrome早在十年前就已支持，现在的edge ...

没废弃前的我也不知道啊，所以也不知道这里的更新换代。
这个裁剪需要计算位置的吧，若是自动取当中位置，就无法弄出自己想要的那部分了。

红影 发表于 2022-1-22 21:18

马黑黑 发表于 2022-1-22 20:07
opacity 设为 0 是完全透明，可以试试

那就看不见了啊。
刚才刷新，最先加载的是椭圆图，然后是底图，再然后是音乐。是不是因为裁剪了所以加载更快？

绿叶清舟 发表于 2022-1-22 21:47

又是个新效果了啊

马黑黑 发表于 2022-1-22 22:27

绿叶清舟 发表于 2022-1-22 21:47
又是个新效果了啊

这个有点冒险：不知道浏览器支持的如何。webkit内核的（Chrome类）应该是没问题的

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

马黑黑 发表于 2022-1-22 22:27
这个有点冒险：不知道浏览器支持的如何。webkit内核的（Chrome类）应该是没问题的

好象可以啊，用系统自带的那个看了也没变形的

马黑黑 发表于 2022-1-22 22:33

绿叶清舟 发表于 2022-1-22 22:30
好象可以啊，用系统自带的那个看了也没变形的

系统自带的是什么浏览器？

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

马黑黑 发表于 2022-1-22 22:33
系统自带的是什么浏览器？

EDGE的
页: [1] 2 3
查看完整版本: 追梦人（笛子版）