js实现图片复制变形动画艺术效果代码-html代码-BFW代码库

js实现图片复制变形动画艺术效果代码

代码语言：html

所属分类：动画

代码描述：js实现图片复制变形动画艺术效果代码，可设置数量和图片地址。

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

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

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

  
  
<style>
body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	overflow: hidden;
	background-color: #111;

	&:hover footer#options {
		position: absolute;
		bottom: 0;
		padding: 1rem;
		background: rgb(255 255 255 / 30%);
	}
}

.kaleidoscope {
	position: relative;
	width: 100dvw;
	height: 100dvh;
	&.rotating {
		animation: 🎡 10s linear infinite;
		transform-origin: center;
	}
	& > .tile {
		display: none;
		position: absolute;
		top: 50dvh;
		left: 0;
		z-index: 0;
		overflow: hidden;
		height: max(100dvh, 100dvw);
		width: max(50dvh, 50dvw);
		transform-origin: right top;
		& > .image {
			position: relative;
			top: 0;
			left: 100%;
			height: 100%;
			width: 100%;
			background-color: rgb(255 255 255 / 5%);
			background-image: unset;
			transform-origin: left top;
			transition: background-position 100ms ease-in-out;
		}
	}
	&[da.........完整代码请登录后点击上方下载按钮下载查看