个人中心
gpt4 book ai didi

jquery - CSS/jquery 将居中的 div 从居中位置移动到窗口的左上角

转载 作者：行者123 更新时间：2023-11-28 02:35:37 25 4
gpt4 key购买 nike

我希望有人能帮助解决这个问题!

我在一个以页面为中心的 div 中有一个 Logo ，它被分成 2 个不同的图像，因此我可以让它们从不同的方向进行动画处理并叠加起来，看起来像一个完整的 Logo :工作完成。

然后我有一个按钮，当点击它时，它自己以及 2 个图像和 Logo 标题图像消失，并用单个 Logo 图像替换它。这很好用，并且仍然位于页面的中心。

我要做的是为从页面中心到页面左上角的单个 Logo 图像制作动画。动画与图像本身配合得很好，只是不适用于 div，所以它看起来很乱。我试过弄乱 jquery，但似乎不太明白!任何人都可以对此有所了解吗？我这里有一个基准示例:http://endframe.saturn-global.com/

非常感谢任何建议!

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<link rel="stylesheet" href="assets/estyle.css">
</head>
<body>
<div class="container-fluid">

  <div class="logo">
    <div class="logocontainer">
      <img class="logoE" src="img/logoE.png" alt="Logo Letter E">
      <img class="logoF" src="img/logoF.png" alt="Logo Letter F">
      <img class="thelogo" src="img/thelogo.png" alt="Endframe Logo">
    </div>
    <div class="logotitle">
    <img src="img/logotitle.png" alt="Logo Title">
    </div>
    <div class="beginbutton">
    <button class="btn beginbtn">Let's Begin!</button>
    </div>
  </div>
 <div class="content" style="opacity:0;color:#000;margin-top:200px;padding:20px;">
 some content
</div> 

</div>

<script src="assets/ejs.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

<script>
$('.beginbutton').click(function() {
    $("body").css("background","#ffffff");
    $(".beginbtn").css("opacity","0");
    $(".logoE").css("opacity","0");
    $(".logoF").css("opacity","0");
    $(".logotitle").css("opacity","0");
    $(".content").css("opacity","1");   
    $(".thelogo").css(
    {
    "opacity" : "1",
    "left" : "0",
    "margin" : "0 auto",
    }   
    );
    $(".logo").css(
    {
    "top" : "0",
    "left" : "0",
    "bottom" : "auto",
    "right" : "auto",
    "text-align:" : "left",
    "margin" : "0 auto",
    });
})
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script></body>
</html>

CSS:

body {
    background: #000;
    color:#fff;
    transition: .6s ease-in-out;
    -webkit-transition: .6s ease-in-out;
    -moz-transition: .6s ease-in-out;
}

.logo {
    position:fixed;
    margin:auto;
    top:0;
    left:0;
    right:0;
    bottom:0;
    width:300px;
    height:300px;
    text-align:center;
    transition: 3s ease-in-out;
    -webkit-transition: 3s ease-in-out;
    -moz-transition: 3s ease-in-out;
}

.logocontainer {
    width:100px;
    margin:auto;
    text-align:center;
}

.logocontainer img {
    width:100px;
    height:auto;
    display:block;
    margin:auto;
}

img.logoE {
    position:absolute;
    z-index:1;
    left:50%;
    margin-left:-50px;
    animation:logoEanim 4s;
    -webkit-animation:logoEanim 4s;
    -moz-animation:logoEanim 4s;
}

img.logoF {
    position:absolute;
    z-index:2;
    left:50%;
    margin-left:-50px;
    padding-top:1.8em;
    padding-left:1.8em;
    animation:logoFanim 4s;
    -webkit-animation:logoFanim 4s;
    -moz-animation:logoFanim 4s;
}

img.thelogo {
    position:absolute;
    z-index:3;
    left:50%;
    margin-left:-50px;
    opacity: 0;
    transition: 3s ease-in-out;
    -webkit-transition: 3s ease-in-out;
    -moz-transition: 3s ease-in-out;
}

@keyframes logoEanim {
    from {left:-100%;opacity:0;}
    to {left:50%;opacity:1;}
}

@-webkit-keyframes logoEanim {
    from {left:-100%;opacity:0;}
    to {left:50%;opacity:1;}
}

@keyframes logoFanim {
    from {left:200%;opacity:0;}
    to {left:50%;opacity:1;}
}

@-webkit-keyframes logoFanim {
    from {left:200%;opacity:0;}
    to {left:50%;opacity:1;}
}

.logotitle {
    margin-top:100px;
    animation: etitle 5s ease-in-out;
    -webkit-animation: etitle 5s ease-in-out;
    -moz-animation: etitle 5s ease-in-out;
    transition: .3s ease-in-out;
    -webkit-transition: .3s ease-in-out;
    -moz-transition: .3s ease-in-out;
}

.logotitle img {
    width:280px;
    height:50px;
    padding:10px 10px;
}

@-webkit-keyframes etitle {
    0% {opacity:0;}
    55% {opacity:0;}
    100% {opacity:1;}
}

@keyframes etitle {
    0% {opacity:0;}
    55% {opacity:0;}
    100% {opacity:1;}
}

.beginbtn {
    position:relative;
    font-weight:bold;
    font-size:1.8em;
    padding:3px 10px;
    border:2px solid #000;
    border-radius:10px;
    transition: .3s ease-in-out;
    -webkit-transition: .3s ease-in-out;
    -moz-transition: .3s ease-in-out;
    box-shadow: -2px 2px rgba(153,206,255,1);
}

.beginbutton {
    animation: beginanim 6s ease-in-out;
    -webkit-animation: beginanim 6s ease-in-out;
    -moz-animation: beginanim 6s ease-in-out;
}

.beginbtn:hover {
    cursor:pointer;
}

@-webkit-keyframes beginanim {
    0% {opacity:0;}
    60% {opacity:0;}
    100% {opacity:1;}
}

@keyframes beginanim {
    0% {opacity:0;}
    60% {opacity:0;}
    100% {opacity:1;}
}

.beginbtn:hover {
}

.beginbtn:focus {
    box-shadow:none;
}

.beginbtn:active {
}

最佳答案

您遇到的问题是您在 $('.logo').css 中将值从 auto 更改为 0，当您这样做时没有应用任何动画，因为浏览器不知道如何从实际位置到下一个。您应该使用实际数值做一些事情。试试这个:

$(".logo").css(
   {
      "top" : "calc(-100vh + 340px)",
      "left" : "calc(-100vw + 300px)",
      "bottom" : "auto",
      "right" : "auto",
      "text-align:" : "left",
      "margin" : "0 auto",
   }
);

关于jquery - CSS/jquery 将居中的 div 从居中位置移动到窗口的左上角，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47435147/

25 4 0
文章推荐： javascript - 在 gridview 的 Itemtemplate 内的控件上应用悬停样式
文章推荐： javascript - Google Maps JavaScript API3marker.setMap(null) 不隐藏标记
文章推荐： javascript - 当部分 HTML 当前可见时，如何连续执行 Javascript 函数？
文章推荐： jquery - Bootstrap 4 导航栏无法在 IE11 中正确呈现
行者123
个人简介

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

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