195400 发表于 2022-9-13 18:46
另一个类似的CSS动画库。
是4.1.1版，我用过了呀。
<style type="text/css">
@import "https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css";
#outf1{width:85vw;height:131vw;position:relative;overflow:hidden;border-radius:8px;border:brown thick outset;left:-170px;}
#aniImg1{width:65vw;position:absolute;top:10vw;left:10vw;overflow:hidden;border-radius:10%;opacity:0.9; filter:brightness(110%),saturate(120%); }
</style>
<div id="outf1">
<script type="text/javascript">
document.write(unescape('%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20version%3D%221.1%22%20%0AviewBox%3D%220%200%20450%20700%22%3E%0A%3Cimage%20xlink%3Ahref%3D%22https%3A//s3.bmp.ovh/imgs/2022/09/12/82fb732636a69fd0.jpg%22%20%0Aopacity%3D%220%22%20x%3D%220%22%20y%3D%220%22%20width%3D%22450%22%20height%3D%22700%22%20preserveAspectRatio%3D%22none%22%3E%0A%3Canimate%20id%3D%22bpic0%22%20attributeName%3D%22opacity%22%20from%3D%220%22%20to%3D%221%22%20begin%3D%220%3B%20epic7.end-3%22%20dur%3D%222s%22%20fill%3D%22freeze%22%3E%3C/animate%3E%0A%3Canimate%20id%3D%22epic0%22%20attributeName%3D%22opacity%22%20from%3D%221%22%20to%3D%220%22%20begin%3D%22bpic0.begin+8%22%20dur%3D%224%22%20fill%3D%22freeze%22%3E%3C/animate%3E%0A%3C/image%3E%0A%3Cimage%20xlink%3Ahref%3D%22https%3A//s3.bmp.ovh/imgs/2022/09/12/22ed864944561309.jpg%22%20%0Aopacity%3D%220%22%20x%3D%220%22%20y%3D%220%22%20width%3D%22450%22%20height%3D%22700%22%20preserveAspectRatio%3D%22none%22%3E%0A%3Canimate%20id%3D%22bpic1%22%20attributeName%3D%22opacity%22%20from%3D%220%22%20to%3D%221%22%20begin%3D%22epic0.end-3%22%20dur%3D%222s%22%20fill%3D%22freeze%22%3E%3C/animate%3E%0A%3Canimate%20id%3D%22epic1%22%20attributeName%3D%22opacity%22%20from%3D%221%22%20to%3D%220%22%20begin%3D%22bpic1.begin+8%22%20dur%3D%224%22%20fill%3D%22freeze%22%3E%3C/animate%3E%0A%3C/image%3E%0A%3Cimage%20xlink%3Ahref%3D%22https%3A//s3.bmp.ovh/imgs/2022/09/12/4b02b421500c1130.jpg%22%20%0Aopacity%3D%220%22%20x%3D%220%22%20y%3D%220%22%20width%3D%22450%22%20height%3D%22700%22%20preserveAspectRatio%3D%22none%22%3E%0A%3Canimate%20id%3D%22bpic2%22%20attributeName%3D%22opacity%22%20from%3D%220%22%20to%3D%221%22%20begin%3D%22epic1.end-3%22%20dur%3D%222s%22%20fill%3D%22freeze%22%3E%3C/animate%3E%0A%3Canimate%20id%3D%22epic2%22%20attributeName%3D%22opacity%22%20from%3D%221%22%20to%3D%220%22%20begin%3D%22bpic2.begin+8%22%20dur%3D%224%22%20fill%3D%22freeze%22%3E%3C/animate%3E%0A%3C/image%3E%0A%3Cimage%20xlink%3Ahref%3D%22https%3A//s3.bmp.ovh/imgs/2022/09/12/838f8a092a622179.jpg%22%20%0Aopacity%3D%220%22%20x%3D%220%22%20y%3D%220%22%20width%3D%22450%22%20height%3D%22700%22%20preserveAspectRatio%3D%22none%22%3E%0A%3Canimate%20id%3D%22bpic3%22%20attributeName%3D%22opacity%22%20from%3D%220%22%20to%3D%221%22%20begin%3D%22epic2.end-3%22%20dur%3D%222s%22%20fill%3D%22freeze%22%3E%3C/animate%3E%0A%3Canimate%20id%3D%22epic3%22%20attributeName%3D%22opacity%22%20from%3D%221%22%20to%3D%220%22%20begin%3D%22bpic3.begin+8%22%20dur%3D%224%22%20fill%3D%22freeze%22%3E%3C/animate%3E%0A%3C/image%3E%0A%3Cimage%20xlink%3Ahref%3D%22https%3A//s3.bmp.ovh/imgs/2022/09/12/93eddc5f9831bbab.jpg%22%20%0Aopacity%3D%220%22%20x%3D%220%22%20y%3D%220%22%20width%3D%22450%22%20height%3D%22700%22%20preserveAspectRatio%3D%22none%22%3E%0A%3Canimate%20id%3D%22bpic4%22%20attributeName%3D%22opacity%22%20from%3D%220%22%20to%3D%221%22%20begin%3D%22epic3.end-3%22%20dur%3D%222s%22%20fill%3D%22freeze%22%3E%3C/animate%3E%0A%3Canimate%20id%3D%22epic4%22%20attributeName%3D%22opacity%22%20from%3D%221%22%20to%3D%220%22%20begin%3D%22bpic4.begin+8%22%20dur%3D%224%22%20fill%3D%22freeze%22%3E%3C/animate%3E%0A%3C/image%3E%0A%3Cimage%20xlink%3Ahref%3D%22https%3A//s3.bmp.ovh/imgs/2022/09/12/e62b9d31adf98f6a.jpg%22%20%0Aopacity%3D%220%22%20x%3D%220%22%20y%3D%220%22%20width%3D%22450%22%20height%3D%22700%22%20preserveAspectRatio%3D%22none%22%3E%0A%3Canimate%20id%3D%22bpic5%22%20attributeName%3D%22opacity%22%20from%3D%220%22%20to%3D%221%22%20begin%3D%22epic4.end-3%22%20dur%3D%222s%22%20fill%3D%22freeze%22%3E%3C/animate%3E%0A%3Canimate%20id%3D%22epic5%22%20attributeName%3D%22opacity%22%20from%3D%221%22%20to%3D%220%22%20begin%3D%22bpic5.begin+8%22%20dur%3D%224%22%20fill%3D%22freeze%22%3E%3C/animate%3E%0A%3C/image%3E%0A%3Cimage%20xlink%3Ahref%3D%22https%3A//s3.bmp.ovh/imgs/2022/09/12/c99e2ed2d7c4fa9c.jpg%22%20%0Aopacity%3D%220%22%20x%3D%220%22%20y%3D%220%22%20width%3D%22450%22%20height%3D%22700%22%20preserveAspectRatio%3D%22none%22%3E%0A%3Canimate%20id%3D%22bpic6%22%20attributeName%3D%22opacity%22%20from%3D%220%22%20to%3D%221%22%20begin%3D%22epic5.end-3%22%20dur%3D%222s%22%20fill%3D%22freeze%22%3E%3C/animate%3E%0A%3Canimate%20id%3D%22epic6%22%20attributeName%3D%22opacity%22%20from%3D%221%22%20to%3D%220%22%20begin%3D%22bpic6.begin+8%22%20dur%3D%224%22%20fill%3D%22freeze%22%3E%3C/animate%3E%0A%3C/image%3E%0A%3Cimage%20xlink%3Ahref%3D%22https%3A//s3.bmp.ovh/imgs/2022/09/12/a443c5f0bedc237a.jpg%22%20%0Aopacity%3D%220%22%20x%3D%220%22%20y%3D%220%22%20width%3D%22450%22%20height%3D%22700%22%20preserveAspectRatio%3D%22none%22%3E%0A%3Canimate%20id%3D%22bpic7%22%20attributeName%3D%22opacity%22%20from%3D%220%22%20to%3D%221%22%20begin%3D%22epic6.end-3%22%20dur%3D%222s%22%20fill%3D%22freeze%22%3E%3C/animate%3E%0A%3Canimate%20id%3D%22epic7%22%20attributeName%3D%22opacity%22%20from%3D%221%22%20to%3D%220%22%20begin%3D%22bpic7.begin+8%22%20dur%3D%224%22%20fill%3D%22freeze%22%3E%3C/animate%3E%0A%3C/image%3E%0A%3C/svg%3E'));
</script>
<img class="animate__animated animate__slower animate__rotateIn"
src="data/attachment/forum/202209/12/104056nayzway1al1ccwwu.jpg" id="aniImg1" />
</div>
<audio src="http://link.hhtjim.com/kw/67548802.mp3" loop 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= [
"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"
];
var aniClassNames = 'animate__slower animate__animated animate__';
var aniImg1 = document.getElementById('aniImg1');
function aniEventHandle() {
let imgIdx = parseInt(Math.random() * imgs.length);
let aniIdx = parseInt(Math.random() * dhlm.length);
//console.log(imgIdx + " : " +aniIdx);
aniImg1.src = imgs;
aniImg1.className = aniClassNames+dhlm;
}
function aniAct() {
aniImg1.src = imgs;
aniImg1.classList.add('animate__'+dhlm);
//aniImg1.addEventListener('animationend', aniEventHandle);
setInterval(aniEventHandle, 3000);
}
aniAct();
</script>
音画我还是喜欢画面宽大的。:victory:
195400 发表于 2022-9-13 18:46
另一个类似的CSS动画库。
动画透明度太大，感觉太透明了，动画图看不清，我改为0.9，并给图片加了两个滤镜。我喜欢这样的。:lol
195400 发表于 2022-9-13 18:46
另一个类似的CSS动画库。
老师，背景图的切换若用CSS的动画效果和您现用SVG能一样吗？
在电脑上看一屏看不完，在手机上看就可以。在手机上看真的是“秋意浓”！:lol
红枫 发表于 2022-9-13 21:49
欣赏，学习，收藏了！
http://www.yinhuabbs.cn/data/attachment/forum/201912/21/084215njp5lwls4o0j7pno.gif
寒冬残荷 发表于 2022-9-13 21:56
是4.1.1版，我用过了呀。
是vivify.css 不是 animate.css，另一个类似的动画库，用法基本相同只是持续时间控制要灵活些。
寒冬残荷 发表于 2022-9-13 22:01
音画我还是喜欢画面宽大的。
vw是相对屏幕的宽度，底图的比例大约是45:70 ，加大后一屏显示不完整需要拖动屏幕观看。
寒冬残荷 发表于 2022-9-13 22:06
动画透明度太大，感觉太透明了，动画图看不清，我改为0.9，并给图片加了两个滤镜。我喜欢这样的。
图片透明是不希望遮挡底图。
我不了解图片滤镜的作用，同时加大亮度和饱和度似乎意义不大,一个变亮另一个颜色加深，效果相互抵消。