css+js实现网页滚动文字段落卡片边框入场走光动画效果代码-html代码-BFW代码库

css+js实现网页滚动文字段落卡片边框入场走光动画效果代码

代码语言：html

代码描述：css+js实现网页滚动文字段落卡片边框入场走光动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Genos:ital,wght@0,100..900;1,100..900&family=Tangerine:wght@700&display=swap" rel="stylesheet">
  
  
  
<style>
@property --ang {
	syntax: '<angle>';
	initial-value: 0deg;
	inherits: true
}

.card {
	--ani-grad: 
		conic-gradient(from var(--ang), 
				rgb(from #ffd23f r g b / var(--alpha, .5)), 
				#0000 40%) border-box;
	border: solid 6px #0000;
	background: 
		linear-gradient(#312244 0 0) padding-box, 
		var(--ani-grad);
	animation: ang 3s linear infinite
}

@keyframes ang { 0% { --ang: 1turn } }

.css-pseudo {
	--alpha: 1;
	position: relative;
	
	&::before {
		--full-cov: conic-gradient(red 0 0);
		position: absolute;
		inset: -6px;
		border: inherit;
		box-shadow: 0 0 1.5em rgb(0 0 0 / .01);
		background: var(--ani-grad);
		filter: blur(.5em);
		mask: 
			var(--full-cov) no-clip subtract, 
			var(--full-cov) padding-box;			
		pointer-events: none;
		content: ''
	}
}

.svg-filter { filter: url(#border-glow) }
.svg-grainy { filter: url(#grainy-glow) }

.svg-smooth { filter: url(#smooth-glow) }

.animatable { transition: 1s }

.hidden {
	opacit.........完整代码请登录后点击上方下载按钮下载查看