中国风
<meta charset="utf-8">
<meta name="referrer" content="never" />
<style>
:root {--w:460px;--h:600px;}
#oBlk {
margin: 30px 0 30px calc(50% - 561px);
width: 960px;
height: 540px;
box-shadow: 3px 3px 8px black;
position: relative;
overflow:hidden;
}
#innerBlk {
width: var(--w);
height: var(--h);
overflow: hidden;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.stage {
width: var(--w);
height: var(--h);
mask: radial-gradient(closest-side, red 60%, transparent);
}
#controlBox {position:absolute; right:10px;bottom:10px;width:80px;z-index:100;}
#bjVid {width:110%; position:absolute; left:0; bottom:0px;}
</style>
<div id="oBlk">
<video id="bjVid" src="https://img.tukuppt.com/video_show/3664703/00/02/02/5b4f07452a155.mp4" loop autoplay muted></video>
<div id='innerBlk'>
</div>
<div id="controlBox">
<svg viewbox="0 0 100 100" >
<path fill="#f00" d="M35 35 l30 15 -30 15 z" id="playCtrl"/>
</svg>
</div>
<audio id="bjMusic" src="https://music.163.com/song/media/outer/url?id=2648255317.mp3" loop autoplay /> // 1914674022
</div>
<script>
{
let pics = [
"https://mmbiz.qpic.cn/mmbiz_jpg/l0ogkK0YODFwcgongWscoNJEJ9KTpU3VEY2b7nIzsicsBOfCzGKZkVVwYAHE4Em8k5iaut9vHUYHIFpBWIiceeung/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/l0ogkK0YODFwcgongWscoNJEJ9KTpU3V8DPyCjCf0nJNogybSCeAzPZeV5BgZ1HBqdnptic9HkEtasb45SHg1hQ/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/l0ogkK0YODFwcgongWscoNJEJ9KTpU3VLRdd0ia5g0EJgOEKPcJ03cwxFFAYUxac59lU85ccN4c2XSZ4Zq1k8DQ/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/l0ogkK0YODFwcgongWscoNJEJ9KTpU3VOLhfFjhib6xSIwLjZ8JE7ZGo3peL6bwle44TgQX6aDJWJcSf4XXicqbA/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/l0ogkK0YODFwcgongWscoNJEJ9KTpU3Vy0wJ0gicBe8wo13pUsk6iaH2L7AHyy7rflBsxfvHnvgjZclQdbN0LiaFQ/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/l0ogkK0YODFwcgongWscoNJEJ9KTpU3Vw0KOdWCZPX8Lj6FnrLEVsu7PFRrRvwMsft28ic2RJxuhGNWTGlZgerQ/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/l0ogkK0YODFwcgongWscoNJEJ9KTpU3V1nskxFrz6iaPhKAqJvI6eRK71sgrXXnKCG05VtZyBicibOYzG0f2JO63g/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/l0ogkK0YODFwcgongWscoNJEJ9KTpU3VMHrcib2OicxM3O4PK8Wo3oQJxaNWaibBvCdKCZOZDJdrS0oVJ8I6QXW9A/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/l0ogkK0YODFwcgongWscoNJEJ9KTpU3VqR7PvG9j6qaicl2AuTpZJ2qQttHItevRVqY4tUEXqk74WKGgH8tUNmA/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/l0ogkK0YODFwcgongWscoNJEJ9KTpU3VLRaJ6ZCLgewlx5oOvohAQFGDkzAHWnVGLzx31fXnlv3qot7AXvjBIQ/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/l0ogkK0YODFwcgongWscoNJEJ9KTpU3Vdl0RVlf5u1mPICIm6Aic66cCtyMNmSG8XfNPVIibGswdRuXicQ3uSFgQA/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/l0ogkK0YODFwcgongWscoNJEJ9KTpU3VuqI4dM0cicrmKSYI9Oc8GK2c6lSPCwAPJ2bjCb28icvg68G7SW9hyjibg/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/l0ogkK0YODFwcgongWscoNJEJ9KTpU3VrwaEyNZlibgyEQHgWSwibdlngwXUuO5yS7Jd11a5TXzsg6WNenIhG8zw/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/l0ogkK0YODFwcgongWscoNJEJ9KTpU3Vic2K4R6ic4SpludnXGWcF6mOQAQY8QUYpbWr058nticBq3jwcge7cP2LA/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/l0ogkK0YODFwcgongWscoNJEJ9KTpU3Vhm7abJiaxaIYS8obEia96yZqEYEt7tykgu6Hk6ibkGVicEnkZAO8zOpLdQ/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/l0ogkK0YODFwcgongWscoNJEJ9KTpU3VX6Mxs1Z9l0vxv0TvrgTrxwukBgcRn790xJGH0ibdjHzpk2mLqZUy7QA/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/l0ogkK0YODFwcgongWscoNJEJ9KTpU3VYRZjSRNzf2bwUzDlBTmT7IiafkvzFlCicNTQ6ZvkWPccOI7ZTe8GfIsw/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/l0ogkK0YODFwcgongWscoNJEJ9KTpU3Vwuckqciahkkxe7MZtIbZnLAvNgericrVlpht5XX0Z8697tOFXFORibuWw/640",
];
function genTagObj(parentNode,jsonData){let sObj=document.createElementNS("http://www.w3.org/2000/svg",jsonData.tag);for(let key in jsonData){if(key==='tag'){continue}else if(jsonData.hasOwnProperty(key)){sObj.setAttribute(key,jsonData)}};if(parentNode)parentNode.appendChild(sObj);return sObj};
let mysvg = genTagObj(null ,{'tag':'svg', 'id':'svgObj', 'xmlns:xlink':"http://www.w3.org/1999/xlink" ,'xmlns':"http://www.w3.org/2000/svg", 'viewBox':`0 0 ${innerBlk.clientWidth} ${innerBlk.clientHeight}`});
pics.forEach((pic, idx) => {
let beginStr = idx == 0 ? `0;ep${pics.length-1}.end-1` : `ep${idx-1}.end-1`;
let imgObj = genTagObj(mysvg,{'tag':'image','id':`p${idx}`, 'xlink:href':pic, 'width':innerBlk.clientWidth, 'height':innerBlk.clientHeight, 'x':0, 'y':0, 'opacity':0, 'preserveAspectRatio':'none', 'class':'stage'});
let aniObj = genTagObj(imgObj,{'tag':'animate','id':`bp${idx}`, 'attributeName':'opacity', 'from':0, 'to':1, 'dur':2, 'begin':beginStr, 'fill':'freeze', 'class':'sTag'});
aniObj = genTagObj(imgObj,{'tag':'animate','id':`ep${idx}`, 'attributeName':'opacity', 'from':1, 'to':0, 'dur':2, 'begin':`bp${idx}.begin+8`, 'fill':'freeze'});
});
innerBlk.innerHTML = mysvg.outerHTML;
const pausePath = "M35 35 h12 v30 h-12 z m18 0 h12 v30 h-12 z";
const playPath = "M35 35 l30 15 -30 15 z";
const musicObj = bjMusic;
playCtrl.onclick = () => musicObj.paused
? (musicObj.play()) : (musicObj.pause());
musicObj.addEventListener('play', () => {playCtrl.setAttribute('d', pausePath); bjVid.play(); svgObj.unpauseAnimations();});
musicObj.addEventListener('pause', () => {playCtrl.setAttribute('d', playPath), bjVid.pause(); svgObj.pauseAnimations();});
}
</script> 漂亮！谢谢难难老师精彩分享{:4_191:} 杨帆 发表于 2025-2-20 12:29
漂亮！谢谢难难老师精彩分享
谢谢支持与欣赏！ 这是古代走廊，漂亮！
本帖最后由 梦江南 于 2025-2-20 17:13 编辑
用淡入淡出来切换图片，又是一种玩法。这个创意太棒了！误认为是视频在起作用呢。{:4_187:} 好美，欣赏！ 梦江南 发表于 2025-2-20 17:03
这是古代走廊，漂亮！
谢谢支持与欣赏！ 梦江南 发表于 2025-2-20 17:04
用淡入淡出来切换图片，又是一种玩法。这个创意太棒了！误认为是视频在起作用呢。
不会做视频，找图拼凑的。 小文 发表于 2025-2-20 17:27
好美，欣赏！
谢谢支持与欣赏！ 这淡入淡出的图片轮播真好，和动态背景也那么协调，美妙的古风建筑，穿越了千年历史{:4_187:} 欣赏难难好帖{:4_199:} 红影 发表于 2025-2-20 19:22
欣赏难难好帖
谢谢支持与欣赏！ 红影 发表于 2025-2-20 19:21
这淡入淡出的图片轮播真好，和动态背景也那么协调，美妙的古风建筑，穿越了千年历史
本来是用滚动来切换但感觉不是很好，选用淡入淡出比较简单成熟。 起个网名好难 发表于 2025-2-20 20:14
本来是用滚动来切换但感觉不是很好，选用淡入淡出比较简单成熟。
这个淡入淡出更自然呢，好看{:4_187:} 起个网名好难 发表于 2025-2-20 20:11
谢谢支持与欣赏！
那些滚动图片很有代表性，难难辛苦了{:4_187:} 红影 发表于 2025-2-20 20:48
这个淡入淡出更自然呢，好看
其实还是对其他的方法不熟悉的缘故。 起个网名好难 发表于 2025-2-20 21:21
其实还是对其他的方法不熟悉的缘故。
哪里，难难熟呢，你谦虚了{:4_187:} 红影 发表于 2025-2-20 22:06
哪里，难难熟呢，你谦虚了
想说句真话就这么难{:5_102:} 让我们仿佛行走在中国五千年所有的山水美景和庭院之中，制作太过精良，发在论坛上让俺大饱眼福了，就是在央妈上播放也是吸睛的！ 樵歌 发表于 2025-2-21 10:12
让我们仿佛行走在中国五千年所有的山水美景和庭院之中，制作太过精良，发在论坛上让俺大饱眼福了，就是在央 ...
谢谢支持与欣赏！
谬赞了