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>


相关推荐
然我14 分钟前
不用 Redux 也能全局状态管理?看我用 useReducer+Context 搞个 Todo 应用
前端·javascript·react.js
前端小巷子19 分钟前
Web 实时通信:从短轮询到 WebSocket
前端·javascript·面试
神仙别闹22 分钟前
基于C#+SQL Server实现(Web)学生选课管理系统
前端·数据库·c#
web前端神器29 分钟前
指定阿里镜像原理
前端
枷锁—sha34 分钟前
【DVWA系列】——CSRF——Medium详细教程
android·服务器·前端·web安全·网络安全·csrf
枷锁—sha35 分钟前
跨站请求伪造漏洞(CSRF)详解
运维·服务器·前端·web安全·网络安全·csrf
群联云防护小杜1 小时前
深度隐匿源IP:高防+群联AI云防护防绕过实战
运维·服务器·前端·网络·人工智能·网络协议·tcp/ip
汉得数字平台1 小时前
【鲲苍提效】全面洞察用户体验,助力打造高性能前端应用
前端·前端监控
花海如潮淹1 小时前
前端性能追踪工具:用户体验的毫秒战争
前端·笔记·ux
_丿丨丨_6 小时前
XSS(跨站脚本攻击)
前端·网络·xss