江山如画

夕阳黄昏 发表于 2024-11-19 08:10

本帖最后由夕阳黄昏于 2024-11-18 18:16 编辑 <br /><br /><meta name="referrer" content="never" />
<style>
@import url('https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css');

:root{--rState:running;--w:650px;--h:975px;}
#outBlk{position:relative;width:var(--w);height:var(--h);background-color:#000000 ;overflow:hidden;margin-top:90px;left:50%;transform:translate(-50%);box-shadow:4px 4px 10px #000;}
zxx-slide{width:var(--w);height:var(--h);position:absolute;}
.zxx-slide-a{position:absolute;cursor:default;pointer-events:none;z-index:0; animation-duration:2s;animation-name: ;transition:1s;animation-play-state:paused;}
.zxx-slide-img{width:var(--w);height:var(--h);}

#player{position:absolute;right:20px;bottom:10px;width:80px;height:80px;cursor:pointer;z-index:100;animation: pRot 8s linear infinite var(--rState);}
@keyframes pRot { to { transform: rotate(360deg); } }

</style>
<div id="outBlk">
<zxx-slide></zxx-slide>

<svg viewbox="0 0 300 300" id="player">
<radialGradient id="rg" r="0.8">
   <stop offset="0" stop-color="pink"></stop>
   <stop offset=".3" stop-color="AquaMarine"></stop>
   <stop offset="1" stop-color="blue"></stop>
</radialGradient>
   <path d="M150 150
