漫步特效《南楼令》
<style>#mydiv {
margin: 130px 0 0 calc(50% - 951px);
width: 1700px;
height: 900px;
border: 4px solid rgba(0, 0, 0, .15);
border-radius: 10px;
background: gray url('https://webftp-bbs.hnol.net/ggkj2017/yunduanmanbu/16/fd.jpg') no-repeat center/cover;
box-shadow: 4px 4px 16px rgba(0, 0, 0, .25);
position: relative;
display: grid;
place-items: center;
overflow: hidden;
}
#mydiv::before {
position: absolute;
content: attr(data-title);
/* 修改为左边 */
left: 17%;
top: 63%;
font: bold 1.8em/2em sans-serif;
color: GoldEnrod;
text-shadow: 1px 1px #000;
opacity: .62;
z-index: 4;
}
#iRed {
position: absolute;
color: red;
transition: .5s;
}
#iRed:hover {
font-size: 20px;
font-weight: bold;
}
#myplayer {
position: absolute;
cursor: pointer;
width: 150px; /* 增大宽度 */
height: 150px; /* 增大高度 */
/* 修改为与歌曲列表左对齐 */
left: 200px;
/* 根据歌曲列表位置调整底部距离,这里将值调小 */
bottom: 250px;
z-index: 12;
mix-blend-mode: screen;
opacity: .82;
/* 移除旋转动画 */
}
.tbox {
width: 60px;
height: 26px;
text-align: center;
font: normal 16px/26px sans-serif;
cursor: pointer;
z-index: 10;
}
.tbox:hover {
color: pink;
}
.tbox:active {
color: red;
}
#vid {
position: absolute;
width: 100%; /* 修改为 100% */
height: 100%; /* 修改为 100% */
top: 0; /* 修改为 0 */
left: 0; /* 添加 left: 0 */
object-fit: cover; /* 保持宽高比并覆盖整个容器 */
mask: radial-gradient(transparent 20%, red);
-webkit-mask: radial-gradient(transparent 20%, red);
mix-blend-mode: screen;
opacity: .42;
transform: rotateY(180deg) scaleY(-1); /* 添加 scaleY(-1) 实现垂直翻转 */
}
@keyframes rotating {
to {
transform: rotate(360deg);
}
}
#songList {
position: absolute;
left: 200px;
top: 100px;
max-width: 262px;
color: #eee;
}
.songItem {
cursor: pointer;
margin-bottom: 5px;
}
.songItem:hover {
color: pink;
}
.songItem:active {
color: red;
}
/* 大红灯笼样式 */
.big-red-lantern {
position: absolute;
width: 60px;
height: 90px;
background: radial-gradient(circle at center, red 40%, white 100%);
border-radius: 50%;
pointer-events: none;
opacity: 0.8;
animation: fall 3s ease-in-out forwards; /* 加快飘落速度,从5s改为3s */
}
/* 大红灯笼顶部白线 */
.big-red-lantern::before {
content: '';
position: absolute;
top: -50px;
left: 50%;
width: 1px;
height: 50px;
background-color: white;
}
@keyframes float {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-10px);
}
}
@keyframes fall {
0% {
top: 0;
opacity: 0;
}
100% {
top: 900px; /* 根据 #mydiv 的高度调整 */
opacity: 0.8;
}
}
</style>
</head>
<body>
<div id="mydiv">
<video id="vid" src="https://img.tukuppt.com/video_show/1863507/00/25/22/5f6c2c5b1c44e.mp4" muted loop></video>
<audio id="aud" src="" autoplay loop></audio>
<div id="songList"></div>
<img id="myplayer" src="https://webftp-bbs.hnol.net/ggkj2017/yunduanmanbu/16/2/err.gif" alt="" />
</div>
<script>
let songs = [
["赤伶 - 谭晶", "2137661995"],
["何者 - 谭晶/HOYO-MiX", "2658660685"],
["真爱永在 (TV Version) - 谭晶", "34999296"],
["因为有你 - 谭晶", "135430"],
["爱的光芒 - 张杰/谭晶", "34179924"],
["我愿 - 谭晶", "2702719329"],
["唱歌的少年 (Live) - 谭晶", "1875266260"],
["不可阻挡 - 谭晶", "1892286692"],
["秦风 - 谭晶", "27785283"],
["我爱你中国(伴奏) - 谭晶", "294262"],
["英雄往来天地间 - 谭晶", "26830193"],
["三德歌 - 谭晶", "31680133"]
];
/* 显示歌曲列表 */
(function () {
let output = '';
songs.forEach((, index) => {
let sUrl = songId.includes('http') ? songId : 'https://music.163.com/song/media/outer/url?id=' + songId;
output += `<div class="songItem" title="${songName}" onclick="playSong('${sUrl}','${songName}');this.style.color='navy';">${index + 1}. ${songName}</div>`;
});
songList.innerHTML = output;
let firstSong = songs;
let songName = firstSong, songUrl = firstSong;
let fullUrl = songUrl.includes('http') ? songUrl : 'https://music.163.com/song/media/outer/url?id=' + songUrl;
playSong(fullUrl, songName);
})();
/* 播放歌曲 */
function playSong(url, song) {
aud.src = url;
mydiv.dataset.title = song;
};
/* 控制播放状态 */
let mState = () => aud.paused ? (mydiv.style.setProperty('--state', 'paused'), vid.pause()) : (mydiv.style.setProperty('--state', 'running'), vid.play());
aud.addEventListener('playing', mState, false);
aud.addEventListener('pause', mState, false);
myplayer.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
// 从上面飘落下大红灯笼
function createBigLantern() {
const myDiv = document.getElementById('mydiv');
const myDivLeft = myDiv.offsetLeft;
const myDivWidth = myDiv.offsetWidth;
for (let i = 0; i < 5; i++) { // 增加每次生成的大红灯笼数量
let lantern = document.createElement('div');
lantern.classList.add('big-red-lantern');
// 确保大红灯笼在 #mydiv 内部开始飘落
lantern.style.left = myDivLeft + (Math.random() * (myDivWidth - 60)) + 'px';
lantern.style.top = myDiv.offsetTop + 'px';
myDiv.appendChild(lantern); // 将灯笼添加到 #mydiv 内部
setTimeout(() => {
lantern.remove();
}, 3000);
}
}
setInterval(createBigLantern, 800); // 缩短生成间隔,增加整体数量
</script>
很有特色,感谢醉美管理员精彩分享 klxf 发表于 2025-6-18 17:09
很有特色,感谢醉美管理员精彩分享
谢谢友友光临!
页:
[1]