翻看了很久百度,库之类的,找了一些常用的字体样式整合了很久,做了个小页面。
主要代码
- <!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>
来源: https://www.2cto.com/kf/201711/700541.html