|
|

楼主 |
发表于 2024-6-30 11:26
|
显示全部楼层
代码:
- <style>
- #papa { width: 200px; border: 1px solid gray; padding: 10px; position: relative; margin: 30px; }
- #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 = [
- `长相思
- 花似伊,柳似伊。
- 花柳青春人别离。
- 低头双泪垂。
- 长江东,长江西。
- 两岸鸳鸯两处飞。
- 相逢知几时。
- ——【宋】欧阳修`,
- `长相思
- 山一程,水一程,
- 身向榆关那畔行,
- 夜深千帐灯。
- 风一更,雪一更,
- 聒碎乡心梦不成,
- 故园无此声。
- --【清】纳兰性德`,
- ];
- textAni(txtAr, papa);
- </script>
复制代码
|
|