效果图
项目demo链接
实习思路
<button onclick="start()">again</button><p class="landIn">Ano hi watashitachi mada shiranai no Fushigi no monogatari desu.</p><style>body {display: flex;flex-direction: column;height: 100vh;justify-content: center;align-items: center;background-image: linear-gradient(rgba(16, 16, 16, 0.8), rgba(16, 16, 16, 0.8)),url(//10/18/buDT4YS6zUMfHst.jpg);background-size: cover;}p {margin: 0 9em;font-size: 2em;font-weight: 600;}.landIn {display: flex;flex-wrap: wrap;line-height: 1.8;color: white;font-family: Lora, serif;white-space: pre;}.landIn span {animation: landIn 0.8s ease-out both;}/** 这里是重点过渡动画，从Y轴向下过渡 效果是会从上往下过渡显示 */@keyframes landIn {from {opacity: 0;transform: translateY(-20%);}to {opacity: 1;transform: translateY(0);}}</style><script>function start() {/** 找到节点 */const dom = document.getElementsByClassName('landIn')[0];if (dom) {/** 获取内容字符串 */let letters = dom.textContent.split('');/** 清空内容 */dom.textContent = '';letters.forEach((letter, i) => {/** 每个字母创建一个 span 便签 插入 到 dom里面 */let span = document.createElement('span');span.textContent = letter;span.style.animationDelay = `${i * 0.05}s`;dom.append(span);});}}start();</script>
如果觉得《过渡动画css3 效果+实现思路 -3》对你有帮助，请点赞、收藏，并留下你的观点哦！
