纯css实现2张图片点击过度动画效果代码-html代码-BFW代码库

纯css实现2张图片点击过度动画效果代码

代码语言：html

所属分类：动画

代码描述：纯css实现2张图片点击过度动画效果代码，无js代码参与。

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


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

<head>

  <meta charset="UTF-8">
  

  
  
  
  
<style>
.grid {
	--size: 80vmin;
	
  display: grid;
  width: var(--size);
  aspect-ratio: 1;
	grid-template-columns: repeat(var(--n), 1fr);
	cursor: pointer;
}
.cell {
	--abs-i: max(var(--ki,0) - var(--i),var(--i) - var(--ki,0));
	--abs-j: max(var(--kj,0) - var(--j),var(--j) - var(--kj,0));
	--rel-i: calc(var(--abs-i)/var(--n));
	--rel-j: calc(var(--abs-j)/var(--n));
	--sum: calc(var(--rel-i)*var(--rel-i) + var(--rel-j)*var(--rel-j));
	--sqr: var(--sum);
	display: grid;
	transform-style: preserve-3d;
	animation: m1 .4s calc(var(--sqr)*.6s) both;
}
.cell:before,
.cell:after {
	content: "";
	grid-area: 1/1;
	background: var(--img1)
		calc(var(--i)/var(--n)*100%) calc(var(--j)/var(--n)*100%)/var(--size) var(--size);
	backface-visibility: hidden;
}
.cell:after {
	background-image: var(--img2);
	transform: rotateY(180deg);
}
input:checked + label .cell {
	animation-name: m2;
}
@keyframes m1 {
  0% {transform: perspective(300px) scale(1.05) rotateY(0deg)}
  to {transform: perspective(300px) scale(1.05) rotateY(180deg)}
}
@keyframes m2 {
  0% {transform: perspective(300px) scale(1.05) rotateY(180deg)}
  to {transform: perspective(300px) scale(1.05) rotateY(0deg)}
}


@supports (z-index: sqrt(4)) {
	.cell {
		--sqr: sqrt(var(--sum));
	}
}


body { 
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-content: center;
	background: #c4eeff;
}
input {
	display: none;
}
</style>



</head>

<body  >
  <style>.grid:has(.cell[style*="--i: 0"]:hover) { --ki: 0 }
  .grid:has(.cell[style*="--j: 0"]:hover) { --kj: 0 }.grid:has(.cell[style*="--i: 1"]:hover) { --ki: 1 }
  .grid:has(.cell[style*="--j: 1"]:hover) { --kj: 1 }.grid:has(.cell[style*="--i: 2"]:hover) { --ki: 2 }
  .grid:has(.cell[style*="--j: 2"]:hover) { --kj: 2 }.grid:has(.cell[style*="--i: 3"]:hover) { --ki: 3 }
  .grid:has(.cell[style*="--j: 3"]:hover) { --kj: 3 }.grid:has(.cell[style*="--i: 4"]:hover) { --ki: 4 }
  .grid:has(.cell[style*="--j: 4"]:hover) { --kj: 4 }.grid:has(.cell[style*="--i: 5"]:hover) { --ki: 5 }
  .grid:has(.cell[style*="--j: 5"]:hover) { --kj: 5 }.grid:has(.cell[style*="--i: 6"]:hover) { --ki: 6 }
  .grid:has(.cell[style*="--j: 6"]:hover) { --kj: 6 }.grid:has(.cell[style*="--i: 7"]:hover) { --ki: 7 }
  .grid:has(.cell[style*="--j: 7"]:hover) { --kj: 7 }.grid:has(.cell[style*="--i: 8"]:hover) { --ki: 8 }
  .grid:has(.cell[style*="--j: 8"]:hover) { --kj: 8 }.grid:has(.cell[style*="--i: 9"]:hover) { --ki: 9 }
  .grid:has(.cell[style*="--j: 9"]:hover) { --kj: 9 }.grid:has(.cell[style*="--i: 10"]:hover) { --ki: 10 }
  .grid:has(.cell[style*="--j: 10"]:hover) { --kj: 10 }.grid:has(.cell[style*="--i: 11"]:hover) { --ki: 11 }
  .grid:has(.cell[style*="--j: 11"]:hover) { --kj: 11 }.grid:has(.cell[style*="--i: 12"]:hover) { --ki: 12 }
  .grid:has(.cell[style*="--j: 12"]:hover) { --kj: 12 }.grid:has(.cell[style*="--i: 13.........完整代码请登录后点击上方下载按钮下载查看