《远方的思念》- 央金兰泽
本帖最后由 加林森 于 2022-5-24 13:48 编辑 <br /><br /><style>.wrap {
left: -302px;top:150px;
width: 1200px;
height: 675px;
background: teal url('https://pic.imgdb.cn/item/628c6d83094754312961a9cf.jpg') no-repeat
center/cover;
position: relative;
box-shadow:4px 4px 5px #333;
border-radius:8px;
}
.wrap::before {
content: '';
position: absolute;
width: 50%;
height: 50%;
background: url('https://pic.imgdb.cn/item/6235d74f5baa1a80ab9d74a0.gif') no-repeat
center/cover;
opacity: .55;
left:60px; top: 20px;
}
.progress {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
width: 155px;
height: 155px;
left: 980px;
top: 260px;
border-radius: 50%;
background: conic-gradient(from 180deg,#29ab7c0%,#e4f6f9 0%);
cursor: pointer;
}
.progress::before {
position: absolute;
content: attr(data-per);
width: 135px;
height: 135px;
border-radius: 50%;
background: #F0FFFF url('https://pic.imgdb.cn/item/628c71740947543129674ffe.jpg');
text-align: center;
font: normal 26px / 135px sans-serif;
}
</style>
<div class="wrap">
<div class="progress" data-per="0%"></div>
<audio id="aud" src="http://www.kumeiwp.com/sub/filestores/2022/05/23/7c8b6dc5d21216dba8d72323e8017b21.mp3" loop="loop"
autoplay="autoplay"></audio>
</div><br><br><br><br><br><br>
<script>
let progress = document.querySelector('.progress');
let aud = document.querySelector('#aud');
let current, task;
aud.addEventListener('timeupdate', function(){
task = aud.duration;
current = aud.currentTime;
setProgress(task,current);
});
progress.onclick = () =>{
aud.paused ? aud.play() : aud.pause();
};
function setProgress(tt,cc) {
if(tt <= 0 || cc <= 0) return false;
let prog = 100 * cc / tt;
progress.style.background = `conic-gradient(from 180deg,#29ab7c ${prog}%,#e4f6f9 ${prog}%)`;
progress.setAttribute('data-per', prog.toFixed() + '%');
}
</script>
<br><br><br><br><br><br><br><br><br><br>
远方的思念-央金兰泽
蓝天有多高
问一问天上的云
河水有多长
看一看河边的沙
远方的爱人
你是否能够听到
这爱的思念流淌的歌谣
我多想让它
夜夜荡漾在你的身旁
让它的舞步踩着月光
把我的梦从天涯
牵到你的身旁
蓝天有多蓝
问一问无边的海
河水有多清
看一看眼中的泪
远方的爱人
你是否能够听到
这爱的思念流淌的歌谣
我多想让它
夜夜荡漾在你的身旁
让它的舞步踩着月光
把我的梦从天涯
牵到你的身旁
蓝天有多蓝
问一问无边的海
河水有多清
看一看眼中的泪
远方的爱人
你是否能够听到
这爱的思念流淌的歌谣
我多想让它
夜夜荡漾在你的身旁
让它的舞步踩着月光
把我的梦从天涯
牵到你的身旁
蓝天有多蓝
问一问无边的海
河水有多清
看一看眼中的泪
远方的爱人
你是否能够听到
这爱的思念流淌的歌谣
我多想让它
夜夜荡漾在你的身旁
让它的舞步踩着月光
把我的梦从天涯
牵到你的身旁
蓝天有多蓝
问一问无边的海
河水有多清
看一看眼中的泪
远方的爱人
你是否能够听到
这爱的思念流淌的歌谣
我多想让它
夜夜荡漾在你的身旁
让它的舞步踩着月光
把我的梦从天涯
牵到你的身旁
蓝天有多蓝
问一问无边的海
河水有多清
看一看眼中的泪
远方的爱人
你是否能够听到
这爱的思念流淌的歌谣
我多想让它
夜夜荡漾在你的身旁
让它的舞步踩着月光
把我的梦从天涯
牵到你的身旁
蓝天有多蓝
问一问无边的海
河水有多清
看一看眼中的泪
远方的爱人
你是否能够听到
这爱的思念流淌的歌谣
我多想让它
夜夜荡漾在你的身旁
让它的舞步踩着月光
把我的梦从天涯
牵到你的身旁 蓝天白云，远方的思念 队长的圆环播放器做的漂亮{:4_199:} 依蘩 发表于 2022-5-24 15:54
蓝天白云，远方的思念
依依来啦。好久不见了哦。你还好吗？{:4_204:} 红影 发表于 2022-5-24 16:12
队长的圆环播放器做的漂亮
红影下午好。我出去锻炼才回来。{:4_204:} 醉美水芙蓉 发表于 2022-5-24 17:01
好听！欣赏学习队长佳作！
谢谢水芙蓉！下午好！{:4_204:} 加林森 发表于 2022-5-24 16:22
红影下午好。我出去锻炼才回来。
这个颜色搭配特别好，队长的帖子真漂亮{:4_187:} 红影 发表于 2022-5-24 20:42
这个颜色搭配特别好，队长的帖子真漂亮
嗯嗯。我是听了音乐去找的图，然后再去找这个美女的。 加林森 发表于 2022-5-24 20:44
嗯嗯。我是听了音乐去找的图，然后再去找这个美女的。
这个做得很不错的{:4_187:} 红影 发表于 2022-5-25 10:38
这个做得很不错的
谢谢！ 加林森 发表于 2022-5-24 16:22
依依来啦。好久不见了哦。你还好吗？
谢谢队长，我很好{:4_204:}
听见远方的思念了{:5_117:} 依蘩 发表于 2022-5-25 11:13
谢谢队长，我很好
听见远方的思念了
这就对了。终于把你思念出来了。{:4_189:} {:4_173:}{:4_189:}{:4_191:} 依蘩 发表于 2022-5-25 11:23
{:4_170:}{:4_204:}{:4_191:}
页:
[1]