A 60 30 0 0 0 295 150
A 60 30 0 1 0 150 150
A 60 30 40 0 0 261.08 243.20
A 60 30 40 1 0 150 150
A 60 30 80 0 0 175.18 292.80
A 60 30 80 1 0 150 150
A 60 30 120 0 0 77.50 275.57
A 60 30 120 1 0 150 150
A 60 30 160 0 0 13.74 199.59
A 60 30 160 1 0 150 150
A 60 30 200 0 0 13.74 100.41
A 60 30 200 1 0 150 150
A 60 30 240 0 0 77.50 24.43
A 60 30 240 1 0 150 150
A 60 30 280 0 0 175.18 7.20
A 60 30 280 1 0 150 150
A 60 30 320 0 0 261.08 56.80
A 60 30 320 1 0 150 150" fill="url(#rg)" fill-rule="evenodd"></path>
</svg>

<audio src="https://music.163.com/song/media/outer/url?id=419485457.mp3" loop autoplay id="mObj" />
</div>

<script>
{
let aniActNames = ["bounce","flash","pulse","rubberBand","shakeX","shakeY","headShake","swing","tada","wobble","jello","heartBeat","backInDown","backInLeft","backInRight","backInUp","bounceIn","bounceInDown","bounceInLeft","bounceInRight","bounceInUp","fadeIn","fadeInDown","fadeInDownBig","fadeInLeft","fadeInLeftBig","fadeInRight","fadeInRightBig","fadeInUp","fadeInUpBig","fadeInTopLeft","fadeInTopRight","fadeInBottomLeft","fadeInBottomRight","flip","flipInX","flipInY","lightSpeedInRight","lightSpeedInLeft","rotateIn","rotateInDownLeft","rotateInDownRight","rotateInUpLeft","rotateInUpRight","hinge","jackInTheBox","rollIn","zoomIn","zoomInDown","zoomInLeft","zoomInRight","zoomInUp","slideInDown","slideInLeft","slideInRight","slideInUp"];

let pics = [
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/ZyAxVN9OeK6XFwEYZBPwvYOlRjf0ZZ003cicP9u62jouHDoY0E2ntcGiakKDECLLPm2HYpQuDdQVA8ZIxaAFjIoA/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/ZyAxVN9OeK6XFwEYZBPwvYOlRjf0ZZ00l0ROpQmGDMSjcJvGmeNLKWgTPxuOy9Q4Bic6VuHgBWX7ssIm3Izbvrw/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/ZyAxVN9OeK6XFwEYZBPwvYOlRjf0ZZ00tF0ibb2vv4wQCl4BLjKmGRMIiaVtVTZzMod1ic6CZwVicmnL38RgEJvYHg/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/ZyAxVN9OeK6XFwEYZBPwvYOlRjf0ZZ00A4yiaMPbY11YvouBJ18yA1MgeClqlkicDyDaLmZWCqWvJrXeWUxF53jQ/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/ZyAxVN9OeK6XFwEYZBPwvYOlRjf0ZZ00IcGANjfe0GK5Xgp0PwYjTFiaIPN8UMa7zcYFicpbc86wr1dib3xETvG1g/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/ZyAxVN9OeK6XFwEYZBPwvYOlRjf0ZZ00bUAQRMIJanNlE6GuHWvCBVlOpKypOGl2TicicVB1ibfuTb2AeFHhomDKA/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/ZyAxVN9OeK6XFwEYZBPwvYOlRjf0ZZ00tyqpfb4DrWJMdsdUDyoPFiczfUrAQSOKES28vUsPtTicY248cDt5vUdw/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/ZyAxVN9OeK6XFwEYZBPwvYOlRjf0ZZ00Zz5dqOFqdN3e3LPy68w0ohCOXWyKLDTnoaDMtAIbI6WcJKgOlibTmqg/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/ZyAxVN9OeK6XFwEYZBPwvYOlRjf0ZZ006R5rm4eBV63QDjvScRU6b0U1gL4ibeRQtVAFibA5eBGg67iblcWGoaLQQ/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/ZyAxVN9OeK6XFwEYZBPwvYOlRjf0ZZ0095Gl4YW9iaYXXnIicysfGeicwDIUbpGno3xvjRG5UTvsn4ZbQEtPicKMbw/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/ZyAxVN9OeK6XFwEYZBPwvYOlRjf0ZZ00z8cxI5MUhVoPckwwId2KgXVYpiaHPb8Kia858RvG7bOCbPyrAxwnhH1g/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/ZyAxVN9OeK6XFwEYZBPwvYOlRjf0ZZ00FC1usEDZmfV6G2kicF0YicqYOWs175ScLZACBxbofAqTxofQeoBdo8Og/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/ZyAxVN9OeK6XFwEYZBPwvYOlRjf0ZZ00lxp75wWibrR4pdlfEu1wNNjPyscvmhTUd4WsBCZNTdDU9lRpd5ubWKA/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/ZyAxVN9OeK6XFwEYZBPwvYOlRjf0ZZ00IwqxxxqvqDPTicfBFazvrYZ4tlCrC8vovo0Snj1HlW71wvdP77p2eXA/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/ZyAxVN9OeK6XFwEYZBPwvYOlRjf0ZZ00DKXpiaOdutRHQGNz30NOont5KzamoqAlegCZIy09N9HHYqolnHnZz5Q/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/ZyAxVN9OeK6XFwEYZBPwvYOlRjf0ZZ00HmdubJSuNasGUpBkQicQBVykX2GANvDicBrVjEen1tOxoZcoiaaa7j5Aw/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/ZyAxVN9OeK6XFwEYZBPwvYOlRjf0ZZ00F4Bz7I6CoWCTWoXHfmw0Ve3UdcDpC99bwXCIQsiaXCo0Xdb8eVb6bsw/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/ZyAxVN9OeK6XFwEYZBPwvYOlRjf0ZZ00obrmGWiakvO4OtrH7Bvh74Ou9uIvYrzzLTWujBrNNQcETpHy2NewJhg/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/ZyAxVN9OeK6XFwEYZBPwvYOlRjf0ZZ00jNhSkOkWUu02aFEUeicZ13M51Xn9BU0AoVQdqMicvKaLXicg7AzVNIN9w/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/ZyAxVN9OeK6XFwEYZBPwvYOlRjf0ZZ00L2RwDwS3psBvHL7PeumXxUevGWYiaiajjxnOT78l07qW5ONNnvXf4RuA/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/ZyAxVN9OeK6XFwEYZBPwvYOlRjf0ZZ00jQ8ib7SNMr3fWibve6yekk3ut6Wut3xV3Z18Poub4qnz7wur06XLKnkA/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/ZyAxVN9OeK6XFwEYZBPwvYOlRjf0ZZ00Ik3zHojCErVYic6xcOiaHYZicQ7SaZKxTm1QcftCJbTLWzqjUV8f8dY6Q/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/ZyAxVN9OeK6XFwEYZBPwvYOlRjf0ZZ00h9ETRjgWIibNC7SQs998oLRu9ibnXKAYbwAksglsPiar2l7R3lRbI8XnQ/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/ZyAxVN9OeK6XFwEYZBPwvYOlRjf0ZZ00TYI0yJFzBibnsJbpR5mSXHWjVWHw7rBXtYVTpTBZXexLn9tDkzxxRcA/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/ZyAxVN9OeK6XFwEYZBPwvYOlRjf0ZZ00BR1EK3qibHjQOBHriapU1qRUicLtyksBfju6YXxtwlOyLpk1TD1kq5x9Q/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/ZyAxVN9OeK6XFwEYZBPwvYOlRjf0ZZ00vWwicOuRRK2osIrhWxu1aKfjiaPQ1QZK1roKicF4Wtjc8jUS4bP3V5sPQ/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/ZyAxVN9OeK6XFwEYZBPwvYOlRjf0ZZ00gUPXgibB03t9P6srQUkKhqt6JqY2W1icicZGfb4g0FdrqIkiaIwdJosfGw/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/ZyAxVN9OeK6XFwEYZBPwvYOlRjf0ZZ00kFVicxOkwsfibcb84iayIqFTPnejM27TMCanU9UBUYINGuicU89udbbGibA/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/ZyAxVN9OeK6XFwEYZBPwvYOlRjf0ZZ00VWY5FWFeqZfdh2xSzjZoNY7n7cZTjoMQbnGP1GYASam1S4iaB97U1Ww/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/ZyAxVN9OeK6XFwEYZBPwvYOlRjf0ZZ00ibIl22zN6uItIYCWz31AQLF9JHEf2uqngauLB23GmLjJ45FibJVzFgyg/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/ZyAxVN9OeK6XFwEYZBPwvYOlRjf0ZZ00GqfLZruym6O7Pa4mX9s38D6kDDFfwZkkrrD4Arj8lP3JgoMJAJKsiaQ/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/ZyAxVN9OeK6XFwEYZBPwvYOlRjf0ZZ00lCzqwsEibfstmSowCVqrqmRMygBPQlKtIZqBibpt2d6sE0D7tBNs81yQ/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/ZyAxVN9OeK6XFwEYZBPwvYOlRjf0ZZ004ddfcJAkd9kEsuGUribiaFqpCDZzibpP4WZDyJ79zZicos1libT8USvQBmA/640",
];
let eleZxxSlides = document.querySelectorAll('zxx-slide');
pics.forEach(pic => {
let aObj = document.createElement('a');
aObj.className = 'zxx-slide-a';
let imgObj = document.createElement('img');
imgObj.src = pic;
imgObj.className = 'zxx-slide-img';
aObj.appendChild(imgObj);
eleZxxSlides.appendChild(aObj);
});
[].slice.call(eleZxxSlides).forEach(function(container) {
let timerSlide = null;
let indexSlide = 0;
// 对应的元素
let eleSlides = [].slice.call(container.querySelectorAll('a'));
let eleButtons = [].slice.call(container.querySelectorAll('button'));
let funSlide = function() {
   eleSlides.forEach(function(slide, index) {
   if (!mObj.paused) {
      if (indexSlide == index) {
   slide.style.zIndex = 1;
   slide.style.animationName = aniActNames;
   slide.style.animationPlayState = 'running'
      } else {
   slide.style.zIndex = 0;
   slide.style.animationName = '';
   slide.style.animationPlayState = 'paused'
      }
   }
   });
   timerSlide = setTimeout(function() {
   indexSlide++;
   if (indexSlide == eleSlides.length) {
      indexSlide = 0;
   }
   funSlide();
   }, 12000);
}
indexSlide++;
setTimeout(funSlide, 12000);
});
let runState = () => {
mObj.paused
? (mObj.pause(), player.style.setProperty('--rState','paused'))
: (mObj.play(), player.style.setProperty('--rState','running'));
}
mObj.onplaying = mObj.onpause = () => runState();
player.onclick = () => {mObj.paused ? mObj.play() : mObj.pause();}
mObj.play().catch(_ => runState());
}
</script>

梦江南 发表于 2024-11-19 08:17

早上好！江山如画美不胜收！{:4_199:}

梦江南 发表于 2024-11-19 08:20

老师的这个小播放器能一键控制动画和音乐。欣赏学习！{:4_187:}

夕阳黄昏 发表于 2024-11-19 08:22

梦江南发表于 2024-11-19 08:17
早上好！江山如画美不胜收！

谢谢您的支持欣赏，上午好！

夕阳黄昏 发表于 2024-11-19 08:23

梦江南发表于 2024-11-19 08:20
老师的这个小播放器能一键控制动画和音乐。欣赏学习！

胡乱凑合的

秋思梦景 发表于 2024-11-19 08:44

问候老师好！精美音画佳作，精心制作分享。为您点赞！{:5_116:}{:4_187:}

夕阳黄昏 发表于 2024-11-19 09:41

秋思梦景发表于 2024-11-19 08:44
问候老师好！精美音画佳作，精心制作分享。为您点赞！

谢谢支持欣赏，上午好！

梦江南 发表于 2024-11-19 09:59

夕阳黄昏发表于 2024-11-19 08:23
胡乱凑合的

这是研究探索的成果，佩服！

夕阳黄昏 发表于 2024-11-19 10:11

梦江南发表于 2024-11-19 09:59
这是研究探索的成果，佩服！

学习别人的帖子再加上自己的改进，凑一帖。

梦江南 发表于 2024-11-19 10:14

夕阳黄昏发表于 2024-11-19 10:11
学习别人的帖子再加上自己的改进，凑一帖。

很成功的一帖！{:4_199:}

夕阳黄昏 发表于 2024-11-19 10:29

梦江南发表于 2024-11-19 10:14
很成功的一帖！

{:4_180:}

醉美水芙蓉 发表于 2024-11-19 11:39

夕阳黄昏 发表于 2024-11-19 12:43

醉美水芙蓉发表于 2024-11-19 11:39
欣赏老师带来的精彩！

谢谢支持欣赏，中午好！

夕阳黄昏 发表于 2024-11-19 12:44

醉美水芙蓉发表于 2024-11-19 11:39
老师选得图片漂亮！

还行吧

页: [1]

花潮论坛's Archiver

江山如画