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.........完整代码请登录后点击上方下载按钮下载查看