class的流光效果

效果图:

代码示例

复制代码
<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			/* 流光效果 */
			.light {
				position: absolute;
				display: block;
			}

			.light:nth-child(1) {
				filter: hue-rotate(0deg);
				top: 0;
				left: 0;
				width: 100%;
				height: 3px;
				background: linear-gradient(90deg, transparent, #3a86ff);
				animation: animate1 8s linear infinite;
			}

			@keyframes animate1 {
				0% {
					left: -100%;
				}

				50%,
				100% {
					left: 100%;
				}
			}

			.light:nth-child(2) {
				filter: hue-rotate(60deg);
				top: -100%;
				right: 0;
				width: 3px;
				height: 100%;
				background: linear-gradient(180deg, transparent, #3a86ff);
				animation: animate2 8s linear infinite;
				animation-delay: 2s;
			}

			@keyframes animate2 {
				0% {
					top: -100%;
				}

				50%,
				100% {
					top: 100%;
				}
			}

			.light:nth-child(3) {
				filter: hue-rotate(120deg);
				bottom: 0;
				right: 0;
				width: 100%;
				background: linear-gradient(270deg, transparent, #3a86ff);
				animation: animate3 8s linear infinite;
				animation-delay: 4s;
			}

			@keyframes animate3 {
				0% {
					right: -100%;
					height: 3px;
				}

				50%,
				100% {
					height: 2px;
					right: 100%;
				}
			}

			.light:nth-child(4) {
				filter: hue-rotate(300deg);
				bottom: -100%;
				left: 0;
				width: 3px;
				height: 100%;
				background: linear-gradient(360deg, transparent, #3a86ff);
				animation: animate4 8s linear infinite;
				animation-delay: 6s;
			}

			@keyframes animate4 {
				0% {
					bottom: -100%;
				}

				50%,
				100% {
					bottom: 100%;
				}
			}

			.boxs {
				width: 100%;
				display: flex;
				justify-content: center;
				overflow: hidden;
			}

			.box {
				width: 300px;
				height: 300px;
				background-color: antiquewhite;
				text-align: center;

			}

			.box {
				position: relative;
				/* 让伪元素相对于.box定位 */
				overflow: hidden;
				/* 隐藏超出.box的部分 */
			}
		</style>
	</head>
	<body>

		<div class="boxs">
			
			<div class="box">
				<span class="light"></span><span class="light"></span><span class="light"></span><span class="light"></span>
				<p>流光效果</p>
			</div>
		</div>
	</body>
</html>

希望可以帮到大家

相关推荐
乖女子@@@2 小时前
css3新增-网格Grid布局
前端·css·css3
Sapphire~5 小时前
重学前端013 --- 响应式网页设计 CSS网格布局
前端·css
二十雨辰6 小时前
歌词滚动效果
前端·css
hashiqimiya7 小时前
html实现右上角有个图标,鼠标移动到该位置出现手型,点击会弹出登录窗口。
前端·html
BillKu11 小时前
Vue3 中使用 DOMPurify 对渲染动态 HTML 进行安全净化处理
前端·安全·html
dllmayday13 小时前
FontForge 手工扩展 iconfont.ttf
css·qt
BUG创建者18 小时前
html获取16个随机颜色并不重复
css·html·css3
DevilSeagull20 小时前
JavaScript WebAPI 指南
java·开发语言·javascript·html·ecmascript·html5
面向星辰20 小时前
html中css的四种定位方式
前端·css·html
Async Cipher21 小时前
CSS 权重(优先级规则)
前端·css