起个网名好难 发表于 2024-3-9 08:01

看樱花 ❀ 武汉

<meta name="referrer" content="never" />
<style>
#picBlk img        {width:600px; height:1410px; transform:rotate(-90deg) translate(405px,405px);position:absolute;top:0px;left:0px;}
#picBlk                        {width:1410px; height:600px; margin:100px 0 32px calc(50% - 785px);position:relative;overflow:hidden;border-radius:32px;box-shadow:4px 4px 10px #000;background-color:lightgray;}
#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/nicmKg5NmwmoZQ8UYRmKTB9LjIBw4sUc7bVttxMrmoK7kXiaDibuTGN2rfL8jjC3LJxuic1Dmrq8UQn6DnVyxEvRDw/640" />
<img src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/nicmKg5NmwmoZQ8UYRmKTB9LjIBw4sUc7bVttxMrmoK7kXiaDibuTGN2rfL8jjC3LJxuic1Dmrq8UQn6DnVyxEvRDw/640" />               
<audio id="mObj" src="https://music.163.com/song/media/outer/url?id=543142326.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/nicmKg5NmwmoZQ8UYRmKTB9LjIBw4sUc7bVttxMrmoK7kXiaDibuTGN2rfL8jjC3LJxuic1Dmrq8UQn6DnVyxEvRDw/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/nicmKg5NmwmoZQ8UYRmKTB9LjIBw4sUc7prxKiaxaWl6gRa0IvibunVNTFaCFpz1ocBj9KibyKDe0HWZRria46IpYqw/640",       
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/nicmKg5NmwmoZQ8UYRmKTB9LjIBw4sUc7zel0EQTswKicTdXl1kywSNZTfDMFqPqlSBsPdSib8icOAOXe4ynUKSqtQ/640",               
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/nicmKg5NmwmoZQ8UYRmKTB9LjIBw4sUc7HnmZSic47A4YkHibsNSdMicTOOnbvI7h0AcPUzFvuOdhGM8hCtsJ8utgA/640",               
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/nicmKg5NmwmoZQ8UYRmKTB9LjIBw4sUc7GlyFMvx9Zl6YibJoHRYDjjykncK5SXx5b9gLzxmNISa02kwG4YxucOw/640",               
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/nicmKg5NmwmoZQ8UYRmKTB9LjIBw4sUc743KMmCDTRTicicBVe7BOOPPMZNCMmdwlpp1VaFXib4TvKgIgFN61HbIoQ/640",               
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/nicmKg5NmwmoZQ8UYRmKTB9LjIBw4sUc7MM0HWdZp6bt1GUS0bU1LZFb5B8wibPrEkV2ooVOTOjZHOc2KBwicicbZw/640",               
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/nicmKg5NmwmoZQ8UYRmKTB9LjIBw4sUc7d4VBDFjxJ51AHq8nP9MibXttefiacKvc0ZhjbLTgInIrEwsNuyt5yhnw/640",               
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/nicmKg5NmwmoZQ8UYRmKTB9LjIBw4sUc7f0dW2HnwrCj9V8Atr01FEIU2s8t1ywDkGxzprHhseQJowm1xk1jLjA/640",               
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/nicmKg5NmwmoZQ8UYRmKTB9LjIBw4sUc7auS5LOILl4UT33kqE2SYkZa2xLBLDtuvQ4jQsV37DDbEpibd6yEqzJw/640",               
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/nicmKg5NmwmoZQ8UYRmKTB9LjIBw4sUc7umOA0kbdjFZ2Od2HOfboM17nBM2e2nHicj0QVg0sxEBkzkt0DQEpHMA/640",               
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/nicmKg5NmwmoZQ8UYRmKTB9LjIBw4sUc7Xia2jAticOiaic2xfyW9T4MV3oUz9duC4ibo9dDBM38K4bnrxlpy3ib0NLYQ/640",       
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/nicmKg5NmwmoZQ8UYRmKTB9LjIBw4sUc7A1xrFfP1oWoDw9rjXeaicxSkwhfP1icVs1AJo6X7CQopGj7QcAR80c1g/640",               
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/nicmKg5NmwmoZQ8UYRmKTB9LjIBw4sUc70pA8DqdkYU9LUm97zsxrwl2qeLHeIKMhn5LHTmO57HkaGgTzzBhTibQ/640",               
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/nicmKg5NmwmoZQ8UYRmKTB9LjIBw4sUc7aC9HTVZqvicPuicGbSBZOZ5TOcicZAIiaeR8heJyrHh1oDtXTrJqSxqAtg/640",       
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/nicmKg5NmwmoZQ8UYRmKTB9LjIBw4sUc725x9GA5DlP9p7Q6QMIRpteaf1KEibT5P18d1RFRKoYQM8yjv9DwaREA/640",               
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/nicmKg5NmwmoZQ8UYRmKTB9LjIBw4sUc7NKY82wUbEUzRia6SUb9eoBLbwceBj17156OyRaHntPXFJMg7gOzreeQ/640",               
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/nicmKg5NmwmoZQ8UYRmKTB9LjIBw4sUc7ITKDJAAbORLvDGrDNxyCogw9KOCIw0MMKicjI6MOdTNz5jF7NLRTA5A/640",               
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/nicmKg5NmwmoZQ8UYRmKTB9LjIBw4sUc777nEj66FLPvGRX815ym0o1MGx0Oc4GiaJXQFibwoe4Z1h0tpzhUhWiaug/640",               
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/nicmKg5NmwmoZQ8UYRmKTB9LjIBw4sUc7aUbmj2TgEmL4fth5hwzfy7CYicIzGxrsWb0VMBEVHWCAr5rM1etY8AQ/640",               
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/nicmKg5NmwmoZQ8UYRmKTB9LjIBw4sUc7Y1herptF0dpSwR7iaFm1eaEmDPjDhspPtUibW9IvEe6m9h0Aiblwxhr9Q/640",               
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/nicmKg5NmwmoZQ8UYRmKTB9LjIBw4sUc78CxJnxM32Q4koNtNib9DEiaHl0XbbvevTeibVQMghz4lyPpBqOFJPbjng/640",               
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/nicmKg5NmwmoZQ8UYRmKTB9LjIBw4sUc7wj0USUFQN3jn633DCytR83XzywdgTjGa1zTOxJAwdIZENOvPteicdGg/640",               
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/nicmKg5NmwmoZQ8UYRmKTB9LjIBw4sUc7OTsQRqnOB4r5ibtVT3uyFReebA6FLm5BZSOzpLHlibFh8c8jtnOXzz2A/640",               
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/nicmKg5NmwmoZQ8UYRmKTB9LjIBw4sUc7VS9PgDyWJySmUZicVkVzVu4YeBoibnuSfBe76BPQGCrr8CFSpsyibKp0Q/640",               
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/nicmKg5NmwmoZQ8UYRmKTB9LjIBw4sUc7gJCDax6IYE9vlrsNSUESiahL8iavhRRjMMQzkX21yOgeb6UXw2HyxP0Q/640",               
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/nicmKg5NmwmoZQ8UYRmKTB9LjIBw4sUc7qaetdEzNGMoKTNVE5XstlDwIojmoTicl1vaJTDaaicAVicNndoJmHiczXA/640",       
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/nicmKg5NmwmoZQ8UYRmKTB9LjIBw4sUc7ICrSicxekj0GUTibfHzW8VyHzQaYom0dpy6ytCr80ncvvl4l7s2XoJXQ/640",               
]
var keyFrames = [{
    clipPath: 'ellipse(10% 10% at 50% 50%)',
    opacity: '0.4'
}, {
    clipPath: 'ellipse(30% 30% at 50% 50%)',
    opacity: '0.7',
    offset: 0.3
}, {
    clipPath: 'ellipse(50% 50% at 50% 50%)',
    opacity: '1',
    offset: 0.5
}, {
    clipPath: 'ellipse(75% 75% at 50% 50%)',
    opacity: '0.4',
        offset: 1.0
}, {
    opacity: '0.4'
}];
var EffectTiming = {
    duration: 10000,
    fill: 'forwards'
};
var imgIdx = 0,
    lastIdx = imgSet.length - 1;
