Question

我在这里经历了几十个问题，但没有解决我的问题。

基本上我希望拥有与此网站相同的功能：http://madebyheart.co.uk/work/thrively/ - 当您加载页面时，[X]和MENU按钮从顶部滑动，当您单击[X]关闭页面时滑回来......

我试着查看他们的代码，但这让我很头疼。

我认为已经完成了CSS + JS，但我不知道从哪里开始。

Answer 1

animate.css是一个很好的图书馆，应该满足您的需求

<强>样本： https://daneden.github.io/animate.css/

Answer 2

检查一下。

@-webkit-keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, -200%, 0);
    transform: translate3d(0, -200%, 0);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, -200%, 0);
    transform: translate3d(0, -200%, 0);
  }
}

.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}
.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}
.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.site__title.mega {
  text-align: center;
  font-size: 60px;
}
.ji:hover {
	cursor: pointer;
}
.ji {
  padding: 2px 14px;
  border: 1px solid black;
}

<html>
<head>
  	<title>Bootstrap</title>
  	<meta charset="utf-8">
  	<meta name="viewport" content="width=device-width, initial-scale=1">
  	<link rel="stylesheet" type="text/css" href="setest_style.css">
  	<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
 	  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function(){
      $(".ji").click(function(){
        $("#animationSandbox").removeClass("fadeInDown");
        $("#animationSandbox").addClass("fadeInUp");
      });
      });
    </script>
</head>
<body>  
<span id="animationSandbox" style="display: block;" class="fadeInDown animated">
  <h1 class="site__title mega"><span class="ji">X</span></h1>
</span>
</body>
</html>

修改

要使用display:inline-block;实现fadein动画，您必须使用fadein classes in inner divs，如下所示。

@-webkit-keyframes fadeInLeft { from { opacity: 0; -webkit-transform: translate3d(200%, 0, 0); transform: translate3d(200%, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes fadeInLeft { from { opacity: 0; -webkit-transform: translate3d(200%, 0, 0); transform: translate3d(200%, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @-webkit-keyframes fadeInRight { from { opacity: 0; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(200%, 0, 0); transform: translate3d(200%, 0, 0); } } @keyframes fadeInRight { from { opacity: 0; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(-200%, 0, 0); transform: translate3d(-200%, 0, 0); } } .fadeInLeft { -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft; } .fadeInRight { -webkit-animation-name: fadeInRight; animation-name: fadeInRight; } .animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } body { background: #f9f9f9; margin: 0; } a { text-decoration:underline; color:#000; position: relative; } /* ABOUT + CONTACT */ .hlinks { writing-mode: vertical-rl; position: fixed; right: 10%; top: 15px; display: inline; color: #000; font-size: 13px; } .hlinks2 { writing-mode: vertical-rl; position: fixed; right: 10%; top: 100px; display: inline; color: #000; font-size: 13px; }

<span style="display: inline-block;" > <div id="animationSandbox" class="hlinks fadeInLeft animated"> <span> <a href="#" class="ij">ABOUT</a> — <a href="#">CONTACT</a> </span> </div> </span>

打开页面时滑入元素，关闭页面时将其滑出

2 个答案: