荷塘月色（学习马黑黑关山效果）
<style>@import 'https://638183.freep.cn/638183/web/tz/tz.min.css';
.pa {
--offsetX: 81px;
--bg: url('https://pic1.imgdb.cn/item/6911f2083203f7be00ed8f49.jpg') no-repeat center/cover;
}
.gRot { animation: rotate 8s linear infinite var(--state); }
#msvg { position: absolute; bottom: 20px; }
#fish { offset-path: path('M310 195a93.5 62 0 1 0 187 0a93.5 62 0 1 0 -187 0z'); offset-distance: 100%; animation: swim 50s infinite; }
@keyframes cover1 { from { width: 0; } to { width: 100%; } }
@keyframes cover2 { from { width: 0; } to { width: 100%; } }
@keyframes rot { to { transform: rotate(1turn); } }
@keyframes swim { to { offset-distance: 0%; } }
</style>
<div class="pa">
<img id="fish" src="https://wj1.zp68.com:812/lxx/yunhua/2022/10/02/gnyu.jpg" alt="" />
<svg id="msvg" width="150" height="150" xmlns="http://www.w3.org/2000/svg" viewBox="-100 -100 200 200">
<g stroke="lightyellow" stroke-width="10">
<ellipse id="track" cx="0" cy="0" rx="95" ry="85" fill="none" />
<ellipse id="prog" cx="0" cy="0" rx="95" ry="85" fill="none" stroke="darkorange" />
</g>
</svg>
</div>
<script type="module">
import TZ from 'https://638183.freep.cn/638183/web/tz/tz.v3.js?v0';
const tz = TZ.TZ('pa');
tz.add('audio', '', '', {
src: 'https://cccimg.com/view.php/cc3e23614173938c4bc2e54c6fc788ae.mp3'
});
tz.add('video', '', 'pd-vid', {
src: 'https://img.tukuppt.com/video_show/7165162/00/20/20/5f20f36d9ecbc.mp4',
style: 'opacity: 0.3;'
});
tz.svgsonsRot(4, 'msvg', 'path', {
d: 'M0 0 C-100 100,100 100,0 0',
fill: 'gold'
}).playmp3();
tz.svgprog('msvg', 'track', 'prog');
</script> @马黑黑
老师 晚上好，学生交作业，请指正{:4_190:} 欣赏朵拉漂亮的作业，小鱼儿加的漂亮，就是位置要移动一下，现在到桥上了 这个作业我还没有完成的，朵拉速度的 漂亮，欣赏朵宝好帖{:4_187:} {:4_199:} 来欣赏朵拉唯美的音画 音画合一 构思大气 感谢朵拉带来的精彩，辛苦了！祝你开心幸福、阖家幸福！
页:
[1]