二月二 龙抬头
本帖最后由 起个网名好难 于 2024-3-11 19:26 编辑 <br /><br /><meta name="referrer" content="never" /><style>
#picBlk img {width:600px; height:960px; position:absolute;top:0px;left:0px;transform-origin:center; }
#picBlk {width:600px; height:960px; margin:100px 0 32px calc(50% - 351px);position:relative;overflow:hidden;border-radius:32px;box-shadow:4px 4px 10px #000;}
#indicator{position:absolute;left:30%;bottom:10px;width:40%;margin:10px auto; appearance: none; height:8px; overflow:hidden; border-radius: 8px;cursor:pointer;}
#indicator::-webkit-progress-bar {background:pink;}
#indicator::-webkit-progress-value {background:hsl(125, 72%, 72%);}
#rdisk { font-size:40px; color:red; cursor: pointer; animation: rotating 6s infinite linear ; animation-play-state: rinning;position:absolute; left:calc(50% - 20px); bottom:40px; z-index:100;display:block;border-radius:50%;}
@keyframes rotating { to { transform: rotate(360deg); } }
</style>
<div id="picBlk">
<img src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7RHI7ngMnb8kicD25jia6bFibKqjloah1lIJjqN9iaxezFPeB5Eicmf2DvjY7hicFEQPYr6qEYZlIbjdFiaQ/640" />
<img src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7RHI7ngMnb8kicD25jia6bFibKqjloah1lIJjqN9iaxezFPeB5Eicmf2DvjY7hicFEQPYr6qEYZlIbjdFiaQ/640" />
<audio id="mObj" src="https://music.163.com/song/media/outer/url?id=1425057194.mp3" loop autoplay ></audio>
<progress value='0.0' max='100.0' id='indicator'></progress>
<div id="rdisk" >✠</div>
</div>
<script>
var imgSet = [
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7RHI7ngMnb8kicD25jia6bFibKU1Cz8WibV8AvQBZK9Ytu0UZgXSKjlNbUa1HC3R9qeaq29F9DLjAHb7g/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7RHI7ngMnb8kicD25jia6bFibKrS3MVYlauRIjnPnw82qDvMCSAibbLpicWDcYq3aSDWaON0RdicOEh08IQ/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7RHI7ngMnb8kicD25jia6bFibKUC257VU6xEve4sSR9MQO3Iic5t0pa38GnhxFGR1B4BSiaujvhoicQY7yQ/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7RHI7ngMnb8kicD25jia6bFibKqjRxstHE7Ga9LDDlN4WZrRWVUs7tOu3sPbribVD3cbnd4fzC6Lj4ia9w/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7RHI7ngMnb8kicD25jia6bFibKQNyOTl1JzjskVCoyzKSibB9RFicIkEgBamVj4SsOkA4NcHkKkcTIqXhQ/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7RHI7ngMnb8kicD25jia6bFibKQLQsrZFQAUaExV15q69bujna7EiaaRmMO0xLblJibBXCsrofSiaed6WGQ/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7RHI7ngMnb8kicD25jia6bFibKjDiaF5XGdsO8WzSRcWTQPML6w3LsUlrEyXp8MsOk8lsxycXqlayWv8A/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7RHI7ngMnb8kicD25jia6bFibKsCd1meXEUvGfhC006fc3rjUwrrIefgIXOlWBGh9IF4rfp1Up6flYbw/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7RHI7ngMnb8kicD25jia6bFibKH7FqJwqK4icz218qnTdD564hJSvF6MdM4Bt8CFU3ibR7qfediabGTeiawg/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7RHI7ngMnb8kicD25jia6bFibKHhd5QH20OdjCcVmrVBFWdtcQibo584SiaEDu6yubR2YosJQWEn1cywHw/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7RHI7ngMnb8kicD25jia6bFibKvLc2KhNqLaK2FQ3ZD6QOYS8jkhkEzVjyR8gUBg3dIQXicKoANSwMJsA/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7RHI7ngMnb8kicD25jia6bFibKiaiaRTb8wu7jGbGgYSicEa3tsxJZ7PT9n90dIYMNHfyTywTyu0sXjicy5A/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7RHI7ngMnb8kicD25jia6bFibKfA8ibF6jnYtVublf0eE8tjPHmakicRgqzIQP1lHArr3VVeIRYCefSKpg/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7RHI7ngMnb8kicD25jia6bFibKvZiaohPic3oO3NDo4zv0ibwXUoYHKanPFPppdJIiam1zqNmAZUEaMzpyyQ/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7RHI7ngMnb8kicD25jia6bFibKay1YfCXp8WpmABSic3UBtw7LeZYrpjRK3lBibRmHZJdlt11jbZK4tfXQ/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7RHI7ngMnb8kicD25jia6bFibKqjloah1lIJjqN9iaxezFPeB5Eicmf2DvjY7hicFEQPYr6qEYZlIbjdFiaQ/640"
]
var keyFrames =
[{clipPath: 'polygon(50% 0%, 50% 50%, 0% 50%, 50% 50%,50% 100%, 50% 50%, 100% 50%, 50% 50%)', opacity:'0.4'},
{clipPath: 'polygon(50% 0%, 25% 25%, 0% 50%, 25% 75%,50% 100%, 75% 75%, 100% 50%, 75% 25%)', opacity:'0.7', offset:0.5},
{clipPath: 'polygon(50% 0%, 0% 0%, 0% 50%, 0% 100%,50% 100%, 100% 100%, 100% 50%, 100% 0%)', opacity:'1', offset:0.8},
{clipPath: 'polygon(50% 0%, 0% 0%, 0% 50%, 0% 100%,50% 100%, 100% 100%, 100% 50%, 100% 0%)', opacity:'0.7'}];
var EffectTiming = {
duration: 10000,
fill: 'forwards'
};
var imgIdx = 0,
lastIdx = imgSet.length - 1;
var bPic, fPic, aniObj;
function initTrun() {
fPic = document.querySelectorAll('#picBlk > img');
aniObj = fPic.animate(keyFrames, EffectTiming);
aniObj.pause();
aniObj.onfinish = chg_cur_pic;
chg_cur_pic()
}
function chg_cur_pic() {
fPic.src = imgSet;
fPic.style.opacity = 0.3;
fPic.src = imgSet;
lastIdx = imgIdx;
imgIdx++;
imgIdx %= imgSet.length;
aniObj.play()
}
initTrun();
/**-----------------------------------------**/
rdisk.style.animationPlayState = mObj.paused;
mObj.addEventListener('timeupdate', function() {
if(indicator) {
indicator.value = this.currentTime / this.duration * 100;
}
});
rdisk.onclick = function() {
if (mObj.paused) {
this.style.animationPlayState = 'running';
mObj.play();
} else {
this.style.animationPlayState = 'paused';
mObj.pause();
}
};
/***************************************************/
</script>
这个节日帖子好吉利啊，二月二龙抬头，幸福美满随人走{:4_187:} 看着一张美好寓意的图图，感觉幸福就在身边{:4_187:} 红影 发表于 2024-3-11 20:09
这个节日帖子好吉利啊，二月二龙抬头，幸福美满随人走
谢谢支持鼓励!
晚上好！ 红影 发表于 2024-3-11 20:11
看着一张美好寓意的图图，感觉幸福就在身边
萌萌哒 起个网名好难 发表于 2024-3-11 21:16
谢谢支持鼓励!
晚上好！
这个帖子特别好，带来了美好的感受呢{:4_187:} 起个网名好难 发表于 2024-3-11 21:16
萌萌哒
看看这样的帖子，感觉真好{:4_187:} 背景变换新颖，歌曲好听轻快，寓意美好！好帖！！！收藏保存了！{:4_180:} 红影 发表于 2024-3-11 21:38
看看这样的帖子，感觉真好
https://p0.itc.cn/q_70/images03/20210326/a95bbcc7a8fa463db9bf01f8a92735de.gif 亦是金 发表于 2024-3-11 22:05
背景变换新颖，歌曲好听轻快，寓意美好！好帖！！！收藏保存了！
https://p0.itc.cn/q_70/images03/20210326/a95bbcc7a8fa463db9bf01f8a92735de.gif
谢谢支持鼓励！ 起个网名好难 发表于 2024-3-12 07:10
谢谢难难的美好祝福，忙了一天，刚来收这么多漂亮的伞{:4_173:} 红影 发表于 2024-3-12 21:50
谢谢难难的美好祝福，忙了一天，刚来收这么多漂亮的伞
晴天防晒、雨天挡雨{:5_117:} 起个网名好难 发表于 2024-3-12 22:34
晴天防晒、雨天挡雨
用途多多，正好春天了，雨水多，阳光也灿烂，美丽的小伞正好派用途呢{:4_187:}
页:
[1]