From cae847fc92e04c756331cebbadf5019e6d9e63d9 Mon Sep 17 00:00:00 2001 From: Gabriel marques do Nascimento <gabrielmarquesnascimentob@gmail.com> Date: Tue, 29 Oct 2024 17:44:02 -0300 Subject: [PATCH] style mobal updt --- focus/Book2.html | 119 +++++++++++++++++++++++++++++++++++++++++++++++ index.html | 4 +- style.css | 10 ++-- 3 files changed, 127 insertions(+), 6 deletions(-) create mode 100644 focus/Book2.html diff --git a/focus/Book2.html b/focus/Book2.html new file mode 100644 index 0000000..744061f --- /dev/null +++ b/focus/Book2.html @@ -0,0 +1,119 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <title>Efeito de Virar Páginas</title> + <link rel="stylesheet" href="style.css"> +</head> +<style> + * { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body, html { + height: 100%; + display: flex; + align-items: center; + justify-content: center; + background-color: #f0f0f0; + overflow: hidden; + font-family: Arial, sans-serif; +} + +.book { + perspective: 1500px; + width: 600px; + height: 400px; + position: relative; +} + +.page { + width: 100%; + height: 100%; + background-color: #fff; + position: absolute; + top: 0; + left: 0; + backface-visibility: hidden; + transform-origin: left; + transition: transform 1s ease; + box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2); + overflow: hidden; +} + +/* Configuração inicial para cada página */ +#page1 { + z-index: 4; +} + +#page2 { + transform: rotateY(-180deg); + z-index: 3; +} + +#page3 { + transform: rotateY(-180deg); + z-index: 2; +} + +#page4 { + transform: rotateY(-180deg); + z-index: 1; +} + +/* Efeito de virar páginas em sequência */ +.book:hover #page1 { + transform: rotateY(-180deg); +} + +.book:hover #page2 { + transform: rotateY(-360deg); + transition-delay: 0.2s; +} + +.book:hover #page3 { + transform: rotateY(-540deg); + transition-delay: 0.4s; +} + +.book:hover #page4 { + transform: rotateY(-720deg); + transition-delay: 0.6s; +} + +.page .content { + padding: 20px; +} +</style> +<body> + <div class="book"> + <div class="page" id="page1"> + <div class="content"> + <h1>Página 1</h1> + <p>Conteúdo da primeira página.</p> + </div> + </div> + <div class="page" id="page2"> + <div class="content"> + <h1>Página 2</h1> + <p>Conteúdo da segunda página.</p> + </div> + </div> + <div class="page" id="page3"> + <div class="content"> + <h1>Página 3</h1> + <p>Conteúdo da terceira página.</p> + </div> + </div> + <div class="page" id="page4"> + <div class="content"> + <h1>Página 4</h1> + <p>Conteúdo da quarta página.</p> + </div> + </div> + </div> +</body> +</html> \ No newline at end of file diff --git a/index.html b/index.html index fc2ed4b..8ffa012 100644 --- a/index.html +++ b/index.html @@ -191,9 +191,9 @@ <h1>setings</h1> <button class="scrollbt buttons" id="setting" title="setting"> <svg xmlns="http://www.w3.org/2000/svg" - height="24px" + height="30px" viewBox="0 -960 960 960" - width="24px" + width="30px" fill="#5f6368" > <path diff --git a/style.css b/style.css index 5cdc090..1960ed6 100644 --- a/style.css +++ b/style.css @@ -87,7 +87,8 @@ margin-top: 40%; left: 90.3%; top: 52%; - + background: rgba(0, 0, 0, 0); + border: none; } #setting:hover{ background: black; @@ -376,7 +377,8 @@ body { #pai { margin-top: 20px; width: 95%; - height: 88vh; + height: 86vh; + } @@ -397,9 +399,9 @@ body { #setting{ position: fixed; left: 90%; - top: 0; + top: -4px; z-index: 4; - border-radius: 50%; + } #setings {