我在等铁树开花 歌手：刘阳阳
<style>#mydiv { margin: 140px 0 30px calc(50% - 781px); width: 1400px; height: 780px; background: url('https://file.uhsea.com/2411/1468eda5c9c6140d062cfe12df25af21OZ.jpg ') no-repeat center/cover; box-shadow: 4px 4px 8px gray; position: relative; --state: running; }
#msvg { position: absolute; left: calc(20% - 100px); top: 70%; cursor: pointer; animation: rot 8s linear infinite var(--state); }
#msvg ellipse { transition: .5s; }
#msvg:hover ellipse { ry: 50; }
#pic1 { position: absolute; top:10%;left: 10%; width: 200px; height: 375px; transform-origin: 50%100%; opacity: 0.8; animation: ren 1.9s linear infinite alternate var(--state); }
#vid { position: absolute; left: 0px; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: screen; -webkit-mask: linear-gradient(transparent 10%, red 30%, red 0); pointer-events: none; opacity: 0.7; }
#vid1 { position: absolute;width: 100%; height: 100%; top: 0px; object-fit: cover; mix-blend-mode: screen; -webkit-mask: linear-gradient(transparent 10%, red 30%, red 0); pointer-events: none; opacity: 0.2; }
#fsbtn { position: absolute; left: 42%; bottom: 20px; color: OliveDrab; background: transparent; padding: 4px 6px; border: 2px solid OliveDrab; border-radius: 8px; user-select: none; cursor: pointer; transition: .3s; }
.wai-zmd { position: absolute; width: 400px; height: 300px; left: 25%; top:20%; overflow: hidden; }
.wai-zmd div { position: absolute; top: 200px; min-height: 20px; font: normal 20px Sans-Serif; color: OliveDrab; text-shadow: 1px 1px 1px rgba(0, 0, 0, .25); }
@keyframes rot { to { transform: rotate(360deg); } }
@keyframes ren { to { transform: skew(2.5deg) scale(1.01);} }
</style>
<div id="mydiv">
<audio id="aud" src="https://cccimg.com/view.php/bf296e21eea961789c4db6ca8e4e66f8.mp3" autoplay loop></audio>
<video id="vid" src="https://img.tukuppt.com/video_show/2269348/00/14/66/5e5a2d19f00fd.mp4" autoplay loop muted></video>
<video id="vid1" src="https://img.tukuppt.com/video_show/15653652/04/57/90/6490fb3b722ba.mp4" autoplay loop muted></video>
<img id="pic1" src="https://file.uhsea.com/2411/e36888322f8522c402a3b2fab13c1fad6L.png" alt="" />
<svg id="msvg" width="200" height="200"></svg>
<span id="fsbtn"></span>
<div class="wai-zmd">
<div id="txt-zmd">
<br><br>多想与你雪满华发
<br><br>却没法让你的冰心融化
<br><br>赌上青春与你画押
<br><br>到头来不过是一场笑话
<br><br>你说十里桃花两人一马
<br><br>后来谢了繁华生死无话
<br><br>奈何情深缘浅放不下
<br><br>在心上留下太深的伤疤
<br><br>我在等铁树开花
<br><br>等乌鸦说情话
<br><br>浪迹天涯奈何情深不达
<br><br>等到白发能否
<br><br>忘记我和你往事
<br><br>
</div>
</div>
</div>
<scripttype="module">
var sc = document.createElement('script');
sc.src = 'https://638183.freep.cn/638183/web/js/svgdr.js';
document.body.appendChild(sc);
sc.onload = () => {
var dr = _dr('#msvg');
dr.defs('defs');
dr.g('g1').addTo('defs');
dr.ellipse(100,100,35,60,'none','var(--color)',4).addTo('g1');
var total = 12;
Array(total).fill('').forEach( (_, k) => {
var color = `OliveDrab`;
dr.use('#g1').transform(`rotate(${360/total*k} 100 100) translate(40)`).style(`--color: ${color};`);
});
mydiv.onclick = () => {
mydiv.style.setProperty('--state', ['paused','running'][+aud.paused]);
aud.paused ? (aud.play(), vid.play(), vid1.play()) : (aud.pause(), vid.pause(), vid1.pause());
};
};
zmd();
function zmd(){
var ziBox = document.getElementById('txt-zmd');
var w = ziBox.clientWidth / 2;
var h = ziBox.clientHeight;
var style = document.createElement('style');
var keyframes = '@keyframes fly {to { top: -' + h + 'px;}}';
style.type = 'text/css';
style.innerHTML = keyframes;
ziBox.appendChild(style);
ziBox.style.animation = 'fly 52s linear infinite var(--state)';
ziBox.style.left = 'calc(50% - ' + w + 'px)'; //元素居中
}
import fscreen from 'https://638183.freep.cn/638183/web/mod/fscreen.js';
fscreen.fs('mydiv', 'fsbtn');
aud.play().catch(_ => dr.svg.style.setProperty('--state', 'paused'));
</script>
这个播放器点击还会变换{:5_150:}{:5_150:} 冬雨图片做的漂亮{:5_128:} 感谢分享{:5_124:} 这个播放器做的好，改了一下自己的想法，必须赞的{:5_139:} 这个播放器我还没有做的，以后抽时间做一次 谢谢冬雨分享这么多的播放器制作，小辣椒学习了{:5_128:} 小辣椒 发表于 2024-11-14 14:03
谢谢冬雨分享这么多的播放器制作，小辣椒学习了
小辣椒的朋友也是会播放器
{:5_150:}{:5_150:}{:5_150:}
页:
[1]