主页 / 问题 / 1085537
Accepted
M141
Asked:2020-02-21 15:01:47 +0000 UTC2020-02-21 15:01:47 +0000 UTC

在不同浏览器中显示动画（css+js）的问题

  • 772

跨平台出现问题。最初在yandex浏览器中检查，没有问题，一切都很完美。在opera和mozilla中有这样一个问题：在此处输入图像描述 Animation fly up:s 我估计chrome中也可能有这样的问题，但是我没有查。

通过执行下面的代码（在本站，一切正常，我希望它也能正常显示给你，但以防万一：输入下方的栏从左侧开始到结束填充渐变时）输入文本或仅在单击此输入时）： 在此处输入图像描述

请帮我解决这个问题

.login-form{
  width: 360px;
  background: #f1f1f1;
  height: 180px;
  padding: 80px 40px;
  border-radius: 10px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}

.login-form h1{
  text-align: center;
  margin-bottom: 60px;
}

.txtb{
  border-bottom: 2px solid #adadad;
  position: relative;
  margin: 30px 0;
}

.txtb input{
  font-size: 15px;
  color: #333;
  border: none;
  width: 100%;
  outline: none;
  background: none;
  padding: 0 5px;
  height: 40px;
}

.txtb span::before{
  content: attr(data-placeholder);
  position: absolute;
  top: 50%;
  left: 5px;
  color: #adadad;
  transform: translateY(-50%);
  z-index: -1;
  transition: .5s;
}

.txtb span::after{
  content: '';
  position: absolute;
  width: 0%;
  height: 2px;
  background: linear-gradient(120deg,#3498db,#8e44ad);
  transition: .5s;
}

.focus + span::before{
  top: -5px;
}
.focus + span::after{
  width: 100%;
}
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet"
        href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
        integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7"
        crossorigin="anonymous">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" charset="utf-8"></script>
    </head>
    <body>
        <form action="login.php" method="POST" class="login-form"> 
            <div class="txtb">
                <input type="text" name="login" value="">
                <span class="span1" data-placeholder="Username"></span>
            </div>
        </form> 
        <script type="text/javascript">
        $(".txtb input").on("focus",function(){
            $(this).addClass("focus");
            });

        $(".txtb input").on("blur",function(){
            if($(this).val() == "")
            $(this).removeClass("focus");
            });
        </script>
    </body>
</html>

javascript

1 个回答

  1. Best Answer

    我将::after值添加到left: 0; top: 100%\u200b\u200band它在chrome中变得正常。现在我去检查一下。UPD：Mozilla 和 Yandex 浏览器也一切顺利。手头没有野生动物园:(

    .login-form{
  width: 360px;
  background: #f1f1f1;
  height: 180px;
  padding: 80px 40px;
  border-radius: 10px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}

.login-form h1{
  text-align: center;
  margin-bottom: 60px;
}

.txtb{
  border-bottom: 2px solid #adadad;
  position: relative;
  margin: 30px 0;
}

.txtb input{
  font-size: 15px;
  color: #333;
  border: none;
  width: 100%;
  outline: none;
  background: none;
  padding: 0 5px;
  height: 40px;
}

.txtb span::before{
  content: attr(data-placeholder);
  position: absolute;
  top: 50%;
  left: 5px;
  color: #adadad;
  transform: translateY(-50%);
  z-index: -1;
  transition: .5s;
}

.txtb span::after{
  content: '';
  position: absolute;
  width: 0%;
  height: 2px;
  background: linear-gradient(120deg,#3498db,#8e44ad);
  transition: .5s;
  left:0;
  top:100%;
}

.focus + span::before{
  top: -5px;
}
.focus + span::after{
  width: 100%;
}
    <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet"
        href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
        integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7"
        crossorigin="anonymous">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" charset="utf-8"></script>
    </head>
    <body>
        <form action="login.php" method="POST" class="login-form"> 
            <div class="txtb">
                <input type="text" name="login" value="">
                <span class="span1" data-placeholder="Username"></span>
            </div>
        </form> 
        <script type="text/javascript">
        $(".txtb input").on("focus",function(){
            $(this).addClass("focus");
            });

        $(".txtb input").on("blur",function(){
            if($(this).val() == "")
            $(this).removeClass("focus");
            });
        </script>
    </body>
</html>

    • 1

相关问题