#21
@Konan
[html]
<div class="bb-origami" id="bbOrigami">
<!-- state (no JS) -->
<input class="bb-step" type="radio" name="bbO" id="bbO1" checked>
<input class="bb-step" type="radio" name="bbO" id="bbO2">
<input class="bb-step" type="radio" name="bbO" id="bbO3">
<input class="bb-step" type="radio" name="bbO" id="bbO4">
<!-- frames -->
<div class="bb-frames">
<div class="bb-frame f1">
<img src="https://upforme.ru/uploads/001a/12/f3/4/t540713.png" alt="">
</div>
<div class="bb-frame f2">
<img src="https://upforme.ru/uploads/001a/12/f3/4/t117810.png" alt="">
</div>
<div class="bb-frame f3">
<img src="https://upforme.ru/uploads/001a/12/f3/4/t220861.png" alt="">
</div>
<div class="bb-frame f4 bb-text">
<div class="bb-lastline">
Сложи со мной нашу тысячу журавликов.<br>
Н.
</div>
</div>
</div>
<!-- click areas (cycle) -->
<label class="bb-click c1" for="bbO2" title="Сложить"></label>
<label class="bb-click c2" for="bbO3" title="Сложить"></label>
<label class="bb-click c3" for="bbO4" title="Сложить"></label>
<label class="bb-click c4" for="bbO1" title="Заново"></label>
<!-- fold overlays (one per image step; no fold for text) -->
<div class="bb-fold fold1" aria-hidden="true">
<div class="bb-piece p1"></div><div class="bb-piece p2"></div><div class="bb-piece p3"></div><div class="bb-piece p4"></div>
</div>
<div class="bb-fold fold2" aria-hidden="true">
<div class="bb-piece p1"></div><div class="bb-piece p2"></div><div class="bb-piece p3"></div><div class="bb-piece p4"></div>
</div>
<div class="bb-fold fold3" aria-hidden="true">
<div class="bb-piece p1"></div><div class="bb-piece p2"></div><div class="bb-piece p3"></div><div class="bb-piece p4"></div>
</div>
</div>
<style>
.bb-origami{
width: 400px;
height: 400px;
margin: 40px auto;
position: relative;
border-radius: 20px;
overflow: hidden;
user-select: none;
background: white;
perspective: 900px;
box-shadow:
0 8px 18px rgba(0,0,0,.18),
0 18px 38px rgba(0,0,0,.12);
}
/* hide radios */
.bb-step{ position:absolute; opacity:0; pointer-events:none; }
/* frames area */
.bb-frames{ position:absolute; inset:0; }
.bb-frame{
position: absolute;
inset: 0;
opacity: 0;
transition: opacity .18s ease;
}
.bb-frame img{
width: 100%;
height: 100%;
display: block;
object-fit: contain;
background: transparent;
}
/* last text */
.bb-text{
background: white;
color: #1e1a14;
display: flex;
align-items: center;
justify-content: center;
}
.bb-lastline{
font-size: 20px;
font-weight: 600;
text-align: center;
padding: 16px 18px;
max-width: 85%;
line-height: 1.3;
background: white;
border-radius: 14px;
}
/* show frame by state */
#bbO1:checked ~ .bb-frames .f1{ opacity:1; }
#bbO2:checked ~ .bb-frames .f2{ opacity:1; }
#bbO3:checked ~ .bb-frames .f3{ opacity:1; }
#bbO4:checked ~ .bb-frames .f4{ opacity:1; }
/* click overlays per state */
.bb-click{
position:absolute; inset:0;
cursor: pointer;
display:none;
z-index: 30;
}
#bbO1:checked ~ .c1{ display:block; }
#bbO2:checked ~ .c2{ display:block; }
#bbO3:checked ~ .c3{ display:block; }
#bbO4:checked ~ .c4{ display:block; }
/* fold overlays */
.bb-fold{
position:absolute; inset:0;
opacity:0;
pointer-events:none;
z-index: 20;
}
.bb-piece{
position:absolute; inset:0;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
filter: drop-shadow(0 10px 14px rgba(0,0,0,.20));
}
/* triangle parts */
.bb-piece.p1{ clip-path: polygon(0 0, 50% 50%, 0 100%); transform-origin: 0% 50%; }
.bb-piece.p2{ clip-path: polygon(0 0, 50% 50%, 100% 0); transform-origin: 50% 0%; }
.bb-piece.p3{ clip-path: polygon(100% 0, 50% 50%, 100% 100%); transform-origin: 100% 50%; }
.bb-piece.p4{ clip-path: polygon(0 100%, 50% 50%, 100% 100%); transform-origin: 50% 100%; }
/* set backgrounds per step */
.fold1 .bb-piece{ background-image: url('https://upforme.ru/uploads/001a/12/f3/4/t540713.png'); }
.fold2 .bb-piece{ background-image: url('https://upforme.ru/uploads/001a/12/f3/4/t117810.png'); }
.fold3 .bb-piece{ background-image: url('https://upforme.ru/uploads/001a/12/f3/4/t220861.png'); }
/* play fold on transitions (state change retriggers animation) */
#bbO1:checked ~ .fold1,
#bbO2:checked ~ .fold2,
#bbO3:checked ~ .fold3{
opacity:1;
}
#bbO1:checked ~ .fold1 .p1,
#bbO2:checked ~ .fold2 .p1,
#bbO3:checked ~ .fold3 .p1{ animation: foldL .55s ease forwards; }
#bbO1:checked ~ .fold1 .p3,
#bbO2:checked ~ .fold2 .p3,
#bbO3:checked ~ .fold3 .p3{ animation: foldR .55s ease forwards; }
#bbO1:checked ~ .fold1 .p2,
#bbO2:checked ~ .fold2 .p2,
#bbO3:checked ~ .fold3 .p2{ animation: foldT .55s ease forwards; }
#bbO1:checked ~ .fold1 .p4,
#bbO2:checked ~ .fold2 .p4,
#bbO3:checked ~ .fold3 .p4{ animation: foldB .55s ease forwards; }
/* fold keyframes */
@keyframes foldL{ 0%{transform:rotateY(0)} 100%{transform:rotateY(135deg);opacity:0} }
@keyframes foldR{ 0%{transform:rotateY(0)} 100%{transform:rotateY(-135deg);opacity:0} }
@keyframes foldT{ 0%{transform:rotateX(0)} 100%{transform:rotateX(-135deg);opacity:0} }
@keyframes foldB{ 0%{transform:rotateX(0)} 100%{transform:rotateX(135deg);opacity:0} }
</style>
[/html]
@Pain
Отредактировано Game Master (2026-02-13 05:37:54)