Question

我制作了一个简单的登录系统。但我不知道如何将其作为过渡。

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

}

直播：http://vestigedayz.com/nerve/

我想将Jucator和Observator图像作为过渡（当光标在Jucator上时，它将在图像下显示一个光，当到Observator时它将显示另一种颜色）

当我按下它时，我想将登录部分作为转换（慢慢地）

我该怎么做？

谢谢

Answer 1

我为你做了一个基本的布局。

对于按钮，我只是在悬停时添加了一个盒子阴影过渡。

对于登录页面，我只是在你点击任何一个按钮时从顶部过渡（你可以玩它，或者有你自己的过渡）。

非常简单，如果您有疑问，请告诉我。

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

Answer 2

＆＃13;

  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%;
    
}

＆＃13;

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

＆＃13;

您可以使用css过渡尝试这样的事情：将鼠标悬停在每个按钮上。如果您不想使用jquery，这将适合移动。

制作HTML图像，将CSS作为过渡发光

2 个答案: