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>


相关推荐
孤水寒月3 小时前
基于HTML的悬窗可拖动记事本
前端·css·html
祝余呀3 小时前
html初学者第一天
前端·html
耶啵奶膘5 小时前
uniapp+firstUI——上传视频组件fui-upload-video
前端·javascript·uni-app
视频砖家6 小时前
移动端Html5播放器按钮变小的问题解决方法
前端·javascript·viewport功能
lyj1689976 小时前
vue-i18n+vscode+vue 多语言使用
前端·vue.js·vscode
小白变怪兽8 小时前
一、react18+项目初始化(vite)
前端·react.js
ai小鬼头8 小时前
AIStarter如何快速部署Stable Diffusion?**新手也能轻松上手的AI绘图
前端·后端·github
墨菲安全9 小时前
NPM组件 betsson 等窃取主机敏感信息
前端·npm·node.js·软件供应链安全·主机信息窃取·npm组件投毒
GISer_Jing9 小时前
Monorepo+Pnpm+Turborepo
前端·javascript·ecmascript
天涯学馆9 小时前
前端开发也能用 WebAssembly?这些场景超实用!
前端·javascript·面试