Making HTML-Bilder, in CSS als Übergänge glühen

Ich habe ein einfaches Login-System gemacht. Aber ich weiß nicht, wie ich das als Übergänge machen soll.Making HTML-Bilder, in CSS als Übergänge glühen

Demo: https://jsfiddle.net/xcefgg9g/

HTML

<body> 

    <!-- Header 
    ================================================== --> 
    <header id="home"> 
     <div class="row banner"> 
     <div class="banner-text"> 
     <div class="stop"> 
     <div class="logo"> <img src="http://i.imgur.com/R6bUhGI.png" width="500" height="500" ></img></div> 
       <div class="text">Alege ce ești.</div> 
<div class="jucator"><a href="https://google.com"> <img src="http://i.imgur.com/SMHDIim.png"> </a> 
     <a href="https://google.com"> <img src="http://i.imgur.com/PAGOmxn.png"></a></div> 


     </div> 
     </div> 



    </header> <!-- Header End -->

CSS

body { background: #0f0f0f; } 
header { 
    position: relative; 
    height: 800px; 
    min-height: 500px; 
    width: 100%; 
    background: #161415 url(http://i.imgur.com/GOX7opa.gif) top center; 
    background-size: cover !important; 
    -webkit-background-size: cover !important; 
    text-align: center; 
    overflow: hidden; 
} 

header:before { 
    content: ''; 
    display: inline-block; 
    vertical-align: middle; 
    height: 100%; 
} 
header .banner { 
    display: inline-block; 
    vertical-align: middle; 
    margin: 0 auto; 
    width: 85%; 
    padding-bottom: 30px;s 
    text-align: center; 
} 

header .banner-text { width: 100%; } 
header .banner-text h1 { 
    font: 90px/1.1em 'opensans-bold', sans-serif; 
    color: #fff; 
    letter-spacing: -2px; 
    margin: 0 auto 18px auto; 
    text-shadow: 0px 1px 3px rgba(0, 0, 0, .8); 
} 

.jucator 
{ 
padding-top:0px; 
padding-left:200px; 
} 

.logo 
{padding-left:181px; 
padding-bottom:25px; 
} 

.text{ 
    padding-bottom:50px; 
    padding-left:200px; 
    font-size: 200%; 

}

Live-: http://vestigedayz.com/nerve/

Ich möchte Gelöschter und Observator Bilder als Übergänge machen (wenn Cursor auf Gelöschter geht , es wird ein Licht u nder Bild, und wenn es geht zu Observator wird eine andere Farbe zeigen)

Und wenn ich darauf drücken, mag ich Login-Bereich als Übergang bringen (langsam)

Wie kann ich das machen?

Vielen Dank

Quelle

2017-02-06 Anonymous

Ich habe ein einfaches Layout für Sie.

Für die Schaltflächen, ich habe gerade einen Box-Shadow-Übergang auf Hover hinzugefügt.

Für die Login-Seite habe ich gerade den Übergang von oben gemacht, wenn du auf einen der Buttons klickst (du kannst damit rumspielen oder einen eigenen Übergang haben).

Ziemlich einfach, lassen Sie mich wissen, wenn Sie Fragen haben.

$(document).ready(function(){ 
 
    // first login page 
 
    $(".landing-page-buttons .first-login").on("click", function(e){ 
 
    e.preventDefault(); 
 
    $(".login-page.first").toggleClass("open"); 
 
    }); 
 
    
 
    $(".first .close").on("click", function(e) { 
 
    e.preventDefault(); 
 
    $(".login-page.first").toggleClass("open"); 
 
    }); 
 
    
 
    // second login page 
 
    $(".landing-page-buttons .second-login").on("click", function(e){ 
 
    e.preventDefault(); 
 
    $(".login-page.second").toggleClass("open"); 
 
    }); 
 
    
 
    $(".second .close").on("click", function(e) { 
 
    e.preventDefault(); 
 
    $(".login-page.second").toggleClass("open"); 
 
    }); 
 
});

body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
ul { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
li { 
 
    list-style: none; 
 
} 
 

 
a { 
 
    text-decoration: none; 
 
    border: 1px solid #f9f9f9; 
 
    color: white; 
 
    padding: 5px 10px; 
 
    transition: box-shadow 0.3s; 
 
} 
 

 
a:hover { 
 
    box-shadow: 0 3px 10px white 
 
} 
 

 
.main-wrapper { 
 
    position: relative; 
 
    width: 100vw; 
 
    height: 100vh; 
 
} 
 

 
.landing-page { 
 
    position: relative; 
 
    width: 100%; 
 
    height: 100%; 
 
    background: #666; 
 
    z-index: 0; 
 
} 
 

 
.landing-page-buttons { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
} 
 

 
.landing-page-buttons ul li { 
 
    float: left; 
 
    margin-left: 10px; 
 
} 
 

 
.landing-page-buttons ul li:first-child { 
 
    margin-left: 0px; 
 
} 
 

 
.login-page { 
 
    position: absolute; 
 
    top: -100vh; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    background: #333; 
 
    transition: all 1s; 
 
    z-index: 5; 
 
} 
 

 
.login-page.open { 
 
    top: 0px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="main-wrapper"> 
 
    <div class="landing-page"> 
 
    <div class="landing-page-buttons"> 
 
     <ul> 
 
     <li><a class="first-login" href="#">Login</a></li> 
 
     <li><a class="second-login" href="#">Also Login</a></li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
    
 
    <div class="login-page first"> 
 
    <h3>First Login Page</h3> 
 
    <a href="#" class="close">close</a> 
 
    <ul class="login-form"> 
 
     <li>Username: <input type="text"></li> 
 
     <li>Password: <input type="text"></li> 
 
    </ul> 
 
    </div> 
 
    
 
    <div class="login-page second"> 
 
    <h3>Second Login Page</h3> 
 
    <a href="#" class="close">close</a> 
 
    <ul class="login-form"> 
 
     <li>Username: <input type="text"></li> 
 
     <li>Password: <input type="text"></li> 
 
    </ul> 
 
    </div> 
 
</div>

Quelle

2017-02-06 16:11:07 zsawaf

Warum zeigt es diesen Bereich an, wenn ich auf die Seite zugreife? http://i.imgur.com/s5cWglD.png –

@EminEryilmaz Sie meinen die vertikale Bildlaufleiste? – zsawaf

Ja @zsawaf es wird nicht mein Hintergrund angezeigt, es zeigt stattdessen diesen grauen Hintergrund. –

body { background: #0f0f0f; } 
 
header { 
 
    position: relative; 
 
    height: 800px; 
 
    min-height: 500px; 
 
    width: 100%; 
 
    background: #161415 url(http://i.imgur.com/GOX7opa.gif) top center; 
 
    background-size: cover !important; 
 
    -webkit-background-size: cover !important; 
 
    text-align: center; 
 
    overflow: hidden; 
 
} 
 

 
header:before { 
 
    content: ''; 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
    height: 100%; 
 
} 
 
header .banner { 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
    margin: 0 auto; 
 
    width: 85%; 
 
    padding-bottom: 30px;s 
 
    text-align: center; 
 
} 
 

 
header .banner-text { width: 100%; } 
 
header .banner-text h1 { 
 
    font: 90px/1.1em 'opensans-bold', sans-serif; 
 
    color: #fff; 
 
    letter-spacing: -2px; 
 
    margin: 0 auto 18px auto; 
 
    text-shadow: 0px 1px 3px rgba(0, 0, 0, .8); 
 
} 
 

 
.jucator 
 
{ 
 
display: inline-block; 
 
padding: 0px; 
 
-webkit-transition: background 2s; 
 
    transition: background 2s; 
 
} 
 

 
.jucator:hover{ 
 
    background: blue; 
 
} 
 

 
.observator{ 
 
    display:inline-block; 
 
    padding: 0px; 
 
    -webkit-transition: background 2s; 
 
    transition: background 2s; 
 
} 
 

 
.observator:hover{ 
 
    background: green; 
 
} 
 

 
.logo 
 
{padding-left:181px; 
 
padding-bottom:25px; 
 
} 
 

 
.text{ 
 
    padding-bottom:50px; 
 
    padding-left:200px; 
 
    font-size: 200%; 
 
    
 
}

</body> 
 

 
</html> 
 

 

 
<body> 
 

 
    <!-- Header 
 
    ================================================== --> 
 
    <header id="home"> 
 
     <div class="row banner"> 
 
     <div class="banner-text"> 
 
     <div class="stop"> 
 
     <div class="logo"> <img src="http://i.imgur.com/R6bUhGI.png" width="500" height="500" ></img></div> 
 
       <div class="text">Alege ce ești.</div> 
 
      <center> 
 
      <div class="jucator"><a href="https://google.com"> <img src="http://i.imgur.com/SMHDIim.png"> </a></div> 
 
     <div class="observator"> 
 
     <a href="https://google.com"> <img src="http://i.imgur.com/PAGOmxn.png"></a> 
 
     </div> 
 
     
 
      </center> 
 
      
 
     
 
     
 

 

 
     </div> 
 
     </div> 
 

 

 

 
    </header> <!-- Header End -->

Sie so etwas wie diese Übergänge mit der Verwendung von CSS versuchen könnte: schweben auf jeder Taste. Dies wäre geeignet, wenn Sie jQuery nicht verwenden möchten.

Quelle

2017-02-06 16:16:57

Vielen Dank!Aber jemand hat etwas Konventielles gemacht! –

@EminEryilmaz kein Problem, hat das für Sie funktioniert? –

ja, es war hilfreich! :) Jemand kam mit besseren Grafiken. –

Making HTML-Bilder, in CSS als Übergänge glühen

Antwort

Verwandte Themen