CSS关键帧动画文本效果：逐行出场（封装二）
位置:
首页 >
代码集锦[ 发布时间: 2024.6.30 作者: 马黑 阅读: 216 ]
效果：
代码：
<style>
#papa { width: 200px; border: 1px solid gray; padding: 10px; margin: 30px; position: relative; }
#papa p { position: relative; padding: 0; margin: 6px 0; font: normal 22px sans-serif; text-shadow: 1px 1px 1px gray; animation: 2s forwards; }
#papa p:first-of-type { font-size: 26px; font-weight: bold; text-align: center; }
#papa p:last-of-type { font-size: 16px; text-align: right; }
@keyframes move { to { transform: translate(0); } }
</style>
<div id="papa"></div>
<script>
const textAni = (ar, ele, time = 10000) => {
let tId = 0;
const ps = [];
const mkPs = (lineAr) => {
ps.length = 0;
ele.innerHTML = '';
lineAr.forEach(line => {
let p = document.createElement('p');
p.innerHTML = line;
p.style.transform = `translate(${ele.offsetWidth}px)`;
ele.appendChild(p);
ps.push(p);
});
mkAni();
};
const mkAni = () => {
ps.forEach((p, k) => {
p.onanimationend = () => {
ps[(k + 1) % ps.length].style.animationName = 'move';
if (k === ps.length - 1) setTimeout(() => reset(), time);
};
});
ps[0].style.animationName = 'move';
};
const reset = () => {
getText();
ps.forEach(p => {
p.style.animationName = '';
p.style.transform = 'translate(${ele.offsetWidth}px)';
setTimeout(() => {
ps[0].style.animationName = 'move';
}, 500);
});
};
const getText = () => {
const tstr = ar[tId];
const lines = tstr.split('\n').filter(i => i !== '');
tId = (tId + 1) % ar.length;
mkPs(lines);
};
getText();
};
var txtAr = [
`长相思\n花似伊，柳似伊。\n花柳青春人别离。\n低头双泪垂。\n长江东，长江西。\n两岸鸳鸯两处飞。\n相逢知几时。\n——【宋】欧阳修`,
`长相思\n山一程，水一程，\n身向榆关那畔行，\n夜深千帐灯。\n风一更，雪一更，\n聒碎乡心梦不成，\n故园无此声。\n--【清】纳兰性德`,
];
textAni(txtAr, papa);
</script>
前一篇: CSS关键帧动画实现小球循环碰撞
下一篇: 拖曳元素（一）
发表评论:
评论列表 [1条]
#1 | 悄然 于 2024-6-30 13:25 发布: 有框的看得更加明显，标题是在正中央~~
