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

代码语言:html

所属分类:加载滚动

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

代码标签: 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% .........完整代码请登录后点击上方下载按钮下载查看

网友评论0