css3滚动边框特效属性 filter、inset应用

复制代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="main">
			<div class="border" style="--border-color:hsl(120, 86%, 53%); --delay-coef:2">
				<div class="text">

				</div>
			</div>
		</div>
		<style type="text/css">
			body {
				--border-color: hsl(295, 100%, 63%);
				--border-gradient-angle: 0turn;
				--button-bgc: #ff7300;
				--font-color: hsl(0, 0%, 100%);
				--body-bgc: hsl(230, 50%, 15%);
				background-color: var(--body-bgc);
			}

			* {
				padding: 0;
				margin: 0;
			}

			#main {
				display: flex;
				justify-content: center;
				align-items: center;
				padding-top: 100px;





			}

			/* 内部文字 */
			.border .text {
				font-size: 2rem;
				letter-spacing: .1em;
				text-transform: uppercase;
				color: var(--font-color);
				opacity: 0.6;
				position: relative;
				z-index: 1;
			}

			.border {
				display: flex;
				justify-content: center;
				align-items: center;
				text-decoration: none;
				padding: 0.8em 1em;
				background-color: var(--button-bgc);
				overflow: hidden;
				position: relative;
				width: 200px;
				height: 100px;
			}

			@keyframes animate {
				0% {
					/* transform: rotate(calc(30deg * var(--delay-coef))) */
					transform: rotate(calc(0))
				}

				100% {
					/* transform: rotate(calc(360deg + 30deg * var(--delay-coef))) */
					transform: rotate(calc(360deg))
				}

			}

			.border::after {
				content: "";
				position: absolute;
				background-color: var(--button-bgc);
				inset: 4px;
			}

			/* .border::after, */
			.border::before {
				content: '';
				position: absolute;
				height: 80%;
				width: 150%;
				background-color: var(--border-color);
				animation: animate 3s linear infinite;

			}
		</style>
	
		<p>测试彩色</p>
		<div class="sb">
			<div class="sb2">
				娃哈哈
			</div>
		</div>
		<p>裁剪</p>
		<div class="shuaibu2">
			<div class="shuaibi"></div>
		</div>
		<style type="text/css">
			.sb{
				display: flex;
				justify-content: center;
				align-items: center;
			
			}
			.sb2{
				width: 200px;
				height: 100px;
				 background: linear-gradient(45deg, #ffadad, #ffd65a, #fdffb6, #9bf6ff, #10c4ff, #bdb2ff, #ffc626);
				position: relative;
				overflow: hidden;
				background-clip: text;
				  -webkit-text-fill-color: transparent;
			}
			@keyframes animate1 {
				0% {
				
					transform: rotate(0);
					filter: hue-rotate(0deg);
				}
			
				100% {
					
					transform: rotate(360deg);
					 filter: hue-rotate(360deg);
				}
			
			}
			.sb2::before{
				content: "";
				width: 150%;
				height: 80%;
				position: absolute;
				background-color: red;
				animation: animate1 3s linear infinite;
				transfrom-origin:left bottom;
			}
			.sb2::after{
				content: "";
				position: absolute;
				background-color: blue;
				inset: 4px;
			}
			
			/* 裁剪测试 */
			.shuaibu2{
				width: 300px;
				height: 100px;
				background-color: red;
				position: relative;
			}
			.shuaibi{
				position: absolute;
				background-color: blue;
				inset: 4px;
			}
		</style>
	</body>
</html>