使用css来实现字体动画效果,几个字一起

用CSS来实现几个文字的动态效果,加载的时候会有动画效果,点击字体的时候也会有动画效果,这个不错,推荐适用的地方可以用一下 HTML代码 <h3 class=”fixed”>Click the letters!</h3> <div class=”word”>厦 门 创 意 互 动</div> <footer> </footer>   CSS代码 .word { font-family: ‘Anton’, sans-serif; perspective: 1000px; perspective-origin: 200px 40px; } .word span { cursor: pointer; display: inline-block; font-size: 100px; user-select: none; line-height: .8; } .word span:nth-child(1).active { animation: balance 1.5s ease-out; transform-origin: 0% 100% 0px; } @keyframes balance { 0%, 100% { transform: rotate(0deg); } 30%, 60% { transform: rotate(-45deg); } } .word span:nth-child(2).active { animation: shrinkjump 1s ease-in-out; transform-origin: bottom center; } @keyframes shrinkjump { 10%, 35% { transform: scale(2, .2) translate(0, 0); } 45%, 50% { transform: scale(1) translate(0, -150px); } 80% { transform: scale(1) translate(0, 0); } } .word span:nth-child(3).active { animation: falling 2s ease-out; transform-origin: bottom center; } @keyframes falling { 12% { transform: rotateX(240deg); } 24% { transform: rotateX(150deg); } 36% { transform: rotateX(200deg); } 48% { transform: rotateX(175deg); } 60%, 85% { transform: rotateX(180deg); } 100% { transform: rotateX(0deg); } } .word span:nth-child(4).active { animation: rotate 1s ease-out; } @keyframes rotate { 20%, 80% { transform: rotateY(180deg); } 100% { transform: rotateY(360deg); } } .word span:nth-child(5).active { animation: toplong 1.5s linear; } @keyframes toplong { 10%, 40% { transform: translateY(-48vh) scaleY(1); } 90% { transform: translateY(-48vh) scaleY(4); } } /* Other styles */ body { background-color: skyblue; color: #fff; display: flex; font-family: ‘Roboto’, sans-serif; justify-content: center; align-items: center; flex-direction: row; height: 100vh; margin: 0; } .fixed { position: fixed; top: 40px; left: 50%; transform: translateX(-50%); } footer { position: fixed; bottom: 0; left: 0; right: 0; text-align: center; letter-spacing: 1px; } footer i { color: red; } footer a { color: #3C97BF; text-decoration: none; } JS代码 let spans = document.querySelectorAll(‘.word span’); spans.forEach((span, idx) => { span.addEventListener(‘click’, (e) => { e.target.classList.add(‘active’); }); span.addEventListener(‘animationend’, (e) => { e.target.classList.remove(‘active’); }); // Initial animation setTimeout(() => { span.classList.add(‘active’); }, 750 * (idx+1)) });

友情提示:点赞熊源码网http://www.dianzanxiong.com点赞熊源码网 » 使用css来实现字体动画效果,几个字一起
分享到:
赞(0)
广告位820*80