Создание HTML-изображений, чтобы светиться в CSS как переходы

Я создал простую систему входа. Но я не знаю, как сделать это переходом.Создание HTML-изображений, чтобы светиться в CSS как переходы

Демо: 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/

Я хочу сделать Jucator и Observator изображения в качестве переходов (Когда курсор переходит на Jucator , он покажет свет u NDER изображения, и когда идет в Observator он будет показывать другой цвет)

И когда я нажимаю на него, я хочу, чтобы привести входа в раздел, как переход (медленно)

Как я могу сделать это?

Спасибо

источник

2017-02-06 Anonymous

Я сделал основной макет для вас.

Для кнопок я просто добавил переход с тенью на тень при наведении указателя мыши.

Для страницы входа я просто перешел от вершины, когда вы нажимаете на любую из кнопок (вы можете играть с ней или иметь свой собственный переход).

Довольно просто, дайте мне знать, если у вас есть вопросы.

$(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>

источник

2017-02-06 16:11:07 zsawaf

Почему это показывает эту область, когда я присоединяюсь к странице? http://i.imgur.com/s5cWglD.png –

@EminEryilmaz Вы имеете в виду вертикальную полосу прокрутки? – zsawaf

Да @zsawaf он не покажет мой фон, он показывает, что серый фон вместо этого. –

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 -->

Вы могли бы попробовать что-то вроде этого, используя CSS переходы с: зависать на каждой кнопке. Это было бы удобно, если вы не хотите использовать jquery.

источник

2017-02-06 16:16:57

Спасибо!Но кто-то сделал что-то удобное! –

@EminEryilmaz не проблема, это работа для вас? –

Да, это было полезно! :) Кто-то пришел с лучшей графикой. –

Создание HTML-изображений, чтобы светиться в CSS как переходы

ответ

Смежные вопросы