寒冬残荷 发表于 2022-8-28 10:33

音画：《盛开的牡丹》（CSS3动画库V4.1.1学习帖）

<link rel="stylesheet" href=https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css />
<style type="text/css">
.wddiv {position:relative;width:1000px; height:750px; margin:0px; overflow:hidden; transform:rotate(0deg); background:url(https://z3.ax1x.com/2021/08/26/hujGMd.gif)85% 5% no-repeat,url(https://s1.ax1x.com/2022/08/27/vW9dOK.jpg)0 0/100% 100%; }
#img1{box-shadow: 0px 0px 0px 2px #bebebe;width:800px; height:600px; filter:brightness(120%); filter:saturate(120%); margin-top:20px; margin-left:85px; border:#d0d0d0 15px inset; border-top:#e0e0e0 15px inset;border-bottom:#adadad 15px inset; }
</style>
<style type="text/css">
#outframe {width:100%; height:150px; position:relative; top:-20px; left:-20px;}
.lrcShow{width:100%;height:150px;overflow:hidden;position:absolute;bottom:0px;left:0px; animation:slider 0.26s linear infinite; }
@keyframes slider{
from{filter:hue-rotate(360deg) contrast(180%) brightness(200%);}
to{filter:hue-rotate(0deg) contrast(140%) brightness(100%);}}
.lrcShow ul{width:100%;padding-top:50px;list-style:none;transition:0.3s all ease;margin:0px;}
.lrcShow ul li{filter:drop-shadow(1px 0 0 #ffffff ) drop-shadow(0 1px 0 #ffffff) drop-shadow(-1px 0 0 #ffffff) drop-shadow(0 -1px 0 #ffffff); height:70px; line-height:70px; font-family:楷体; font-size:0px; color:#000078; font-weight:normal; transition:.3s all ease; list-style-type:none; text-align:center; display:block; width:100%; margin:0 auto;}
.lrcShow ul li.active{font-family:楷体; font-size:70px; font-weight:bold; color:#ff0000;}
.twinkle{animation:twinkleDef 3s linear infinite;}
@keyframes twinkleDef{
0%,100%{filter:hue-rotate(360deg) drop-shadow(0px 0px 2px #333) drop-shadow(0px 0px 4px #333) drop-shadow(0px 0px 8px #333) drop-shadow(0px 0px 16px #333);}
50%{filter:hue-rotate(0deg) drop-shadow(0px 0px 16px #ccc) drop-shadow(0px 0px 8px #ccc) drop-shadow(0px 0px 4px #ccc) drop-shadow(0px 0px 2px #ccc);}}
</style>
<!--中画网left:0px; 老网left:-200px; -->
<div style="position:relative;width:1000px; height:800px; top:0px;left:0px;" >
<div class="wddiv" >
<img class="animate__animated animate__slower animate__rotateIn" src="https://s4.ax1x.com/2022/02/21/HjQUW4.jpg" id="img1" />
<div id="outframe">
<div class="lrcShow twinkle" id='sLRC'></div>
<div id="mDisk"></div>
</div>
</div></div>
<script type="text/javascript">
var imgs=[
"https://s4.ax1x.com/2022/02/20/HLE3X4.jpg","https://s4.ax1x.com/2022/02/20/HLE3X4.jpg",
"https://s4.ax1x.com/2022/02/20/HLE1cF.jpg","https://s4.ax1x.com/2022/02/20/HLE1cF.jpg",
"https://s4.ax1x.com/2022/02/20/HLEl1U.jpg","https://s4.ax1x.com/2022/02/20/HLEl1U.jpg",
"https://s4.ax1x.com/2022/02/20/HLEQpT.jpg","https://s4.ax1x.com/2022/02/20/HLEQpT.jpg",
"https://s4.ax1x.com/2022/02/20/HLEKhV.jpg","https://s4.ax1x.com/2022/02/20/HLEKhV.jpg",
"https://s4.ax1x.com/2022/02/20/HLEut0.jpg","https://s4.ax1x.com/2022/02/20/HLEut0.jpg",
"https://s4.ax1x.com/2022/02/20/HLEnkq.jpg","https://s4.ax1x.com/2022/02/20/HLEnkq.jpg",
"https://s4.ax1x.com/2022/02/20/HLEe7n.jpg","https://s4.ax1x.com/2022/02/20/HLEe7n.jpg",
"https://s4.ax1x.com/2022/02/20/HLEZ0s.jpg","https://s4.ax1x.com/2022/02/20/HLEZ0s.jpg",
"https://s4.ax1x.com/2022/02/20/HLEVmj.jpg","https://s4.ax1x.com/2022/02/20/HLEVmj.jpg",
"https://s4.ax1x.com/2022/02/20/HLEAXQ.jpg","https://s4.ax1x.com/2022/02/20/HLEAXQ.jpg",
"https://s4.ax1x.com/2022/02/20/HLEk6g.jpg","https://s4.ax1x.com/2022/02/20/HLEk6g.jpg",
"https://s4.ax1x.com/2022/02/20/HLEF1S.jpg","https://s4.ax1x.com/2022/02/20/HLEF1S.jpg",
"https://s4.ax1x.com/2022/02/19/HqB3Sf.jpg","https://s4.ax1x.com/2022/02/19/HqB3Sf.jpg",
"https://s4.ax1x.com/2022/02/19/HqBlfP.jpg","https://s4.ax1x.com/2022/02/19/HqBlfP.jpg",
"https://s4.ax1x.com/2022/02/19/HqBQYt.jpg","https://s4.ax1x.com/2022/02/19/HqBQYt.jpg",
"https://s4.ax1x.com/2022/02/19/HqBMFI.jpg","https://s4.ax1x.com/2022/02/19/HqBMFI.jpg",
"https://s4.ax1x.com/2022/02/19/HqBuTA.jpg","https://s4.ax1x.com/2022/02/19/HqBuTA.jpg",
"https://s4.ax1x.com/2022/02/19/HqBnwd.jpg","https://s4.ax1x.com/2022/02/19/HqBnwd.jpg",
"https://s4.ax1x.com/2022/02/19/HqBmeH.jpg","https://s4.ax1x.com/2022/02/19/HqBmeH.jpg",
"https://s4.ax1x.com/2022/02/19/HqBZOe.jpg","https://s4.ax1x.com/2022/02/19/HqBZOe.jpg",
"https://s4.ax1x.com/2022/02/19/HqBVyD.jpg","https://s4.ax1x.com/2022/02/19/HqBVyD.jpg",
"https://s4.ax1x.com/2022/02/19/HqBASK.jpg","https://s4.ax1x.com/2022/02/19/HqBASK.jpg",
"https://s4.ax1x.com/2022/02/19/HqBFW6.jpg","https://s4.ax1x.com/2022/02/19/HqBFW6.jpg",
"https://s4.ax1x.com/2022/02/19/HqBiJx.jpg","https://s4.ax1x.com/2022/02/19/HqBiJx.jpg",
"https://s4.ax1x.com/2022/02/19/HqBPF1.jpg","https://s4.ax1x.com/2022/02/19/HqBPF1.jpg",
"https://s4.ax1x.com/2022/02/19/HqB9oR.jpg","https://s4.ax1x.com/2022/02/19/HqB9oR.jpg",
"https://s4.ax1x.com/2022/02/19/HqBpw9.jpg","https://s4.ax1x.com/2022/02/19/HqBpw9.jpg",
"https://s4.ax1x.com/2022/02/19/HqBSeJ.jpg","https://s4.ax1x.com/2022/02/19/HqBSeJ.jpg",
"https://s4.ax1x.com/2022/02/19/Hq0xL4.jpg","https://s4.ax1x.com/2022/02/19/Hq0xL4.jpg",
"https://s4.ax1x.com/2022/02/19/Hq0vyF.jpg","https://s4.ax1x.com/2022/02/19/Hq0vyF.jpg",
"https://s4.ax1x.com/2022/02/19/Hq0jQU.jpg","https://s4.ax1x.com/2022/02/19/Hq0jQU.jpg",
"https://s4.ax1x.com/2022/02/19/Hq0OzT.jpg","https://s4.ax1x.com/2022/02/19/Hq0OzT.jpg",
"https://s4.ax1x.com/2022/02/19/Hq0LWV.jpg","https://s4.ax1x.com/2022/02/19/Hq0LWV.jpg",
"https://s4.ax1x.com/2022/02/19/Hq0qJ0.jpg","https://s4.ax1x.com/2022/02/19/Hq0qJ0.jpg",
"https://s4.ax1x.com/2022/02/19/Hq0biq.jpg","https://s4.ax1x.com/2022/02/19/Hq0biq.jpg",
"https://s4.ax1x.com/2022/02/19/Hq07on.jpg","https://s4.ax1x.com/2022/02/19/Hq07on.jpg",
"https://s4.ax1x.com/2022/02/19/Hq0Tds.jpg","https://s4.ax1x.com/2022/02/19/Hq0Tds.jpg",
"https://s4.ax1x.com/2022/02/19/Hq0oZj.jpg","https://s4.ax1x.com/2022/02/19/Hq0oZj.jpg",
"https://s4.ax1x.com/2022/02/19/Hq05LQ.jpg","https://s4.ax1x.com/2022/02/19/Hq05LQ.jpg",
"https://s4.ax1x.com/2022/02/19/Hq04sg.jpg","https://s4.ax1x.com/2022/02/19/Hq04sg.jpg",
"https://z3.ax1x.com/2021/08/29/h88Uyt.jpg","https://z3.ax1x.com/2021/08/29/h88Uyt.jpg",
"https://z3.ax1x.com/2021/08/29/h88NQI.jpg","https://z3.ax1x.com/2021/08/29/h88NQI.jpg",
"https://z3.ax1x.com/2021/08/29/h88tSA.jpg","https://z3.ax1x.com/2021/08/29/h88tSA.jpg",
"https://z3.ax1x.com/2021/08/29/h88JWd.jpg","https://z3.ax1x.com/2021/08/29/h88JWd.jpg",
"https://s4.ax1x.com/2022/02/21/HjQUW4.jpg","https://s4.ax1x.com/2022/02/21/HjQUW4.jpg",
"https://s4.ax1x.com/2022/02/21/HjQsw6.jpg","https://s4.ax1x.com/2022/02/21/HjQsw6.jpg",
"https://s4.ax1x.com/2022/02/21/HjQrex.jpg","https://s4.ax1x.com/2022/02/21/HjQrex.jpg",
"https://s4.ax1x.com/2022/02/21/HjQBO1.jpg","https://s4.ax1x.com/2022/02/21/HjQBO1.jpg",
"https://s4.ax1x.com/2022/02/21/HjQ0yR.jpg","https://s4.ax1x.com/2022/02/21/HjQ0yR.jpg",
"https://s4.ax1x.com/2022/02/21/HjQwl9.jpg","https://s4.ax1x.com/2022/02/21/HjQwl9.jpg",
"https://s4.ax1x.com/2022/02/21/HjQdSJ.jpg","https://s4.ax1x.com/2022/02/21/HjQdSJ.jpg",
"https://s4.ax1x.com/2022/02/21/HjQNYF.jpg","https://s4.ax1x.com/2022/02/21/HjQNYF.jpg",
"https://s4.ax1x.com/2022/02/21/HjQtFU.jpg","https://s4.ax1x.com/2022/02/21/HjQtFU.jpg",
"https://s4.ax1x.com/2022/02/21/HjQJoT.jpg","https://s4.ax1x.com/2022/02/21/HjQJoT.jpg",
"https://s4.ax1x.com/2022/02/21/HjQGwV.jpg","https://s4.ax1x.com/2022/02/21/HjQGwV.jpg",
"https://s4.ax1x.com/2022/02/21/HjQ8e0.jpg","https://s4.ax1x.com/2022/02/21/HjQ8e0.jpg",
"https://s4.ax1x.com/2022/02/21/HjQ1Lq.jpg","https://s4.ax1x.com/2022/02/21/HjQ1Lq.jpg",
"https://s4.ax1x.com/2022/02/21/HjQlyn.jpg","https://s4.ax1x.com/2022/02/21/HjQlyn.jpg",
"https://s4.ax1x.com/2022/02/20/HLEf9f.jpg","https://s4.ax1x.com/2022/02/20/HLEf9f.jpg",
"https://s4.ax1x.com/2022/02/20/HLE2Nt.jpg","https://s4.ax1x.com/2022/02/20/HLE2Nt.jpg",
"https://s4.ax1x.com/2022/02/20/HLEgAI.jpg","https://s4.ax1x.com/2022/02/20/HLEgAI.jpg",
"https://s4.ax1x.com/2022/02/20/HLE6HA.jpg","https://s4.ax1x.com/2022/02/20/HLE6HA.jpg",
"https://s4.ax1x.com/2022/02/20/HLEyBd.jpg","https://s4.ax1x.com/2022/02/20/HLEyBd.jpg",
"https://s4.ax1x.com/2022/02/20/HLEsnH.jpg","https://s4.ax1x.com/2022/02/20/HLEsnH.jpg",
"https://s4.ax1x.com/2022/02/20/HLEDje.jpg","https://s4.ax1x.com/2022/02/20/HLEDje.jpg",
"https://s4.ax1x.com/2022/02/20/HLEBcD.jpg","https://s4.ax1x.com/2022/02/20/HLEBcD.jpg",
"https://s4.ax1x.com/2022/02/20/HLE01O.jpg","https://s4.ax1x.com/2022/02/20/HLE01O.jpg",
"https://s4.ax1x.com/2022/02/20/HLEw9K.jpg","https://s4.ax1x.com/2022/02/20/HLEw9K.jpg",
"https://s4.ax1x.com/2022/02/20/HLEah6.jpg","https://s4.ax1x.com/2022/02/20/HLEah6.jpg",
"https://s4.ax1x.com/2022/02/20/HLENA1.jpg","https://s4.ax1x.com/2022/02/20/HLENA1.jpg",
"https://s4.ax1x.com/2022/02/20/HLEY7R.jpg","https://s4.ax1x.com/2022/02/20/HLEY7R.jpg",
"https://s4.ax1x.com/2022/02/20/HLEJB9.jpg","https://s4.ax1x.com/2022/02/20/HLEJB9.jpg",
"https://s4.ax1x.com/2022/02/20/HLEGnJ.jpg","https://s4.ax1x.com/2022/02/20/HLEGnJ.jpg",
"https://z3.ax1x.com/2021/08/29/h88GJH.jpg","https://z3.ax1x.com/2021/08/29/h88GJH.jpg"];
var dhlm=
["wobble","fadeOutDown","backInDown","backOutDown","backInLeft","backOutLeft","backInRight","backOutRight","backInUp","backOutUp","bounceIn","bounceOut","bounceInDown","bounceOutDown","bounceInLeft","bounceOutLeft","bounceInRight","bounceOutRight","bounceInUp","bounceOutUp","fadeIn","fadeOut","fadeInDown","fadeOutDown","fadeInDownBig","fadeOutDownBig","fadeInLeft","fadeOutLeft","fadeInLeftBig","fadeOutLeftBig","fadeInRight","fadeOutRight","fadeInRightBig","fadeOutRightBig","fadeInUp","fadeOutUp","fadeInUpBig","fadeOutUpBig","fadeInTopLeft","fadeOutTopLeft","fadeInTopRight","fadeOutTopRight","fadeInBottomLeft","fadeOutBottomRight","fadeInBottomRight","fadeOutBottomLeft","flip","zoomOut","flipInX","flipOutX","flipInY","flipOutY","lightSpeedInRight","lightSpeedOutRight","lightSpeedInLeft","lightSpeedOutLeft","rotateIn","rotateOut","rotateInDownLeft","rotateOutDownLeft","rotateInDownRight","rotateOutDownRight","rotateInUpLeft","rotateOutUpLeft","rotateInUpRight","rotateOutUpRight","jackInTheBox","hinge","rollIn","rollOut","rollOut","zoomOut","zoomIn","zoomOutDown","zoomInDown","zoomOutLeft","zoomInLeft","zoomOutRight","zoomInRight","zoomOutUp","slideInDown","slideOutDown","slideInLeft","slideOutLeft","slideInRight","slideOutRight","slideInUp","slideOutUp"];
var i=0;
var j=0;
var dhtyl= "animate__animated animate__slower animate__";
function qiehuan(){document.getElementById("img1").src=imgs; img1.className =dhtyl+ dhlm;
i++;
j++;
if(j >=dhlm.length){
    j =0;
}
if(i >=imgs.length){
    i=0;
}
}
setInterval("qiehuan()",4000);
</script>
<script type="text/javascript">
var hasClass = function(elements, cName) {
return !!elements.className.match(new RegExp("(\\s|^)" + cName + "(\\s|$)"))
};
var addClass = function(elements, cName) {
if (!hasClass(elements, cName)) {
elements.className += " " + cName
}
};
var removeClass = function(elements, cName) {
if (hasClass(elements, cName)) {
elements.className = elements.className.replace(new RegExp("(\\s|^)" + cName + "(\\s|$)"), " ")
}
};
var lrcPlayerX = function() {
return this.init.apply(this, arguments)
};
lrcPlayerX.prototype = {
constructor: lrcPlayerX,
init: function(opts) {
lyricTxt = opts.lrcTxt.replace(/(^\s*)|(\s*$)/g, '');
this.showLrcObj = document.getElementById(opts.lrcShowID);
this.audioCtrl = document.getElementById(opts.audioCtrl);
this.lrcVec = this.handleLrc(lyricTxt);
this.showLrcObj.appendChild(this.formLRCShow());
this.genPlayer(opts.audioURL)
},
handleLrc: function(lyricTxt) {
var parts = lyricTxt.replace(/(^\s*)|(\s*$)/g, "").split(/\r|\n|\r\n/);
var lrcs = new Array();
for (let index = 0; index < parts.length; index++) {
let chkTime = parts.match(/\[\d{1,2}:\d{2}.\d{1,3}\]|\[\d{1,2}:\d{2}\]/g);
if (chkTime) {
tIdx = parts.lastIndexOf(']');
if (tIdx > 0) lrcTxt = parts.substr(tIdx + 1);
for (m = 0; m < chkTime.length; m++) {
ta = chkTime.substr(1).replace(']', '').split(/:/);
_0 = (+ta) * 60 + (+ta);
if (lrcs.length == 0 && _0 != 0) {
lrcs.push({
seconds: 0,
})
}
lrcs.push({
seconds: _0,
words: lrcTxt
})
}
}
}
return lrcs.sort(function(a, b) {
return (a.seconds - b.seconds)
})
},
formLRCShow: function() {
var ulObj = document.createElement('ul');
for (let index = 0; index < this.lrcVec.length; index++) {
var liObj = document.createElement("li");
liObj.innerText = this.lrcVec.words;
ulObj.appendChild(liObj)
}
return ulObj
},
genPlayer: function(mUrl) {
this.mObj = document.createElement("audio");
this.mObj.loop = false;
this.mObj.muted = false;
this.mObj.src = mUrl;
this.showLrcObj.appendChild(this.mObj);
var that = this;
var turn = 0;
this.idx = 0;
this.mObj.addEventListener('ended', function() {
that.idx = 0;
removeClass(that.audioCtrl, 'z360z');
this.play()
});
this.mObj.addEventListener('playing', function() {
addClass(that.audioCtrl, 'z360z')
});
this.mObj.addEventListener('pause', function() {
removeClass(that.audioCtrl, 'z360z')
});
this.mObj.addEventListener('error', function() {
console.log("audio wrong, remove play start event");
that.showLrcObj.style.display = 'none';
var lrc_li_height = 70,
lrc_ul_height = 50;
var top = that.idx * lrc_li_height + lrc_li_height / 2 - lrc_ul_height / 2;
if (top < 0) {
top = 0
}
that.showLrcObj.removeChild(this)
});
this.mObj.addEventListener('timeupdate', function() {
if (that.idx < that.lrcVec.length) {
if (this.currentTime > that.lrcVec.seconds) {
var lrc_li_height = 70,
lrc_ul_height = 50;
var top = that.idx * lrc_li_height + lrc_li_height / 2 - lrc_ul_height / 2;
if (top < 0) {
top = 0
}
var ullrc = that.showLrcObj.getElementsByTagName('ul');
ullrc.style.marginTop = -top + "px";
var activeLi = ullrc.querySelector(".active");
if (activeLi) {
activeLi.classList.remove("active")
}
ullrc.children.classList.add("active");
that.idx++
}
}
});
this.audioCtrl.onclick = function() {
if (that.mObj.paused) {
that.mObj.play()
} else {
that.mObj.pause()
}
};
try {
this.mObj.play()
} catch (err) {
console.log(err.message)
}
}
}
</script>
<script type="text/javascript">
var lrc = `
请您欣赏《盛开的牡丹》
作词：李海鹰 李克
作曲：李海鹰
演唱：宋祖英
LRC字幕：寒冬残荷
幽幽清香飘过我的家
疑是天上飞雨花
谁能听清风儿在说话
多少人间故事留下
天香出自寻常的人家
花开时节满天下
轻轻闭上双眼
深深地祝愿
醉人芬芳飘天涯
山水同绘一幅画
你是盛开的牡丹
回眸一笑不觉惊动天下
你用天地间最美的生命
点点温暖万户千家
你是盛开的牡丹
国色天香只为滋润天下
你用一万年最深的牵挂
遍洒芬芳同醉天涯

幽幽清香飘过我的家
疑是天上飞雨花
谁能听清风儿在说话
多少人间故事留下
天香出自寻常的人家
花开时节满天下
轻轻闭上双眼
深深地祝愿
醉人芬芳飘天涯
山水同绘一幅画
你是盛开的牡丹
回眸一笑不觉惊动天下
你用天地间最美的生命
点点温暖万户千家
你是盛开的牡丹
国色天香只为滋润天下
你用一万年最深的牵挂
遍洒芬芳同醉天涯
遍洒芬芳同-醉-天-涯

`;
var opts = {
lrcTxt:lrc,
lrcShowID:'sLRC',
audioCtrl:'mDisk',
audioURL:'http://url.amp3a.com/kuwo.php/454828.mp3'
};
new lrcPlayerX(opts);
</script>

寒冬残荷 发表于 2022-8-28 10:35

因太懒网上查找图片和上传图片到图床就盗用了195400老师的图片地址了。谢谢了！:P

红枫 发表于 2022-8-28 12:03

寒冬残荷 发表于 2022-8-28 10:35
因太懒网上查找图片和上传图片到图床就盗用了195400老师的图片地址了。谢谢了！

感谢分享！
其实，数组名是可以乱序或按需省略排列的。

寒冬残荷 发表于 2022-8-28 12:16

红枫 发表于 2022-8-28 12:03
感谢分享！
其实，数组名是可以乱序或按需省略排列的。


<style>
#div1{background-image:url(https://www.z4a.net/images/2022/08/23/010.gif); background-size:cover; width:800px; height:220px; font-size:70pt; text-align:center; font-weight:bold; line-height:200px; color:transparent; -webkit-background-clip:text; border:0px #FF4A20 solid; }
</style>
<div id="div1">谢谢指点！</div>

寒冬残荷 发表于 2022-8-28 12:17

红枫 发表于 2022-8-28 12:03
感谢分享！
其实，数组名是可以乱序或按需省略排列的。

JS我就学会了图片地址切换这几句，灵活应用不了呀。别的JS代码都是照搬的。:P

寒冬残荷 发表于 2022-8-28 13:25

手机看的效果图，音乐能自动播放！
<img src="https://pic.imgdb.cn/item/630afa9916f2c2beb1332390.jpg" style="width:540px; height:754px; "/>

195400 发表于 2022-8-28 15:10

<svg width="100%" height="100%" viewBox="0 0 1000 300"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
   <path id="MyPath"
         d="
      M 200 200
      m -150, -50
      a 200,100 0 1,0 400,0
      a 200,100 0 1,1 400,0
"/>
</defs>

<use xlink:href="#MyPath" fill="none" stroke="transparent"/>

<text font-family="Verdana" font-size="50" stroke="red" fill="yellow">
    <textPath xlink:href="#MyPath">
      欣赏、学习、点赞！
             <animate attributeName="startOffset" from="0" to ="1028" begin="0s" dur="10s" repeatCount="indefinite" />

    </textPath>
</text>
</svg>

195400 发表于 2022-8-28 16:40

1.
if(j >dhlm.length){
    j =0;
}
if(i >imgs.length){
    i=0;
}

2. v4 有97种动画方式
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


寒冬残荷 发表于 2022-8-28 19:59

195400 发表于 2022-8-28 15:10
欣赏、学习、点赞！


<style>
#div1{background-image:url(https://pic.imgdb.cn/item/6300e81416f2c2beb1eeb7b6.gif); background-size:cover; width:1000px; height:220px; font-size:60pt; text-align:center; font-weight:bold; line-height:200px; color:transparent; -webkit-background-clip:text; border:0px #FF4A20 solid; }
</style>
<div id="div1">谢谢老师的支持与鼓励！</div>

寒冬残荷 发表于 2022-8-28 20:03

195400 发表于 2022-8-28 16:40
1.




老师，应该是:
if(j >=dhlm.length){
    j =0;
}
if(i >=imgs.length){
    i=0;
}

对不对？因为是从0开始计数的。
页: [1] 2 3
查看完整版本: 音画：《盛开的牡丹》（CSS3动画库V4.1.1学习帖）