<!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> 