Longing For The Unknown - Karunesh
本帖最后由 绿叶清舟 于 2025-12-13 20:47 编辑 <br /><br /><style>@import 'https://638183.freep.cn/638183/web/tz/tz.v3.css';
.pa { --offsetX: 81px; --bg: url('https://pic1.imgdb.cn/item/693ab9cd0edaae20ec58a2ea.jpg') no-repeat center/cover; }
.petal { width: 100%; height: 100%; top: -50%; background: url('https://pic1.imgdb.cn/item/693aba8d97f6538bc4c68464.png') no-repeat center/contain; transform-origin: 50% 100%; }
.petal::after { content: ''; position: absolute; width: 100%; height: 100%; top: 100%; background: inherit; transform: scale(1, -1); }
</style>
<div id="pa" class="pa"></div>
<script type="module">
import TZ from 'https://638183.freep.cn/638183/web/tz/tz.v3.js';
const tz = TZ.TZ('pa');
tz.add('audio', '', '', {src: 'https://music.163.com/song/media/outer/url?id=1614747'});
tz.add('video', '', 'pd-vid', {src: 'https://img.tukuppt.com/video_show/2629112/00/01/93/1614747.mp4'});
tz.add('div', 'player', 'wrap100 rot-ani', {style: 'bottom: 100px; cursor: pointer; border: 1px solid gray'}).playmp3();
tz.lzRot(2, 'player', {tag: 'div', className: 'petal', angle: 180});
tz.bgprog().style('bottom: 30px; color: lemonchiffon');
tz.fs().style('right: 20px; bottom: 20px');
</script> 来欣赏精绿叶清舟的品佳作！
制作大气！
太棒了！玫瑰花☆╮╮芍药花☆╮╰☆☆╮合欢花花～【*偶然 献花给你啦】
期待绿叶清舟佳作频出！
愿你事事如意吉祥，幸福快乐绵长。
感谢绿叶清舟支持花潮论坛，辛苦了，祝您和家人岁岁安康，幸福吉祥！ 小播设置不对称。修正后的整体代码：
<style>
@import 'https://638183.freep.cn/638183/web/tz/tz.v3.css';
.pa { --offsetX: 81px; --bg: url('https://pic1.imgdb.cn/item/693ab9cd0edaae20ec58a2ea.jpg') no-repeat center/cover; }
.petal { width: 100%; height: 100%; top: -50%; background: url('https://pic1.imgdb.cn/item/693aba8d97f6538bc4c68464.png') no-repeat center/contain; transform-origin: 50% 100%; }
.petal::after { content: ''; position: absolute; width: 100%; height: 100%; top: 100%; background: inherit; transform: scale(1, -1); }
</style>
<div id="pa" class="pa"></div>
<script type="module">
import TZ from 'https://638183.freep.cn/638183/web/tz/tz.v3.js';
const tz = TZ.TZ('pa');
tz.add('audio', '', '', {src: 'https://music.163.com/song/media/outer/url?id=1614747'});
tz.add('video', '', 'pd-vid', {src: 'https://img.tukuppt.com/video_show/2629112/00/01/93/1614747.mp4'});
tz.add('div', 'player', 'wrap100 rot-ani', {style: 'bottom: 100px; cursor: pointer; border: 1px solid gray'}).playmp3();
tz.lzRot(2, 'player', {tag: 'div', className: 'petal', angle: 180});
tz.bgprog().style('bottom: 30px; color: lemonchiffon');
tz.fs().style('right: 20px; bottom: 20px');
</script>主要更改的是css选择器 .petal 和它的伪元素
这个制作效果好奇妙。
欣赏清舟好帖{:4_187:} 红影 发表于 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
谢谢影
清舟的帖子色彩总是很奇妙呢{:4_187:} 绿叶清舟 发表于 2025-12-13 20:51
谢谢偶然，也祝您全家快乐安康
祝你友谊长存，爱情甜蜜，心中永远有黎明。 绿叶清舟 发表于 2025-12-13 20:52
只怕要让失望的了
愿困难绕道而行，幸运常驻家门，美好不期而至。
页:
[1]
2