• class的流光效果

    效果图：

    代码示例

    1.  
    2. <!DOCTYPE html>
    3. <html lang="zh">
    4. 	<head>
    5. 		<meta charset="UTF-8">
    6. 		<meta name="viewport" content="width=device-width, initial-scale=1.0">
    7. 		<title>Document</title>
    8. 		<style>
    9. 			* {
    10. 				margin: 0;
    11. 				padding: 0;
    12. 			}
    13.  
    14. 			/* 流光效果 */
    15. 			.light {
    16. 				position: absolute;
    17. 				display: block;
    18. 			}
    19.  
    20. 			.light:nth-child(1) {
    21. 				filter: hue-rotate(0deg);
    22. 				top: 0;
    23. 				left: 0;
    24. 				width: 100%;
    25. 				height: 3px;
    26. 				background: linear-gradient(90deg, transparent, #3a86ff);
    27. 				animation: animate1 8s linear infinite;
    28. 			}
    29.  
    30. 			@keyframes animate1 {
    31. 				0% {
    32. 					left: -100%;
    33. 				}
    34.  
    35. 				50%,
    36. 				100% {
    37. 					left: 100%;
    38. 				}
    39. 			}
    40.  
    41. 			.light:nth-child(2) {
    42. 				filter: hue-rotate(60deg);
    43. 				top: -100%;
    44. 				right: 0;
    45. 				width: 3px;
    46. 				height: 100%;
    47. 				background: linear-gradient(180deg, transparent, #3a86ff);
    48. 				animation: animate2 8s linear infinite;
    49. 				animation-delay: 2s;
    50. 			}
    51.  
    52. 			@keyframes animate2 {
    53. 				0% {
    54. 					top: -100%;
    55. 				}
    56.  
    57. 				50%,
    58. 				100% {
    59. 					top: 100%;
    60. 				}
    61. 			}
    62.  
    63. 			.light:nth-child(3) {
    64. 				filter: hue-rotate(120deg);
    65. 				bottom: 0;
    66. 				right: 0;
    67. 				width: 100%;
    68. 				background: linear-gradient(270deg, transparent, #3a86ff);
    69. 				animation: animate3 8s linear infinite;
    70. 				animation-delay: 4s;
    71. 			}
    72.  
    73. 			@keyframes animate3 {
    74. 				0% {
    75. 					right: -100%;
    76. 					height: 3px;
    77. 				}
    78.  
    79. 				50%,
    80. 				100% {
    81. 					height: 2px;
    82. 					right: 100%;
    83. 				}
    84. 			}
    85.  
    86. 			.light:nth-child(4) {
    87. 				filter: hue-rotate(300deg);
    88. 				bottom: -100%;
    89. 				left: 0;
    90. 				width: 3px;
    91. 				height: 100%;
    92. 				background: linear-gradient(360deg, transparent, #3a86ff);
    93. 				animation: animate4 8s linear infinite;
    94. 				animation-delay: 6s;
    95. 			}
    96.  
    97. 			@keyframes animate4 {
    98. 				0% {
    99. 					bottom: -100%;
    100. 				}
    101.  
    102. 				50%,
    103. 				100% {
    104. 					bottom: 100%;
    105. 				}
    106. 			}
    107.  
    108. 			.boxs {
    109. 				width: 100%;
    110. 				display: flex;
    111. 				justify-content: center;
    112. 				overflow: hidden;
    113. 			}
    114.  
    115. 			.box {
    116. 				width: 300px;
    117. 				height: 300px;
    118. 				background-color: antiquewhite;
    119. 				text-align: center;
    120.  
    121. 			}
    122.  
    123. 			.box {
    124. 				position: relative;
    125. 				/* 让伪元素相对于.box定位 */
    126. 				overflow: hidden;
    127. 				/* 隐藏超出.box的部分 */
    128. 			}
    129. 		</style>
    130. 	</head>
    131. 	<body>
    132.  
    133. 		<div class="boxs">
    134. 			
    135. 			<div class="box">
    136. 				<span class="light"></span><span class="light"></span><span class="light"></span><span class="light"></span>
    137. 				<p>流光效果</p>
    138. 			</div>
    139. 		</div>
    140. 	</body>
    141. </html>

    希望可以帮到大家

  • 相关阅读:
    在docker上安装AWVS
    VS Code C# 开发工具包正式发布
    Android 10开始不支持创建新的HIDL
    无胁科技-TVD每日漏洞情报-2022-11-10
    微信小程序 slot 不显示
    .Net7自定义GC垃圾回收器
    docker-compose部署mysql5.7主从
    机器学习——词向量模型（未开始）
    MaixII-Dock(v831)学习笔记——UART
    网页构造与源代码
  • 原文地址：https://blog.csdn.net/tianxianghuiwei/article/details/139844862