寒冬残荷 发表于 2022-9-13 22:11
老师，背景图的切换若用CSS的动画效果和您现用SVG能一样吗？
svg图片切换可以做到部分重叠，用CSS+js可能比较复杂，最关键的是我也不会:L
下面的背景切换没用svg
<style type="text/css">
@import "http://cesholl.cn3v.work/sstyle/vivify.min.css";
#aniImg {width:35vw;position:absolute;top:10vw;left:5vw;overflow:hidden;border-radius:10%;opacity:0.7;}
#outf {
width:45vw;height:70vw;margin:12px auto;
position:relative;overflow:hidden;border-radius:8px;
border:brown thick outset;
animation: aniBG 60s infinite linear alternate;
}
@keyframes aniBG {
0% ,100% {background:url(https://s3.bmp.ovh/imgs/2022/09/12/a443c5f0bedc237a.jpg) 0 0/100% 100%;}
12.5% {background:url(https://s3.bmp.ovh/imgs/2022/09/12/c99e2ed2d7c4fa9c.jpg) 0 0/100% 100%;}
25% {background:url(https://s3.bmp.ovh/imgs/2022/09/12/e62b9d31adf98f6a.jpg) 0 0/100% 100%;}
37.5% {background:url(https://s3.bmp.ovh/imgs/2022/09/12/93eddc5f9831bbab.jpg) 0 0/100% 100%;}
50% {background:url(https://s3.bmp.ovh/imgs/2022/09/12/838f8a092a622179.jpg) 0 0/100% 100%;}
62.5% {background:url(https://s3.bmp.ovh/imgs/2022/09/12/4b02b421500c1130.jpg) 0 0/100% 100%;}
75% {background:url(https://s3.bmp.ovh/imgs/2022/09/12/22ed864944561309.jpg) 0 0/100% 100%;}
87.5% {background:url(https://s3.bmp.ovh/imgs/2022/09/12/82fb732636a69fd0.jpg) 0 0/100% 100%;}
}
</style>
<div id="outf">
<img class="vivify duration-7500 pulsate"
src="https://s3.bmp.ovh/imgs/2022/09/12/7d07c74bc21c7259.jpg" id="aniImg" />
</div>
<audio src="http://link.hhtjim.com/kw/67548802.mp3" loop autoplay controls
style="opacity:0.1;" onmouseover="this.style.opacity=.8" onmouseout="this.style.opacity=0.1"></audio>
<script type="text/javascript">
var imgs=[
"https://s3.bmp.ovh/imgs/2022/09/12/7d07c74bc21c7259.jpg",
"https://s3.bmp.ovh/imgs/2022/09/12/1123d5c8a7046dab.jpg",
"https://s3.bmp.ovh/imgs/2022/09/12/89fda13ddf52d874.jpg",
"https://s3.bmp.ovh/imgs/2022/09/12/258f8dd69bcf8513.jpg",
"https://s3.bmp.ovh/imgs/2022/09/12/cd52a8f275d7148d.jpg",
"https://s3.bmp.ovh/imgs/2022/09/12/df8322c841b17e2d.jpg"
];
var dhlm= ["pulsate","blink","hitLeft","hitRight","shake","ball","pullUp","pullDown","pullLeft","pullRight","jumpInLeft","jumpInRight","jumpOutRight","jumpOutLeft","rollInLeft","rollInRight","rollInTop","rollInBottom","rollOutLeft","rollOutRight","rollOutTop","rollOutBottom","popIn","popInLeft","popInRight","popInTop","popInBottom","popOut","popOutLeft","popOutRight","popOutTop","popOutBottom","flip","flipInX","flipInY","flipOutX","flipOutY","fadeIn","fadeInRight","fadeInLeft","fadeInTop","fadeInBottom","fadeOut","fadeOutLeft","fadeOutRight","fadeOutTop","fadeOutBottom","driveInLeft","driveInRight","driveInTop","driveInBottom","driveOutLeft","driveOutRight","driveOutTop","driveOutBottom","spin","spinIn","spinOut","swoopInLeft","swoopInRight","swoopInTop","swoopInBottom","swoopOutLeft","swoopOutRight","swoopOutTop","swoopOutBottom","fold","unfold"];
var aniClassNames = 'animate__slower animate__animated animate__';
var aniImg = document.getElementById('aniImg');
var imgIdx = 0, aniIdx = 0;
function aniEventHandle() {
aniImg.classList.remove(dhlm);
imgIdx = parseInt(Math.random() * imgs.length);
aniIdx = parseInt(Math.random() * dhlm.length);
aniImg.src = imgs;
//aniImg.className = aniClassNames+dhlm;
aniImg.classList.add(dhlm);
}
setInterval(aniEventHandle, 7500);
</script>
寒冬残荷 发表于 2022-9-13 22:59
在电脑上看一屏看不完，在手机上看就可以。在手机上看真的是“秋意浓”！
手机和电脑是不同的效果，原来也只是想在电脑的不同分辨率屏幕上效果基本相同。
欣赏楼主的新作，点赞多谢分享！
非常开心 发表于 2022-9-14 06:53
欣赏楼主的新作，点赞多谢分享！
http://www.yinhuabbs.cn/data/attachment/forum/202101/05/080000ceeug75jpzjg3k2p.gifhttp://www.yinhuabbs.cn/data/attachment/forum/201912/20/123001hstspbnsskb1sb2s.gif
195400 发表于 2022-9-14 04:29
svg图片切换可以做到部分重叠，用CSS+js可能比较复杂，最关键的是我也不会
下面的背景切换没用svg
...
老师，早上好！还是用SVG切换背景图较自然，能淡入淡出，CSS动画切换突然切换不自然。#outf也用opacity的话，#aniImg受影响。
寒冬残荷 发表于 2022-9-14 09:18
老师，早上好！还是用SVG切换背景图较自然，能淡入淡出，CSS动画切换突然切换不自然。#outf也用opacity的 ...
svg就是载入慢
<link rel="stylesheet"/>
<style>
#box{width: 700px;height: 600px; position:relative; margin-top: 50px; margin-left: 150px; }
</style>
<div style="width: 1000px;height: 800px;background-color: #cccccc; margin: 0px auto;position:relative;overflow:hidden; ">
<img class="vivify ball duration-7500" id="box" src=https://pic.imgdb.cn/item/631f3f4316f2c2beb1a0493b.gif />
</div>
<script type="text/javascript">
var dhlm= [
"ball","blink","driveInBottom","driveInLeft","driveInRight","driveInTop","driveOutBottom","driveOutLeft","driveOutRight","driveOutTop","fadeIn","fadeInBottom","fadeInLeft","fadeInRight","fadeInTop","fadeOut","fadeOutBottom","fadeOutLeft","fadeOutRight","fadeOutTop","flip","flipInX","flipInY","flipOutX","flipOutY","fold","hitLeft","hitRight","jumpInLeft","jumpInRight","jumpOutLeft","jumpOutRight","popIn","popInBottom","popInLeft","popInRight","popInTop","popOut","popOutBottom","popOutLeft","popOutRight","popOutTop","pullDown","pullLeft","pullRight","pullUp","pulsate","rollInBottom","rollInLeft","rollInRight","rollInTop","rollOutBottom","rollOutLeft","rollOutRight","rollOutTop","shake","spin","spinIn","spinOut","swoopInBottom","swoopInLeft","swoopInRight","swoopInTop","swoopOutBottom","swoopOutLeft","swoopOutRight","swoopOutTop","unfold"
];
var j=1;
var dhtyl= "vivify duration-7500";
function qiehuan(){
document.getElementById("box").className =dhtyl+' '+ dhlm;
j++;
if(j >=dhlm.length){j =0;}
}
setInterval("qiehuan()",7500);
</script>
vivify.css的68个动画都试了后感觉和Animate.css差不多，稍有区别是vivify.css多了淡进淡出。个人觉得两个动画库动画的幅度都太小！
195400 发表于 2022-9-13 20:43
195400朋友下午好。
绿地水池 发表于 2022-9-14 16:07
195400朋友下午好。