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(--url);
	transform: scaley(.8);
}
div:nth-of-type(8) {
	background: 87.5% var(--url);
		transform: scaley(1);
}
div:nth-of-type(9) {
	background: 100% var(--url);
	transform: scaley(1.1);
}
section:hover div:nth-of-type(8),
section:hover div:nth-of-type(6){
	transition-delay: .5s;
}
section:hover div:nth-of-type(4),
section:hover div:nth-of-type(1){
	transition-delay: .6s;
}
section:hover d.........完整代码请登录后点击上方下载按钮下载查看