江山如画

起个网名好难 · 发表于昨天 07:38

娟子发表于 2024-11-19 19:12
欣赏老师音画佳作！好美山水图片，歌曲也非常好听，点赞！问好！

谢谢您的支持，早上好！

起个网名好难 · 发表于昨天 07:38

风清发表于 2024-11-19 19:22
欣赏学习老师精彩佳作，大气壮观！歌曲优美，为您点赞！
晚上好！

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

起个网名好难 · 发表于昨天 07:39

筱亭发表于 2024-11-20 03:22
欣赏学习了！可以向老师求代码吗？

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

只要是我知道的都行。

筱亭 · 发表于昨天 11:05

起个网名好难发表于 2024-11-20 07:39
谢谢您的支持欣赏，早上好！

只要是我知道的都行。

谢谢老师！就这个帖子的代码吧。再次感谢

起个网名好难 · 发表于昨天 13:26

筱亭发表于 2024-11-20 11:05
谢谢老师！就这个帖子的代码吧。再次感谢

<meta name="referrer" content="never" />
<meta charset="utf-8">
<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:#000000 url([img]https://pic.imgdb.cn/item/65bf0270871b83018a3ad9aa.jpg[/img])no-repeat center / cover;overflow:hidden;90px;margin:16px auto;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">
<radialGra**nt 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>
</radialGra**nt>
<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","backOutDown","backOutLeft","backOutRight","backOutUp","bounceIn","bounceInDown","bounceInLeft","bounceInRight","bounceInUp","bounceOut","bounceOutDown","bounceOutLeft","bounceOutRight","bounceOutUp","fadeIn","fadeInDown","fadeInDownBig","fadeInLeft","fadeInLeftBig","fadeInRight","fadeInRightBig","fadeInUp","fadeInUpBig","fadeInTopLeft","fadeInTopRight","fadeInBottomLeft","fadeInBottomRight","fadeOut","fadeOutDown","fadeOutDownBig","fadeOutLeft","fadeOutLeftBig","fadeOutRight","fadeOutRightBig","fadeOutUp","fadeOutUpBig","fadeOutTopLeft","fadeOutTopRight","fadeOutBottomRight","fadeOutBottomLeft","flip","flipInX","flipInY","flipOutX","flipOutY","lightSpeedInRight","lightSpeedInLeft","lightSpeedOutRight","lightSpeedOutLeft","rotateIn","rotateInDownLeft","rotateInDownRight","rotateInUpLeft","rotateInUpRight","rotateOut","rotateOutDownLeft","rotateOutDownRight","rotateOutUpLeft","rotateOutUpRight","hinge","jackInTheBox","rollIn","rollOut","zoomIn","zoomInDown","zoomInLeft","zoomInRight","zoomInUp","zoomOut","zoomOutDown","zoomOutLeft","zoomOutRight","zoomOutUp","slideInDown","slideInLeft","slideInRight","slideInUp","slideOutDown","slideOutLeft","slideOutRight","slideOutUp"];
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/ZyAxVN9OeK6XFwEYZBPwvYOlRjf0ZZ00**iaMPbY11YvouBJ18yA1MgeClqlkicDyDaLmZWCqWvJrXeWUxF53jQ/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/ZyAxVN9OeK6XFwEYZBPwvYOlRjf0ZZ00DKX**dutRHQGNz30NOont5KzamoqAlegCZIy09N9HHYqolnHnZz5Q/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[0].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[parseInt(Math.random() * aniActNames.length)];
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>

复制代码

筱亭 · 发表于 13 小时前

起个网名好难发表于 2024-11-20 13:26

谢谢老师！收藏待用了

		自动登录	找回密码
密码			立即注册

江山如画

浏览过的版块