<html>
<head>
<title>Checkbox</title>
<style>
body {
margin: 20px auto;
width: 658px;
height: 675px;
background-color: #5D4C46;
padding: 2.5px;
position: relative;
border-radius: 8px;
}
div {
display: inline-block;
}
input[type=checkbox] {
display: none;
}
input[type=checkbox] + label {
background: #999;
height: 150px;
width: 200px;
display: inline-block;
padding: 0 0 0 0px;
transition-property: all;
transition-duration: 2s;
}
input[type=checkbox]:checked + label {
background: #0080FF;
height: 225px;
width: 300px;
animation: rotations 2s 2s;
display: inline-block;
padding: 0 0 0 0px;
}
@keyframes rotations {
0% {
transform: rotateZ(0deg)
}
100% {
transform: rotateZ(360deg)
}
}
img {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
</body>
<div>
<input type='checkbox' name='001' value='valuable' id="001" />
<label for="001"></label>
</div>
<div>
<input type='checkbox' name='002' value='valuable' id="002" />
<label for="002"></label>
</div>
<div>
<input type='checkbox' name='003' value='valuable' id="003" />
<label for="003"></label>
</div>
<div>
<input type='checkbox' name='004' value='valuable' id="004" />
<label for="004"></label>
</div>
<div>
<input type='checkbox' name='005' value='valuable' id="005" />
<label for="005"></label>
</div>
<div>
<input type='checkbox' name='006' value='valuable' id="006" />
<label for="006"></label>
</div>
<div>
<input type='checkbox' name='007' value='valuable' id="007" />
<label for="007"></label>
</div>
<div>
<input type='checkbox' name='008' value='valuable' id="008" />
<label for="008"></label>
</div>
<div>
<input type='checkbox' name='009' value='valuable' id="009" />
<label for="009"></label>
</div>
<div>
<input type='checkbox' name='010' value='valuable' id="010" />
<label for="010"></label>
</div>
<div>
<input type='checkbox' name='011' value='valuable' id="011" />
<label for="011"></label>
</div>
<div>
<input type='checkbox' name='012' value='valuable' id="012" />
<label for="012"></label>
</div>
</body>
</html>我正在尝试创建一个图像网格，但我遇到了 2 个问题：1-点击任何图像缩放时不应推送其他图像2-单击时：在缩放时将所选图像动画化到正文中间
感谢您的帮助
我已经接近你想要的，但反过来，它并不顺利。我使用比例，而不是宽度和高度。希望这有帮助。
<html>
<head>
<title>Checkbox</title>
<style>
body {
margin: 20px auto;
width: 658px;
height: 675px;
background-color: #5D4C46;
padding: 2.5px;
position: relative;
border-radius: 8px;
}
div {
display: inline-block;
}
input[type=checkbox] {
display: none;
}
input[type=checkbox] + label {
background: #999;
height: 150px;
width: 200px;
display: inline-block;
padding: 0 0 0 0px;
transition-property: all;
transition-duration: 2s;
}
input[type=checkbox]:checked + label {
background: #0080FF;
animation: rotations 4s forwards;
display: inline-block;
padding: 0 0 0 0px;
}
@keyframes rotations {
0% {
transform: scale(1) rotate(0deg);
}
50% {
transform: scale(1.5) rotate(0deg);
}
100% {
transform: scale(1.5) rotate(360deg);
}
}
@keyframes resize {
0% {
transform: scale();
}
100% {
transform: scale(1);
}
}
img {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
</body>
<div>
<input type='checkbox' name='001' value='valuable' id="001" />
<label for="001"></label>
</div>
<div>
<input type='checkbox' name='002' value='valuable' id="002" />
<label for="002"></label>
</div>
<div>
<input type='checkbox' name='003' value='valuable' id="003" />
<label for="003"></label>
</div>
<div>
<input type='checkbox' name='004' value='valuable' id="004" />
<label for="004"></label>
</div>
<div>
<input type='checkbox' name='005' value='valuable' id="005" />
<label for="005"></label>
</div>
<div>
<input type='checkbox' name='006' value='valuable' id="006" />
<label for="006"></label>
</div>
<div>
<input type='checkbox' name='007' value='valuable' id="007" />
<label for="007"></label>
</div>
<div>
<input type='checkbox' name='008' value='valuable' id="008" />
<label for="008"></label>
</div>
<div>
<input type='checkbox' name='009' value='valuable' id="009" />
<label for="009"></label>
</div>
<div>
<input type='checkbox' name='010' value='valuable' id="010" />
<label for="010"></label>
</div>
<div>
<input type='checkbox' name='011' value='valuable' id="011" />
<label for="011"></label>
</div>
<div>
<input type='checkbox' name='012' value='valuable' id="012" />
<label for="012"></label>
</div>
</body>
</html>