div+css布局实现折纸雪花旋转动画效果代码-html代码-BFW代码库

div+css布局实现折纸雪花旋转动画效果代码

代码语言：html

代码描述：div+css布局实现折纸雪花旋转动画效果代码

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

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

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

  
<style>
.snowflake {
	width: 70vmin;
	aspect-ratio: 1/1;
	display: grid;
	filter: drop-shadow(.5vmin .5vmin 2vmin black);
	animation: rotate 20s linear infinite;
	> i {
		width: 50%;
		aspect-ratio: 1/1;
		grid-area: 1/1;
		place-self: start end;
		
		/* --odd: mod(var(--i), 2);  lacking support */
		background-color: hsl(0 0 calc(75% + 15% * var(--odd)));
		background-image: conic-gradient(at bottom left, #0005, #0000 var(--a));

		--a: calc(360deg / var(--segments));
		transform-origin: bottom left;
		transform: rotateY(calc(180deg * var(--odd))) rotateZ(calc((var(--i) + var(--odd)) * var(--a)));

		--mask: conic-gradient(at bottom left, #000 var(--a), #0000 calc(var(--a) + 0.25deg));
		-webkit-mask-image: var(--mask);
		mask-image: var(--mask);

		--clip: polygon(
			0 0, 20% 10%, 50% 0, 50% 20%, 20% 20%, 40% 40%, 15% 40%, 30% 60%, 10% 60%, 20% 70%, 5% 80%, 
			0 100%, 0 80%, 5% 70%, 0 60%, 0 50%, 5% 40%, 0% 30%, 0% 20%, 5% 10%, 0% 5%);
		-webkit-clip-path: var(--clip);
		clip-path: var(--clip);
		
		/* fallback for mod() */
		&am.........完整代码请登录后点击上方下载按钮下载查看