div+css实现图片切割合并动画效果代码-html代码-BFW代码库

div+css实现图片切割合并动画效果代码

代码语言：html

所属分类：动画

代码描述：div+css实现图片切割合并动画效果代码，点击图片开始动画，一张图片实现。

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

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

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

  
<style>
div {
        width: 12.5%;
        height: 30vw;
        --url: center/30vw url("//repo.bfw.wiki/bfwrepo/icon/669b0429763be.png");               
        transition: transform 1s cubic-bezier(.8,-.5,.2,1.4);
}
div:nth-of-type(1) {
        background: left var(--url);
}
div:nth-of-type(2) {
        background: 12.5% var(--url);
}
div:nth-of-type(3) {
        background: 25% var(--url);
        transform: scaley(.9);
}
div:nth-of-type(4) {
        background: 37.5% var(--url);
        transform: scaley(1.1);
}
div:nth-of-type(5) {
        background: 50% var(--url);
        transform: scaley(.9);
}
div:nth-of-type(6) {
        background: 62.5% var(--url);
        transform: scaley(1.1);
}
div:nth-of-type(7) {
        background: 75% var(--ur.........完整代码请登录后点击上方下载按钮下载查看