tnblog
首页
视频
资源
登录
原

TNBLOG(Button)

6026人阅读 2019/7/19 13:55 总访问：3467479 评论：1 收藏：0 手机
分类: 前端

Web Page Effect:

Html code:

  1. <!DOCTYPE html>

  2. <html>

  3. 	<head>

  4. 		<meta charset="utf-8" />

  5. 		<title></title>

  6. 		<style type="text/css">

  7. 			body{

  8. 				margin: 0;

  9. 				padding: 0;

  10. 				background: #0c002b;

  11. 				font-family: sans-serif;

  12. 			}

  13. 			a{

  14. 				position: absolute;

  15. 				top: 50%;

  16. 				left: 50%;

  17. 				transform: translate(-50%,-50%);

  18. 				color: #1670f0;

  19. 				padding: 30px 60px;

  20. 				font-size: 30px;

  21. 				/* 字体之间间隔距离 */

  22. 				letter-spacing: 2px;

  23. 				text-transform: uppercase;

  24. 				text-decoration: none;

  25. 				/* 字体的气场 */

  26. 				box-shadow: 0 20px 50px rgba(0,0,0,.5);

  27. 			}

  28. 			a:before{

  29. 				content: '';

  30. 				position: absolute;

  31. 				top: 2px;

  32. 				left: 2px;

  33. 				bottom: 2px;

  34. 				width: 50%;

  35. 				background-color: rgba(255,255,255,0.05);

  36. 			}

  37. 			a span:nth-child(1){

  38. 				position: absolute;

  39. 				top: 0;

  40. 				left: 0;

  41. 				width: 100%;

  42. 				height: 2px;

  43. 				background: linear-gradient(to right,#0c002b,#1779ff);

  44. 				animation: animate1 2s linear infinite;

  45. 			}

  46. 			a span:nth-child(2){

  47. 				position: absolute;

  48. 				top: 0;

  49. 				right: 0;

  50. 				width: 2px;

  51. 				height: 100%;

  52. 				background: linear-gradient(to bottom,#0c002b,#1779ff);

  53. 				animation: animate2 2s linear infinite;

  54. 			}

  55. 			a span:nth-child(3){

  56. 				position: absolute;

  57. 				bottom: 0;

  58. 				right: 0;

  59. 				width: 100%;

  60. 				height: 2px;

  61. 				background: linear-gradient(to left,#0c002b,#1779ff);

  62. 				animation: animate3 2s linear infinite;

  63. 			}

  64. 			a span:nth-child(4){

  65. 				position: absolute;

  66. 				bottom: 0;

  67. 				left: 0;

  68. 				width: 2px;

  69. 				height: 100%;

  70. 				background: linear-gradient(to top,#0c002b,#1779ff);

  71. 				animation: animate4 2s linear infinite;

  72. 			}

  73. 			@keyframes animate1{

  74. 				0%{

  75. 					transform: translateX(-100%);

  76. 				}

  77. 				100%{

  78. 					transform: translateX(100%);

  79. 				}

  80. 			}

  81. 			@keyframes animate2{

  82. 				0%{

  83. 					transform: translateY(-100%);

  84. 				}

  85. 				100%{

  86. 					transform: translateY(100%);

  87. 				}

  88. 			}

  89. 			@keyframes animate3{

  90. 				0%{

  91. 					transform: translateX(100%);

  92. 				}

  93. 				100%{

  94. 					transform: translateX(-100%);

  95. 				}

  96. 			}

  97. 			@keyframes animate4{

  98. 				0%{

  99. 					transform: translateY(100%);

  100. 				}

  101. 				100%{

  102. 					transform: translateY(-100%);

  103. 				}

  104. 			}

  105. 		</style>

  106. 	</head>

  107. 	<body>

  108. 		<a href="#">

  109. 			<span></span>

  110. 			<span></span>

  111. 			<span></span>

  112. 			<span></span>

  113. 			tnblog

  114. 		</a>

  115. 	</body>

  116. </html>



欢迎加群讨论技术，1群：677373950(满了，可以加，但通过不了)，2群：656732739

评价

剑轩

2019/7/19 21:03:01

优秀，进军前端了哦

回复
这一世以无限游戏为使命！
博主信息
排名
2
文章
634
粉丝
44
评论
93
文章类别
最新文章
最新评价
docker中Sware集群与service
尘叶心繁 : 想学呀！我教你呀
一个bug让程序员走上法庭 索赔金额达400亿日元
叼着奶瓶逛酒吧 : 所以说做程序员也要懂点法律知识
.net core 塑形资源
剑轩 : 收藏收藏
映射AutoMapper
剑轩 : 好是好，这个对效率影响大不大哇,效率高不高
ASP.NET Core 服务注册生命周期
剑轩 : http://www.tnblog.net/aojiancc2/article/details/167
关于我们
ICP备案 ：渝ICP备18016597号-1
网站信息：2018-2025TNBLOG.NET
技术交流：群号656732739
联系我们：contact@tnblog.net
公网安备：50010702506256
欢迎加群
欢迎加群交流技术