核心提示：翻看了很久百度，库之类的，找了一些常用的字体样式整合了很久，做了个小页面。主要代码!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN...
翻看了很久百度，库之类的，找了一些常用的字体样式整合了很久，做了个小页面。
主要代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>显示鼠标坐标且文字发光</title>
</head>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(document).mousemove(function(e){
$("#coordinate").text("X:"+e.pageX + " Y:"+e.pageY);
});
$('.test1').click(function(){
$('.coordinate').css('color','#B6FF00').toggleClass('coordinateneon1')
})
$('.test2').click(function(){
$('.coordinate').css('color','#FF1177').toggleClass('coordinateneon2')
})
$('.test3').click(function(){
$('.coordinate').css('color','#228DFF').toggleClass('coordinateneon3')
})
$('.test4').click(function(){
$('.coordinate').css('color','#FFDD1B').toggleClass('coordinateneon4')
})
$('.test5').click(function(){
$('.coordinate').css('color','#FF9900').toggleClass('coordinateneon5')
})
$('.test6').click(function(){
$('.coordinate').css('color','#BA01FF').toggleClass('coordinateneon6')
})
$('.test7').click(function(){
$('.coordinate').css('color','#252527').toggleClass('coordinateneon7')
})
$('.test8').click(function(){
$('.coordinate').css('color','hsl(192, 100%, 31%)').toggleClass('coordinateneon8')
})
$('.testt').click(function(){
$('.coordinate').removeClass().addClass('coordinate');
})
});
</script>
</head>
<style>
.test{
margin-top:10px;
margin-left:10px;
width:100px;
line-height:40px;
height:40px;
font-size:20px;
color:#FFF;
font-weight:bolder;
border-radius:5px;
border:0;
outline:none;
box-shadow:3px 3px 3px #333;
cursor:pointer;
}
.test1{
background-color:#99FF00;
}
.test2{
background-color:#FF1177;
}
.test3{
background-color:#228DFF;
}
.test4{
background-color:#FFDD1B;
}
.test5{
background-color:#FF9900;
}
.test6{
background-color:#BA01FF;
}
.test7{
background-color:#252527;
}
.test8{
background-color:hsl(192, 100%, 31%);
}
.testt{
background-color:red;
}
#coordinate {
color:#9FC;
height:500px;
line-height:500px;
cursor:pointer;
font-size:100px;
font-weight:bold;
background-color:#000;
text-align:center;
}
/*荧光绿色字体*/
.coordinateneon1{
-webkit-animation:neon1 1.5s ease-in-out infinite alternate;
-moz-animation:neon1 1.5s ease-in-out infinite alternate;
animation:neon1 1.5s ease-in-out infinite alternate;
}
/*粉紫色字体*/
.coordinateneon2{
-webkit-animation:neon2 1.5s ease-in-out infinite alternate;
-moz-animation:neon2 1.5s ease-in-out infinite alternate;
animation:neon2 1.5s ease-in-out infinite alternate;
}
/*天蓝色字体*/
.coordinateneon3{
-webkit-animation:neon3 1.5s ease-in-out infinite alternate;
-moz-animation:neon3 1.5s ease-in-out infinite alternate;
animation:neon3 1.5s ease-in-out infinite alternate;
}
/*蛋黄色字体*/
.coordinateneon4{
font-family: "Arial Rounded MT Bold", "Helvetica Rounded", Arial, sans-serif;
-webkit-animation:neon4 1.5s ease-in-out infinite alternate;
-moz-animation:neon4 1.5s ease-in-out infinite alternate;
animation:neon4 1.5s ease-in-out infinite alternate;
}
/*土黄色字体*/
.coordinateneon5{
-webkit-animation:neon5 1.5s ease-in-out infinite alternate;
-moz-animation:neon5 1.5s ease-in-out infinite alternate;
animation:neon5 1.5s ease-in-out infinite alternate;
}
/*淡紫色字体*/
.coordinateneon6{
-webkit-animation:neon6 1.5s ease-in-out infinite alternate;
-moz-animation:neon6 1.5s ease-in-out infinite alternate;
animation:neon6 1.5s ease-in-out infinite alternate;
}
/*镂空字体*/
.coordinateneon7{
-webkit-text-stroke: 2px white;
text-shadow: 0 1px 0 #4a4a4e,-1px -1px 0 #4a4a4e, /*main 3d shadow*/ -1px 0px 0 #343437, -2px 1px 0 #343437, -3px 2px 0 #313134, -4px 3px 0 #2f2f31, -5px 4px 0 #2c2c2f, -6px 5px 0 #2a2a2c, -7px 6px 0 #27272a, -8px 7px 0 #252527, -9px 8px 0 #232324, -10px 9px 0 #202022, -11px 10px 0 #1e1e1f, -12px 11px 0 #1b1b1d, -13px 12px 0 #19191a, -14px 13px 0 #161617, -15px 14px 0 #141415, -16px 15px 0 #111112, /*top right*/ 0 -1px 1px #ffffff, 0 -2px 0px #ffffff, /*bottom left corner*/ -15px 14px 0px #ffffff, -16px 15px 0px #ffffff, -17px 16px 0px #ffffff, -18px 17px 0px #ffffff, -2px -1px 0 #ffffff, -3px 0px 0 #ffffff, /*top left corner*/ -19px 15px 0 #ffffff, -18px 14px 0 #ffffff, -17px 13px 0 #ffffff, -16px 12px 0 #ffffff, -15px 11px 0 #ffffff, -14px 10px 0 #ffffff, -13px 9px 0 #ffffff, -12px 8px 0 #ffffff, -11px 7px 0 #ffffff, -10px 6px 0 #ffffff, -9px 5px 0 #ffffff, -8px 4px 0 #ffffff, -7px 3px 0 #ffffff, -6px 2px 0 #ffffff, -5px 1px 0 #ffffff, -4px 0px 0 #ffffff, /*lower right / (upper right side for capital T like H etc letters. */ 0px 2px 0px #ffffff, -1px 3px 0px #ffffff, -2px 4px 0px #ffffff, -3px 5px 0px #ffffff, -4px 6px 0px #ffffff, -5px 7px 0px #ffffff, -6px 8px 0px #ffffff, -7px 9px 0px #ffffff, -8px 10px 0px #ffffff, -9px 11px 0px #ffffff, -10px 12px 0px #ffffff, -11px 13px 0px #ffffff, -12px 14px 0px #ffffff, -13px 15px 0px #ffffff, -14px 16px 0px #ffffff, -15px 17px 0px #ffffff;
}
/*艺术字体*/
.coordinateneon8{
font-family: 'Boogaloo', cursive;
text-shadow: 0 1px 0 hsl(192, 100%, 21%), 0 2px 0 hsl(192, 100%, 21%), 0 3px 0 hsl(192, 100%, 21%), 0 4px 0 hsl(192, 100%, 21%), 0 5px 0 hsl(192, 100%, 21%), 0 6px 1px hsla(0, 0%, 0%, .1), 0 0 5px hsla(0, 0%, 0%, .1), 0 1px 3px hsla(0, 0%, 0%, .3), 0 3px 5px hsla(0, 0%, 0%, .2), 0 5px 10px hsla(0, 0%, 0%, .25);
}
@keyframes neon1 {
from {
text-shadow:0 0 10px #fff,
0 0 20px #fff,
0 0 30px #fff,
0 0 40px #B6FF00,
0 0 70px #B6FF00,
0 0 80px #B6FF00,
0 0 100px #B6FF00,
0 0 150px #B6FF00;
}
to {
text-shadow: 0 0 5px #fff,
0 0 10px #fff,
0 0 15px #fff,
0 0 20px #B6FF00,
0 0 35px #B6FF00,
0 0 40px #B6FF00,
0 0 50px #B6FF00,
0 0 75px #B6FF00;
}
}
/*荧光绿色字体*/
@-webkit-keyframes neon2 {
from {
text-shadow: 0 0 10px #fff,
0 0 20px #fff,
0 0 30px #fff,
0 0 40px #FF1177,
0 0 70px #FF1177,
0 0 80px #FF1177,
0 0 100px #FF1177,
0 0 150px #FF1177;
}
to {
text-shadow: 0 0 5px #fff,
0 0 10px #fff,
0 0 15px #fff,
0 0 20px #FF1177,
0 0 35px #FF1177,
0 0 40px #FF1177,
0 0 50px #FF1177,
0 0 75px #FF1177;
}
}
@-webkit-keyframes neon3 {
from {
text-shadow: 0 0 10px #fff,
0 0 20px #fff,
0 0 30px #fff,
0 0 40px #228DFF,
0 0 70px #228DFF,
0 0 80px #228DFF,
0 0 100px #228DFF,
0 0 150px #228DFF;
}
to {
text-shadow: 0 0 5px #fff,
0 0 10px #fff,
0 0 15px #fff,
0 0 20px #228DFF,
0 0 35px #228DFF,
0 0 40px #228DFF,
0 0 50px #228DFF,
0 0 75px #228DFF;
}
}
@-webkit-keyframes neon4 {
from {
text-shadow: 0 0 10px #fff,
0 0 20px #fff,
0 0 30px #fff,
0 0 40px #FFDD1B,
0 0 70px #FFDD1B,
0 0 80px #FFDD1B,
0 0 100px #FFDD1B,
0 0 150px #FFDD1B;
}
to {
text-shadow: 0 0 5px #fff,
0 0 10px #fff,
0 0 15px #fff,
0 0 20px #FFDD1B,
0 0 35px #FFDD1B,
0 0 40px #FFDD1B,
0 0 50px #FFDD1B,
0 0 75px #FFDD1B;
}
}
@-webkit-keyframes neon5 {
from {
text-shadow: 0 0 10px #fff,
0 0 20px #fff,
0 0 30px #fff,
0 0 40px #FF9900,
0 0 70px #FF9900,
0 0 80px #FF9900,
0 0 100px #FF9900,
0 0 150px #FF9900;
}
to {
text-shadow: 0 0 5px #fff,
0 0 10px #fff,
0 0 15px #fff,
0 0 20px #FF9900,
0 0 35px #FF9900,
0 0 40px #FF9900,
0 0 50px #FF9900,
0 0 75px #FF9900;
}
}
@-webkit-keyframes neon6 {
from {
text-shadow: 0 0 10px #fff,
0 0 20px #fff,
0 0 30px #fff,
0 0 40px #ff00de,
0 0 70px #ff00de,
0 0 80px #ff00de,
0 0 100px #ff00de,
0 0 150px #ff00de;
}
to {
text-shadow: 0 0 5px #fff,
0 0 10px #fff,
0 0 15px #fff,
0 0 20px #ff00de,
0 0 35px #ff00de,
0 0 40px #ff00de,
0 0 50px #ff00de,
0 0 75px #ff00de;
}
}
</style>
<body>
<p id="coordinate" class="coordinate">这是鼠标当前位置</p>
<button class="test test1">荧光绿</button>
<button class="test test2">粉紫</button>
<button class="test test3">天蓝</button>
<button class="test test4">蛋黄</button>
<button class="test test5">土黄</button>
<button class="test test6">淡紫</button>
<button class="test test7">镂空</button>
<button class="test test8">艺术</button>
<button class="test testt">重置特效</button>
</body>
</html>
