制作 HTML 图像，在 CSS 中作为过渡发光答案

【问题标题】：Making HTML images, to glow in CSS as transitions制作 HTML 图像，在 CSS 中作为过渡发光
【发布时间】：2017-02-07 01:55:35
【问题描述】：

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

演示：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%;

}

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

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

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

我该怎么做？

谢谢

【问题讨论】：

标签： jquery html css css-transitions

【解决方案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>

【讨论】：

为什么我访问页面时会显示这个区域？ i.imgur.com/s5cWglD.png
@EminEryilmaz 你的意思是垂直滚动条？
是的@zsawaf 它不会显示我的背景，而是显示灰色背景。
@EminEryilmaz 那是因为我没有使用你的代码。我很快就废弃了我自己的代码，让你知道如何自己实现这样的东西。
知道了，谢谢。如何在按钮上应用大小？我想让它们看起来增加，

【解决方案2】：

  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 转换和 :hover 在每个按钮上的类似操作。如果您不想使用 jquery，这将是合适的。

【讨论】：

谢谢！但是有人做了一些召集的事情！
是的，很有帮助！ :) 有人提供了更好的图形。
很高兴我能帮上忙！