js+css实现炫酷图片相册卡片排列动画效果代码-html代码-BFW代码库

js+css实现炫酷图片相册卡片排列动画效果代码

代码语言：html

所属分类：动画

代码描述：js+css实现炫酷图片相册卡片排列动画效果代码

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

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

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

  
  
  
<style>
:root {
	--h: 200px;
	--w: 112px;
	--count: 28;
	--duration: 7s;
	--tau: 6.283rad;
	--timing: cubic-bezier(0.32, 0, 0.67, 0);
}

body {
	min-height: 100dvh;
	display: grid;
	align-content: center;
	justify-content: center;
	overflow: hidden;
}

.stage {
	width: calc(var(--h) * 2);
	height: calc(var(--h) * 2);
	position: relative;
}

img {
	--p: calc((var(--i) / var(--count)));
	--pn: calc((var(--p) - 0.5) * 2);
	--a: calc(var(--p) * var(--tau));
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: calc(var(--h) * -0.5);
	margin-left: calc(var(--w) * -0.5);
	transform-origin: 50% 50%;

	animation: dance var(--duration) infinite;
	animation-delay: calc(var(--duration) * (1 - var(--p)) * .1);
	animation-fill-mode: both;
	overflow: hidden;
}

@keyframes dance {
	0% {
		opacity: 0;
		translate: 0% 100%;
		rotate: 0rad;
		animation-timing-function: cubic-bezier(0.32, 0, 0.67, 0);
	}
	15% {
		opacity: 1;
		translate: calc(0% + ((var(--h) * .5) * var(--pn))) 0%;
		rotate: 0rad;
	}
	35% {
		opacity: 1;
		translate: calc(0% + ((var(--h) * .5) * var(--pn))) 0%.........完整代码请登录后点击上方下载按钮下载查看