Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <link href="https://fonts.googleapis.com/css?family=Nunito&display=swap" rel="stylesheet">
- <title>Animaciones</title>
- <style type="text/css">
- *{
- margin: 0;
- padding: 0;
- font-family: 'Nunito', sans-serif;
- }
- body, html{
- width: 100%;
- height: 100%;
- }
- main{
- width: 100%;
- height: 100%;
- display: flex;
- align-items: center;
- justify-content: center;
- }
- @keyframes entrada {
- from {
- transform: scale(0);
- }
- to {
- transform: scale(1);
- }
- }
- @keyframes salida {
- from {
- transform: scale(1);
- }
- to {
- transform: scale(0);
- }
- }
- .cuadro{
- animation-duration: 0.5s;
- animation-name: entrada;
- display: none;
- padding: 20px;
- border-radius: 10px;
- border: 2px #0a58bf solid;
- box-shadow: 0px 0px 5px #0a58bf, inset 0px 0px 5px #0a58bf;
- }
- #cuadro_1{
- display: block;
- }
- .cuadro h1{
- color: #0a58bf;
- }
- .cuadro p{
- margin: 0 auto;
- text-align: center;
- }
- .cuadro button{
- cursor: pointer;
- transition: 0.2s;
- margin-top: 20px;
- padding: 15px 30px;
- border-radius: 10px;
- font-size: 17px;
- font-weight: bold;
- border: none;
- background: #fff;
- color: #0a58bf;
- box-shadow: inset 0px 0px 0px 2px #0a58bf;
- }
- .cuadro button:hover{
- transition: 0.2s;
- background: #0a58bf;
- color: #fff;
- }
- </style>
- <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
- <script>
- $(document).ready(function(){
- function nextItem(){
- $('button').on('click', function(){
- let numer = this.id.split("_")[1];
- $('#cuadro_'+numer).css('animation-name','salida');
- setTimeout(function() {
- $('#cuadro_'+numer).css('display','none');
- numer++;
- $('#cuadro_'+numer).css('display','block');
- }, 500);
- });
- }
- $('button').on('click', nextItem());
- });
- </script>
- </head>
- <body>
- <main>
- <div class="cuadro" id="cuadro_1">
- <p>
- <h1>ESTE ES UN TEXTO DE PRUEBA</h1>
- </p>
- <p>
- <button id="boton_1">Oprimeme :3</button>
- </p>
- </div>
- <div class="cuadro" id="cuadro_2">
- <p>
- <h1>ESTE ES UN TEXTO DE PRUEBA</h1>
- <p>
- Numero 2
- </p>
- </p>
- <p>
- <button id="boton_2">Oprimeme :3</button>
- </p>
- </div>
- <div class="cuadro" id="cuadro_3">
- <p>
- <h1>ESTE ES UN TEXTO DE PRUEBA</h1>
- <p>
- Numero 3
- </p>
- </p>
- <p>
- <button id="boton_3">Oprimeme :3</button>
- </p>
- </div>
- </main>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement