Longing For The Unknown - Karunesh

绿叶清舟

偶然~

来欣赏精绿叶清舟的品佳作！

偶然~

制作大气！

偶然~

太棒了！玫瑰花☆╮╮芍药花☆╮╰☆☆╮合欢花花～【*偶然 献花给你啦】

偶然~

期待绿叶清舟佳作频出！

偶然~

愿你事事如意吉祥，幸福快乐绵长。

偶然~

感谢绿叶清舟支持花潮论坛，辛苦了，祝您和家人岁岁安康，幸福吉祥！

马黑黑

小播设置不对称。修正后的整体代码：

1. <style>
   
2.         @import 'https://638183.freep.cn/638183/web/tz/tz.v3.css';
   
3.         .pa { --offsetX: 81px; --bg: url('https://pic1.imgdb.cn/item/693ab9cd0edaae20ec58a2ea.jpg') no-repeat center/cover; }
   
4.         .petal { width: 100%; height: 100%; top: -50%; background: url('https://pic1.imgdb.cn/item/693aba8d97f6538bc4c68464.png') no-repeat center/contain; transform-origin: 50% 100%; }
   
5.         .petal::after { content: ''; position: absolute; width: 100%; height: 100%; top: 100%; background: inherit; transform: scale(1, -1); }
   
6. </style>
   
7. 
   
8. <div id="pa" class="pa"></div>
   
9. 
   
10. <script type="module">
    
11.         import TZ from 'https://638183.freep.cn/638183/web/tz/tz.v3.js';
    
12.         const tz = TZ.TZ('pa');
    
13.         tz.add('audio', '', '', {src: 'https://music.163.com/song/media/outer/url?id=1614747'});
    
14.         tz.add('video', '', 'pd-vid', {src: 'https://img.tukuppt.com/video_show/2629112/00/01/93/1614747.mp4'});
    
15.         tz.add('div', 'player', 'wrap100 rot-ani', {style: 'bottom: 100px; cursor: pointer; border: 1px solid gray'}).playmp3();
    
16.         tz.lzRot(2, 'player', {tag: 'div', className: 'petal', angle: 180});
    
17.         tz.bgprog().style('bottom: 30px; color: lemonchiffon');
    
18.         tz.fs().style('right: 20px; bottom: 20px');
    
19. </script>

复制代码

主要更改的是css选择器 .petal 和它的伪元素

红影

这个制作效果好奇妙。
欣赏清舟好帖

绿叶清舟

红影 发表于 2025-12-12 14:14
这个制作效果好奇妙。
欣赏清舟好帖

谢谢影

绿叶清舟

马黑黑 发表于 2025-12-11 23:29
小播设置不对称。修正后的整体代码：

主要更改的是css选择器 .petal 和它的伪元素

多了一个方框，原来就有的吗，都没看到了

绿叶清舟

马黑黑 发表于 2025-12-11 23:29
小播设置不对称。修正后的整体代码：

主要更改的是css选择器 .petal 和它的伪元素

原来二个都改成80%的，为什么一个小了另一个还是原来的呢

绿叶清舟

偶然~ 发表于 2025-12-11 21:49
感谢绿叶清舟支持花潮论坛，辛苦了，祝您和家人岁岁安康，幸福吉祥！

谢谢偶然，也祝您全家快乐安康

绿叶清舟

偶然~ 发表于 2025-12-11 21:48
来欣赏精绿叶清舟的品佳作！

谢谢偶然支持

绿叶清舟

偶然~ 发表于 2025-12-11 21:49
期待绿叶清舟佳作频出！

只怕要让失望的了

马黑黑

绿叶清舟 发表于 2025-12-13 20:50
原来二个都改成80%的，为什么一个小了另一个还是原来的呢

这是父子孙的关系：

.petal 的父亲是 wrap100，.petal 若用 80% 表示宽高，则是 wrap100 元素尺寸的 80%；
.petal::after 或 .petal::before 是 .petal 的子元素，它们若使用 80%，指的是 .peta 的百分之八十。理论上，这里伪元素用于克隆父元素，它应该和父元素即 .petal 的宽高一样，即应该是 100%；

另外，背景图片其实很重要，应观察它的实际尺寸，以便调整元素的定位。

马黑黑

绿叶清舟 发表于 2025-12-13 20:48
多了一个方框，原来就有的吗，都没看到了

那个方框是给你观察用的，border: 1px solid gray; ，删掉就好

红影

绿叶清舟 发表于 2025-12-13 20:46
谢谢影

清舟的帖子色彩总是很奇妙呢

偶然~

绿叶清舟 发表于 2025-12-13 20:51
谢谢偶然，也祝您全家快乐安康

祝你友谊长存，爱情甜蜜，心中永远有黎明。

偶然~

绿叶清舟 发表于 2025-12-13 20:52
只怕要让失望的了

愿困难绕道而行，幸运常驻家门，美好不期而至。