splitting实现图形线条分割动画视觉效果代码-html代码-BFW代码库

splitting实现图形线条分割动画视觉效果代码

代码语言：html

所属分类：动画

代码描述：splitting实现图形线条分割动画视觉效果代码

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

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

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

<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/splitting.css">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/splitting-cells.css">
<style>
:root {
	--loader-color: #002e63;
}
main {
	/* filter: drop-shadow(0 0 30px green); */
	/* border: 1px solid blue; */
}
section {
	display: flex;
	/* border-radius: 50%; */
	overflow: hidden;
	clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}
section:nth-child(2) {
	rotate: x 180deg;
}
.loader {
	width: 150px;
	height: 150px;
}
.loader1 {
	background: repeating-linear-gradient(
			90deg,
			var(--loader-color) 0 calc(12.5% - 5px),
			#0000 0 12.5%
		)
		left/calc(3 * 50%/3) 100%;
	animation: right 6s infinite linear;
}
@keyframes right {
	100% {
		background-position: right;
	}
}
.loader2 {
	background: repeating-linear-gradient(
		.........完整代码请登录后点击上方下载按钮下载查看