纯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"]:hover) { --ki: 13 }
.grid:has(.cell[style*="--j: 13"]:hover) { --kj: 13 }
</style>
<input type="checkbox" id="image"/>
<label class="grid" style="--n: 14;--img1: url(//repo.bfw.wiki/bfwrepo/image/62eb2737168b1.png);--img2: url(//repo.bfw.wiki/bfwrepo/image/631a6185e74e3.png)" for="image">
<div class="cell" style="--i: 0;--j: 0;"></div>
<div class="cell" style="--i: 1;--j: 0;"></div>
<div class="cell" style="--i: 2;--j: 0;"></div>
<div class="cell" style="--i: 3;--j: 0;"></div>
<div class="cell" style="--i: 4;--j: 0;"></div>
<div class="cell" style="--i: 5;--j: 0;"></div>
<div class="cell" style="--i: 6;--j: 0;"></div>
<div class="cell" style="--i: 7;--j: 0;"></div>
<div class="cell" style="--i: 8;--j: 0;"></div>
<div class="cell" style="--i: 9;--j: 0;"></div>
<div class="cell" style="--i: 10;--j: 0;"></div>
<div class="cell" style="--i: 11;--j: 0;"></div>
<div class="cell" style="--i: 12;--j: 0;"></div>
<div class="cell" style="--i: 13;--j: 0;"></div>
<div class="cell" style="--i: 0;--j: 1;"></div>
<div class="cell" style="--i: 1;--j: 1;"></div>
<div class="cell" style="--i: 2;--j: 1;"></div>
<div class="cell" style="--i: 3;--j: 1;"></div>
<div class="cell" style="--i: 4;--j: 1;"></div>
<div class="cell" style="--i: 5;--j: 1;"></div>
<div class="cell" style="--i: 6;--j: 1;"></div>
<div class="cell" style="--i: 7;--j: 1;"></div>
<div class="cell" style="--i: 8;--j: 1;"></div>
<div class="cell" style="--i: 9;--j: 1;"></div>
<div class="cell" style="--i: 10;--j: 1;"></div>
<div class="cell" style="--i: 11;--j: 1;"></div>
<div class="cell" style="--i: 12;--j: 1;"></div>
<div class="cell" style="--i: 13;--j: 1;"></div>
<div class="cell" style="--i: 0;--j: 2;"></div>
<div class="cell" style="--i: 1;--j: 2;"></div>
<div class="cell" style="--i: 2;--j: 2;"></div>
<div class="cell" style="--i: 3;--j: 2;"></div>
<div class="cell" style="--i: 4;--j: 2;"></div>
<div class="cell" style="--i: 5;--j: 2;"></div>
<div class="cell" style="--i: 6;--j: 2;"></div>
<div class="cell" style="--i: 7;--j: 2;"></div>
<div class="cell" style="--i: 8;--j: 2;"></div>
<div class="cell" style="--i: 9;--j: 2;"></div>
<div class="cell" style="--i: 10;--j: 2;"></div>
<div class="cell" style="--i: 11;--j: 2;"></div>
<div class="cell" style="--i: 12;--j: 2;"></div>
<div class="cell" style="--i: 13;--j: 2;"></div>
<div class="cell" style="--i: 0;--j: 3;"></div>
<div class="cell" style="--i: 1;--j: 3;"></div>
<div class="cell" style="--i: 2;--j: 3;"></div>
<div class="cell" style="--i: 3;--j: 3;"></div>
<div class="cell" style="--i: 4;--j: 3;"></div>
<div class="cell" style="--i: 5;--j: 3;"></div>
<div class="cell" style="--i: 6;--j: 3;"></div>
<div class="cell" style="--i: 7;--j: 3;"></div>
<div class="cell" style="--i: 8;--j: 3;"></div>
<div class="cell" style="--i: 9;--j: 3;"></div>
<div class="cell" style="--i: 10;--j: 3;"></div>
<div class="cell" style="--i: 11;--j: 3;"></div>
<div class="cell" style="--i: 12;--j: 3;"></div>
<div class="cell" style="--i: 13;--j: 3;"></div>
<div class="cell" style="--i: 0;--j: 4;"></div>
<div class="cell" style="--i: 1;--j: 4;"></div>
<div class="cell" style="--i: 2;--j: 4;"></div>
<div class="cell" style="--i: 3;--j: 4;"></div>
<div class="cell" style="--i: 4;--j: 4;"></div>
<div class="cell" style="--i: 5;--j: 4;"></div>
<div class="cell" style="--i: 6;--j: 4;"></div>
<div class="cell" style="--i: 7;--j: 4;"></div>
<div class="cell" style="--i: 8;--j: 4;"></div>
<div class="cell" style="--i: 9;--j: 4;"></div>
<div class="cell" style="--i: 10;--j: 4;"></div>
<div class="cell" style="--i: 11;--j: 4;"></div>
<div class="cell" style="--i: 12;--j: 4;"></div>
<div class="cell" style="--i: 13;--j: 4;"></div>
<div class="cell" style="--i: 0;--j: 5;"></div>
<div class="cell" style="--i: 1;--j: 5;"></div>
<div class="cell" style="--i: 2;--j: 5;"></div>
<div class="cell" style="--i: 3;--j: 5;"></div>
<div class="cell" style="--i: 4;--j: 5;"></div>
<div class="cell" style="--i: 5;--j: 5;"></div>
<div class=".........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0