css布局实现无限宇宙效果代码-html代码-BFW代码库

css布局实现无限宇宙效果代码

代码语言：html

代码描述：css布局实现无限宇宙效果代码

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

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

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

  
  
<style>
html {
	--s: 40px;
	--t: 1px;
	background: linear-gradient(
		180deg,
		#051937,
		#004d7a,
		#008793,
		#00bf72,
		#a8eb12
	);
	overflow: hidden;
	height: 100%;

	&::before {
		content: "";
		position: absolute;
		inset: 0;
		background: linear-gradient(0deg, #051937, #008793, #00bf72, #a8eb12);
		border-radius: 50%;
		width: 50%;
		max-width: 500px;

		aspect-ratio: 1;
		z-index: -1;
		margin: auto;
		-webkit-mask-image: linear-gradient(0deg, transparent 50%, black);
		        mask-image: linear-gradient(0deg, transparent 50%, black);
	}
}
body {
	color: #fff;
	height: 100%;
	perspective: 650px;
	-webkit-mask-image: linear-gradient(transparent calc(50% + var(--s)), black);
	        mask-image.........完整代码请登录后点击上方下载按钮下载查看