Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • 7 vistas

    Efecto

    Cargado por

    Anzaldo Rojano Maximiliano
    El documento describe un efecto de onda de surf para tarjetas HTML y CSS que muestra el contenido de la segunda cara de la tarjeta cuando el usuario pasa el mouse sobre la primera cara. Al pasar el mouse, la primera cara se transforma hacia arriba mientras la segunda cara se transforma hacia abajo, creando un efecto de onda. El CSS controla las transiciones y transformaciones entre las caras de la tarjeta.

    Copyright:

    © All Rights Reserved
    Descargue como DOCX, PDF, TXT o lea en línea desde Scribd

    Efecto

    Cargado por

    Anzaldo Rojano Maximiliano
    7 vistas6 páginas
    El documento describe un efecto de onda de surf para tarjetas HTML y CSS que muestra el contenido de la segunda cara de la tarjeta cuando el usuario pasa el mouse sobre la primera cara. Al pasar el mouse, la primera cara se transforma hacia arriba mientras la segunda cara se transforma hacia abajo, creando un efecto de onda. El CSS controla las transiciones y transformaciones entre las caras de la tarjeta.

    Descripción original:

    Efecto tipo "Surf Wave" para complementar una página HTML

    Derechos de autor

    © © All Rights Reserved

    Formatos disponibles

    DOCX, PDF, TXT o lea en línea desde Scribd

    ¿Le pareció útil este documento?

    ¿Este contenido es inapropiado?

    El documento describe un efecto de onda de surf para tarjetas HTML y CSS que muestra el contenido de la segunda cara de la tarjeta cuando el usuario pasa el mouse sobre la primera cara. Al pasar el mouse, la primera cara se transforma hacia arriba mientras la segunda cara se transforma hacia abajo, creando un efecto de onda. El CSS controla las transiciones y transformaciones entre las caras de la tarjeta.

    Copyright:

    © All Rights Reserved
    Descargue como DOCX, PDF, TXT o lea en línea desde Scribd
    Descargar como docx, pdf o txt
    7 vistas6 páginas

    Efecto

    Cargado por

    Anzaldo Rojano Maximiliano
    El documento describe un efecto de onda de surf para tarjetas HTML y CSS que muestra el contenido de la segunda cara de la tarjeta cuando el usuario pasa el mouse sobre la primera cara. Al pasar el mouse, la primera cara se transforma hacia arriba mientras la segunda cara se transforma hacia abajo, creando un efecto de onda. El CSS controla las transiciones y transformaciones entre las caras de la tarjeta.

    Copyright:

    © All Rights Reserved
    Descargue como DOCX, PDF, TXT o lea en línea desde Scribd
    Descargar como docx, pdf o txt
    de 6

    Efecto “Surf Wave” para HTML

    CÓDIGO

    <!DOCTYPE html>

    <html lang="en","es" >

    <head>

    <meta charset="UTF-8">

    <title>Efectos de Muestra</title>

    <link rel="stylesheet" href="./style.css">

    </head>

    <body>

    <!-- partial:index.partial.html -->

    <body>

    <div class="container">

    <div class="card">

    <div class="face face1">

    <div class="content">

    <img src="https://github.com/Jhonierpc/WebDevelopment/blob/master/CSS%20Card
    %20Hover%20Effects/img/design_128.png?raw=true">

    <h3>Design</h3>

    </div>

    </div>

    <div class="face face2">

    <div class="content">

    <p>Chupame las bolas viejo baboso.</p>

    <a href="#">Read More</a>

    </div>
    </div>

    </div>

    <div class="card">

    <div class="face face1">

    <div class="content">

    <img src="https://github.com/Jhonierpc/WebDevelopment/blob/master/CSS%20Card
    %20Hover%20Effects/img/code_128.png?raw=true">

    <h3>Code</h3>

    </div>

    </div>

    <div class="face face2">

    <div class="content">

    <p>Albion Online es un mmorpg no lineal, en el que escribes tu propia historia sin


    limitarte a seguir un camino prefijado.</p>

    <a href="#">Read More</a>

    </div>

    </div>

    </div>

    <div class="card">

    <div class="face face1">

    <div class="content">

    <img src="https://github.com/Jhonierpc/WebDevelopment/blob/master/CSS%20Card
    %20Hover%20Effects/img/launch_128.png?raw=true">

    <h3>Launch</h3>

    </div>

    </div>

    <div class="face face2">

    <div class="content">

    <p>Pues no se me ocurre nada asi que somaestatetranegro.</p>

    <a href="#">Read More</a>


    </div>

    </div>

    </div>

    </div>

    </body>

    <!-- partial -->

    </body>

    </html>

    CSS

    body{

    margin: 0;

    padding: 0;

    min-height: 100vh;

    background: #333;

    display: flex;

    justify-content: center;

    align-items: center;

    font-family: consolas;

    .container{

    width: 1000px;

    position: relative;

    display: flex;

    justify-content: space-between;
    }

    .container .card{

    position: relative;

    cursor: pointer;

    .container .card .face{

    width: 300px;

    height: 200px;

    transition: 0.5s;

    .container .card .face.face1{

    position: relative;

    background: #333;

    display: flex;

    justify-content: center;

    align-items: center;

    z-index: 1;

    transform: translateY(100px);

    .container .card:hover .face.face1{

    background: #ff0057;

    transform: translateY(0);

    .container .card .face.face1 .content{


    opacity: 0.2;

    transition: 0.5s;

    .container .card:hover .face.face1 .content{

    opacity: 1;

    .container .card .face.face1 .content img{

    max-width: 100px;

    .container .card .face.face1 .content h3{

    margin: 10px 0 0;

    padding: 0;

    color: #fff;

    text-align: center;

    font-size: 1.5em;

    .container .card .face.face2{

    position: relative;

    background: #fff;

    display: flex;

    justify-content: center;

    align-items: center;

    padding: 20px;

    box-sizing: border-box;

    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8);


    transform: translateY(-100px);

    .container .card:hover .face.face2{

    transform: translateY(0);

    .container .card .face.face2 .content p{

    margin: 0;

    padding: 0;

    .container .card .face.face2 .content a{

    margin: 15px 0 0;

    display: inline-block;

    text-decoration: none;

    font-weight: 900;

    color: #333;

    padding: 5px;

    border: 1px solid #333;

    .container .card .face.face2 .content a:hover{

    background: #333;

    color: #fff;

    También podría gustarte