var bPic, fPic, aniObj;

function initTrun() {
    fPic = document.querySelectorAll('#picBlk > img');
        console.log(fPic.length);
    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>

红影 发表于 2024-3-9 09:25

又要到樱花季了，现在难难的帖子里欣赏美妙的樱花{:4_187:}

红影 发表于 2024-3-9 09:26

这徐徐展开的代码就拉开了一幅幅美丽。非常漂亮的制作。欣赏难难好帖{:4_199:}

亦是金 发表于 2024-3-9 09:47

漂亮的背景图片变换！喜欢！欣赏收藏，准备学习套用。谢谢老师分享！{:4_180:}

起个网名好难 发表于 2024-3-9 10:35

红影 发表于 2024-3-9 09:26
这徐徐展开的代码就拉开了一幅幅美丽。非常漂亮的制作。欣赏难难好帖

谢谢支持鼓励！

https://tukuimg.bdstatic.com/scrop/44917505685c98f156a29cb087e19446.gif

起个网名好难 发表于 2024-3-9 10:35

亦是金 发表于 2024-3-9 09:47
漂亮的背景图片变换！喜欢！欣赏收藏，准备学习套用。谢谢老师分享！

谢谢支持鼓励！

https://tukuimg.bdstatic.com/scrop/44917505685c98f156a29cb087e19446.gif

樵歌 发表于 2024-3-9 11:23

美不胜收呵

起个网名好难 发表于 2024-3-9 11:52

樵歌 发表于 2024-3-9 11:23
美不胜收呵

谢谢支持鼓励！

https://tukuimg.bdstatic.com/scrop/44917505685c98f156a29cb087e19446.gif

红影 发表于 2024-3-9 11:56

起个网名好难 发表于 2024-3-9 10:35
谢谢支持鼓励！

谢谢难难的美好祝福，周六快乐{:4_187:}

起个网名好难 发表于 2024-3-9 12:28

红影 发表于 2024-3-9 11:56
谢谢难难的美好祝福，周六快乐

https://dingyue.ws.126.net/d9ogQcfXBqB63qK5P8G9uio7biwAs4f6hrowrz33LnxqN1530715968168.gif

小辣椒 发表于 2024-3-9 14:55

难难这个图片特效好漂亮的，感谢分享{:4_199:}

小辣椒 发表于 2024-3-9 14:57

武大 樱花是开的最漂亮的地方，我们这里也是有樱花开了，但还不多

起个网名好难 发表于 2024-3-9 16:09

小辣椒 发表于 2024-3-9 14:55
难难这个图片特效好漂亮的，感谢分享

谢谢支持鼓励！

https://pic.app.ybvv.com/20180623_983628_1529736901770.gif

起个网名好难 发表于 2024-3-9 16:10

小辣椒 发表于 2024-3-9 14:57
武大 樱花是开的最漂亮的地方，我们这里也是有樱花开了，但还不多

花季时人太多

红影 发表于 2024-3-9 22:11

起个网名好难 发表于 2024-3-9 12:28


问好难难，晚上好{:4_187:}

起个网名好难 发表于 2024-3-10 06:09

红影 发表于 2024-3-9 22:11
问好难难，晚上好

https://image.77fanwen.com/allimg/191210/1-191210110319-50.jpg

红影 发表于 2024-3-10 10:18

起个网名好难 发表于 2024-3-10 06:09


大家一起好心情{:4_205:}
页: [1]
查看完整版本: 看樱花 ❀ 武汉