|
|
| 1行目: |
1行目: |
| <html> | | <html> |
| <div id="book-opening">
| |
| <div class="book-cover">
| |
| <div class="book-title">川西図鑑</div>
| |
| </div>
| |
| </div>
| |
| <div class="kawanishi-top"> | | <div class="kawanishi-top"> |
|
| |
|
| 145行目: |
140行目: |
| </section> | | </section> |
| </div> | | </div> |
| <script>
| |
| window.addEventListener('load', () => {
| |
| setTimeout(() => {
| |
| const book = document.getElementById('book-opening');
| |
| if (book) book.remove();
| |
| }, 1300);
| |
| });
| |
| </script>
| |
| <style> | | <style> |
| #book-opening {
| |
| position: fixed;
| |
| inset: 0;
| |
| background: #f8fafc;
| |
| z-index: 9999;
| |
| perspective: 2000px;
| |
| pointer-events: none;
| |
| }
| |
|
| |
| .book-cover {
| |
| width: 100%;
| |
| height: 100%;
| |
| background: linear-gradient(135deg, #e5e7eb, #f9fafb);
| |
| transform-origin: left center;
| |
| animation: openBook 1.2s ease-in-out forwards;
| |
| }
| |
|
| |
| .book-title {
| |
| position: absolute;
| |
| inset: 0;
| |
| display: flex;
| |
| align-items: center;
| |
| justify-content: center;
| |
| font-size: 3rem;
| |
| font-weight: 700;
| |
| letter-spacing: 0.08em;
| |
| color: #111827;
| |
| }
| |
|
| |
| @keyframes openBook {
| |
| 0% {
| |
| transform: rotateY(0deg);
| |
| }
| |
| 100% {
| |
| transform: rotateY(-110deg);
| |
| }
| |
| }
| |
| .kawanishi-top { | | .kawanishi-top { |
| max-width: 1100px; | | max-width: 1100px; |
