css实现图形边框走光loading动画效果代码-html代码-BFW代码库

css实现图形边框走光loading动画效果代码

代码语言：html

代码描述：css实现图形边框走光loading动画效果代码

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

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

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

  
  
  
<style>
:root {
	--bg1: #09334f;
	--bg2: #072a40;
	--wrm: #d1faff;
	--deg: -12deg;
	--sz: 12vmin;
	--spd: 2.05s;
}

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

body {
	margin: 0;
	padding: 0;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--bg1);
}

.loader {
	width: var(--sz);
	height: var(--sz);
	background: conic-gradient(from var(--deg) at 50% 50%, var(--bg1) 0, var(--wrm) 25deg 50deg, var(--bg1) 51deg 100%);
	clip-path: polygon(0% 0%, 40% 0%, 50% 10%, 60% 0%, 100% 0%, 100% 40%, 90% 50%, 100% 60%, 100% 100%, 60% 100%, 50% 90%, 40% 100%, 0% 100%, 0% 60%, 10% 50%, 0% 40%);
	animation: spin var(--spd) linear 0s infinite;
	display: f.........完整代码请登录后点击上方下载按钮下载查看