195400 发表于 2022-9-12 16:46

秋意浓

<link rel="stylesheet" href="../sstyle/vivify.min.css" >
<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;
        position:relative;overflow:hidden;border-radius:8px;
        border:brown thick outset;
}
</style>
<div id="outf">
<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="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);
}

function aniAct()        {
    setInterval(aniEventHandle, 7500);
}
aniAct();
</script>

绿地水池 发表于 2022-9-12 19:00

欣赏佳作，为你点赞。

195400 发表于 2022-9-12 21:46

绿地水池 发表于 2022-9-12 19:00
欣赏佳作，为你点赞。

http://www.yinhuabbs.cn/data/attachment/forum/201912/20/123001hstspbnsskb1sb2s.gif

蓝魔 发表于 2022-9-12 23:15

欣赏一下，谢谢。

195400 发表于 2022-9-13 06:10

蓝魔 发表于 2022-9-12 23:15
欣赏一下，谢谢。

http://www.yinhuabbs.cn/data/attachment/forum/202101/05/080000ceeug75jpzjg3k2p.gif
http://www.yinhuabbs.cn/data/attachment/forum/201912/20/123001hstspbnsskb1sb2s.gif

寒冬残荷 发表于 2022-9-13 17:29

欣赏学习老师新作品！:victory:

195400 发表于 2022-9-13 18:46

寒冬残荷 发表于 2022-9-13 17:29
欣赏学习老师新作品！

http://www.yinhuabbs.cn/data/attachment/forum/201912/20/123001hstspbnsskb1sb2s.gif

另一个类似的CSS动画库。

绿地水池 发表于 2022-9-13 20:11

195400 发表于 2022-9-12 21:46


195400朋友晚上好。

195400 发表于 2022-9-13 20:43

绿地水池 发表于 2022-9-13 20:11
195400朋友晚上好。



红枫 发表于 2022-9-13 21:49

欣赏，学习，收藏了！
页: [1] 2 3 4 5
查看完整版本: 秋意浓