css+div实现炫酷透明分割背景文字卡片描边动画效果代码-html代码-BFW代码库

css+div实现炫酷透明分割背景文字卡片描边动画效果代码

代码语言：html

代码描述：css+div实现炫酷透明分割背景文字卡片描边动画效果代码

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

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

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


  
  
<style>
@layer base, demo;
@import url(https://fonts.bunny.net/css?family=abel:400);

@property --angle {
	syntax: "<angle>";
	initial-value: 0deg;
	inherits: false;
}

@layer demo {
	.cards {
		width: min(100% - 4rem, 600px);
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));

		gap: 3rem;
	}
	.card {
		--animation-duration: 8s;

		--border-width: 5px;
		--glow-offset: -20px;
		--border-radius: 0px;
		/*
		--neon-clr-1: rgb(110, 17, 176);
		--neon-clr-2: rgb(190, 219, 255);
		*/

		position: relative;
		border: solid var(--border-width) #0000;
		border-radius: var(--border-radius);

		@media (width > 600px) {
			min-height: 350px;
		}

		/*isolation: isolate;*/
		/* not relevant - just to place the text in the center */

		background-image: url("//repo.bfw.wiki/bfwrepo/image/669c6eb02a0bb.png");
		background-attachment: fixed;
		background-size: cover;
		.........完整代码请登录后点击上方下载按钮下载查看