个人中心
gpt4 book ai didi

jquery - 制作 HTML 图像，在 CSS 中作为过渡发光

转载 作者：太空宇宙 更新时间：2023-11-04 09:12:00 25 4
gpt4 key购买 nike

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

演示: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 上时它会显示另一种颜色)

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

我该怎么做？

谢谢

最佳答案

我为您做了一个基本布局。

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

对于登录页面，当你点击任何按钮时，我只是让它从顶部过渡(你可以玩弄它，或者有自己的过渡)。

非常简单，如果您有任何问题，请告诉我。 

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

关于jquery - 制作 HTML 图像，在 CSS 中作为过渡发光，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42071444/

25 4 0
文章推荐： javascript - 切换按钮可见性
文章推荐： java - ListView 选择模型的 validator ？
文章推荐： java - EXE4J Jar 到 exe 与 jre 集成导致运行时错误
文章推荐： javascript - 下拉菜单没有关闭？
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com