标签：案例 tco over value alternate nat lis ict dev
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>案例：炫酷的字体效果</title> </head> <style type="text/css"> .{ padding: 0; margin: 0; } body { width: 100vh; height: 100vh; display: flex; justify-content: center; align-items: center; background-color: #34495e; } div { font-size: 5em; font-weight: bold; text-transform: uppercase; color: #9b59b6; } div > span { position: relative; display: inline-block; } .color { animation-name: color; animation-duration: 1s; animation-iteration-count: 2; animation-timing-function: linear; animation-direction: alternate; } @keyframes color{ 50% { color: #f1c40f; transform: scale(2); } to{ color: #e74c3c; transform: scale(0.5); } } </style> <body> <div>posserldm</div> </body> <script type="text/javascript"> "use strict"; const div = document.querySelector(‘div‘); [...div.textContent].reduce(function(pre, value, index) { pre === index && (div.innerText = ‘‘); let span = document.createElement(‘span‘); span.innerText = value; span.addEventListener(‘mouseover‘, function () { this.className = ‘color‘; }); div.appendChild(span); span.addEventListener(‘animationend‘, function() { this.classList.remove(‘color‘); // this.className = ‘‘; }); }, 0); </script> </html>
标签：案例 tco over value alternate nat lis ict dev
原文地址：https://www.cnblogs.com/li1234567980/p/12364336.html
