svg+css实现散射Scatter动画效果代码-html代码-BFW代码库

svg+css实现散射Scatter动画效果代码

代码语言：html

所属分类：动画

代码描述：svg+css实现散射Scatter动画效果代码

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

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

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

  <meta name="viewport" content="width=device-width, initial-scale=1">
  
  
  
<style>
html, body {
	height: 100%;
}

body {
	margin: 0;
	overflow: hidden;
	background: #0d2558;
	&::before {
		content: '';
		position: fixed;
		inset: 0;
		filter: url('#noise');
		background: 
			radial-gradient(farthest-side at right top, #5e187b, #0000) top right / 60% 60% no-repeat,
			radial-gradient(farthest-side at left center, #025143, #0000) left 25% / 50% 130% no-repeat,
			radial-gradient(farthest-side at center bottom, #af64065c, #0000) 130% bottom / 45% 70% no-repeat,
			#0d2558;
	}
}

svg[width="0"][height="0"] { position: fixed; }

@property --t {
	syntax: '<number>';
	initial-value: 0;
	inherits: true;
}
@keyframes time { 90%, to { --t: 1; } }

#container {
	position: absolute;
	top: 50%;
	left: .........完整代码请登录后点击上方下载按钮下载查看