炫酷的字体效果
ShylaDong 2020-02-25
<!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> 
相关推荐
ShylaDong 0喜欢 / 0评论 2020-07-29
haolt00 0喜欢 / 0评论 2020-07-04
ShylaDong 0喜欢 / 0评论 2020-06-29
82437702 0喜欢 / 0评论 2020-04-22
WinerChopin 0喜欢 / 0评论 2020-04-18
88467711 0喜欢 / 0评论 2020-03-28
haolt00 0喜欢 / 0评论 2020-02-23
冰蝶 0喜欢 / 0评论 2020-02-22
尚衍亮 0喜欢 / 0评论 2020-01-31
somboy 0喜欢 / 0评论 2019-11-10
wangjie 0喜欢 / 0评论 2019-10-23
冰蝶 0喜欢 / 0评论 2014-06-26
86251940 0喜欢 / 0评论 2017-02-18
wcssdu 0喜欢 / 0评论 2017-11-01
87241641 0喜欢 / 0评论 2019-07-30
loverlucky 0喜欢 / 0评论 2016-02-24
hb 0喜欢 / 0评论 2011-08-25
86251940 0喜欢 / 0评论 2019-06-14
切慕溪水 0喜欢 / 0评论 2019-07-01
88457415 0喜欢 / 0评论 2019-06-30
yezi 0喜欢 / 0评论 2019-06-29
88457415 0喜欢 / 0评论 2019-06-29
Ydgent 0喜欢 / 0评论 2017-11-01
chu0 0喜欢 / 0评论 2019-06-28
CoderChang 0喜欢 / 0评论 2016-10-10
86251940 0喜欢 / 0评论 2016-05-30
dazhifu 0喜欢 / 0评论 2016-04-20
SuiKaSan的自学室 0喜欢 / 0评论 2016-01-26
lxpandsq 0喜欢 / 0评论 2015-12-09
realitycss 0喜欢 / 0评论 2019-06-27
Cosmiccat 0喜欢 / 0评论 2015-06-12
86251940 0喜欢 / 0评论 2014-05-22
清荷叶之家 0喜欢 / 0评论 2019-06-26
87241641 0喜欢 / 0评论 2019-06-26
89453862 0喜欢 / 0评论 2013-11-06
84096523 0喜欢 / 0评论 2013-06-27
chu0 0喜欢 / 0评论 2019-06-21
linusz 0喜欢 / 0评论 2013-03-08
86251940 0喜欢 / 0评论 2012-12-10
linusz 0喜欢 / 0评论 2012-12-05
88457415 0喜欢 / 0评论 2009-06-05
linusz 0喜欢 / 0评论 2012-08-28
linusz 0喜欢 / 0评论 2019-06-20
84096523 0喜欢 / 0评论 2012-05-23