CSS3动画幻灯片Div

时间：2016-12-31 10:07:49

标签： html css3 css-animations

我正在创建一个html文件，其基本结构如下：

    <!DOCTYPE html>
    <html>
    <head>
    </head>
    <body>
        <div id="main">
            <h1>Title</h1>
            <div id="div1"></div>
            <div id="div2"></div>
            <div id="div2"></div>
        </div>
    </body>
    </html>

目前，#div1和#div3的css3设置为{visibility: hidden}。
在用户输入中，我希望#div1从左侧滑入并将#div2推出窗口，#div3分别从右侧滑入。

这是一张展示它的图片： enter image description here 我基本上希望它看起来像黑盒子（浏览器窗口）移动到div。因此#div1必须从左侧滑入，#div2必须以相同的时间/速度向右滑动。

我尝试用css3做这个，但我失败了。 这是我的css方法：

    #div1 {
        position: fixed;
        z-index: 3;
        visibility: hidden;
        transform: translateX(-100%);
    }

    .slide-left {
        visibility: visible;
        animation: slide-in 0.5s forwards;
    }

    @keyframes slide-in {
        transform: translateX(0%);
    }

任何人都可以帮助我吗？非常感谢！ 谢谢你，祝你新年快乐， Narusan

编辑：感谢kittyCat，我已经知道我的html文件如下所示：

    <!DOCTYPE html>
    <html>
    <!-- Thanks to kittyCat at stackoverflow.com for helping me with this website.-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>TITLE</title>
        <meta name="Title" content="Main">
    </head>
    <body>
        <style>
            .row{
              border:1px solid black;
              height:100px;
              margin:0;
              width:100px;
              padding:0;
              display:block;
              position:relative;
              overflow:hidden;
            }
            .container{
              height:100px;
              margin:0;
              width:300px;
              padding:0;
              display:block;
              position:absolute;
              left:-100px;
              top:0;
              -webkit-transition:left 0.5s ease-in-out;
              -moz-transition: left 0.5s ease-in-out;
              transition: left 0.5s ease-in-out;
            }
            .ins{
              width:100px;
              float:left;
              height:100px;
              margin:0;
              padding:0;
              background-color:red;
            }
            .div1 {
                background-color: red;
            }
            .div2{
              background-color:green;
            }
            .div3{
              background-color:blue;
            }
        </style>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <script>
            $(".next").click(function(){
              var current = $(".container").css("left");
              if(current == "-100px"){
                current="-200px";
              }
              else if(current == "0px"){
                current="-100px";
              }
              $(".container").css("left",current);
            });
            $(".prev").click(function(){
              var current = $(".container").css("left");
              if(current == "-100px"){
                current="0px";
              }
              else if(current == "-200px"){
                current="-100px";
              }
              $(".container").css("left",current);});
        </script>
        <div class="row">
          <div class="container">
            <div class="ins div1">div-1</div>
            <div class="ins div2">div-2</div>
            <div class="ins div3">div-3</div>
          </div>
        </div>
        <button class="prev">prev</button>
        <button class="next">next</button>
    </body>
</html>

向KittyCat致敬，感谢他/她提供的所有帮助。如果您有相同的问题并且这已经为您解决了，请提供以下答案！

1 个答案:

答案 0 :(得分：1)

这是一个jquery解决方案（因为你在评论中对jquery解决方案说“是”）

＆＃13;
＆＃13; 
$(".next").click(function(){
  var current = $(".container").css("left");
  if(current == "-100px"){
    current="-200px";
  }
  else if(current == "0px"){
    current="-100px";
  }
  $(".container").css("left",current);
});
$(".prev").click(function(){
  var current = $(".container").css("left");
  if(current == "-100px"){
    current="0px";
  }
  else if(current == "-200px"){
    current="-100px";
  }
  $(".container").css("left",current);});
＆＃13; 
.row{
  border:1px solid black;
  height:100px;
  margin:0;
  width:100px;
  padding:0;
  display:block;
  position:relative;
  overflow:hidden;
}
.container{
  height:100px;
  margin:0;
  width:300px;
  padding:0;
  display:block;
  position:absolute;
  left:-100px;
  top:0;
  -webkit-transition:left 0.5s ease-in-out;
  -moz-transition: left 0.5s ease-in-out;
  transition: left 0.5s ease-in-out;
}
.ins{
  width:100px;
  float:left;
  height:100px;
  margin:0;
  padding:0;
  background-color:red;
}
.div2{
  background-color:green;
}
.div3{
  background-color:blue;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <div class="container">
    <div class="ins div1">div-1</div>
    <div class="ins div2">div-2</div>
    <div class="ins div3">div-3</div>
  </div>
</div>
<button class="prev">prev</button>
<button class="next">next</button>
＆＃13;
＆＃13;
＆＃13;

编辑：更新后的问题

首先，您要在<style>....</style>中添加body。您应该将其添加到head。

第二个问题是您在html内容之前添加了<script>..</script>。所有脚本应该在你的身体的最后一个。在结束body标记之前，即</body>

第二个问题的另一个解决方案是将您的javascript代码包装在$(document).ready(function(){ Insert the code here });中。我已经在下面的代码片段中完成了这个。

＆＃13;
＆＃13; 
<!DOCTYPE html>
<html>
<!-- Thanks to kittyCat at stackoverflow.com for helping me with this website.-->
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>TITLE</title>
    <meta name="Title" content="Main">
    <style>
        .row{
          border:1px solid black;
          height:100px;
          margin:0;
          width:100px;
          padding:0;
          display:block;
          position:relative;
          overflow:hidden;
        }
        .container{
          height:100px;
          margin:0;
          width:300px;
          padding:0;
          display:block;
          position:absolute;
          left:-100px;
          top:0;
          -webkit-transition:left 0.5s ease-in-out;
          -moz-transition: left 0.5s ease-in-out;
          transition: left 0.5s ease-in-out;
        }
        .ins{
          width:100px;
          float:left;
          height:100px;
          margin:0;
          padding:0;
          background-color:red;
        }
        .div1 {
            background-color: red;
        }
        .div2{
          background-color:green;
        }
        .div3{
          background-color:blue;
        }
    </style>
</head>
<body>

    <div class="row">
      <div class="container">
        <div class="ins div1">div-1</div>
        <div class="ins div2">div-2</div>
        <div class="ins div3">div-3</div>
      </div>
    </div>
    <button class="prev">prev</button>
    <button class="next">next</button>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script>
      $(document).ready(function(){
        $(".next").click(function(){
          var current = $(".container").css("left");
          if(current == "-100px"){
            current="-200px";
          }
          else if(current == "0px"){
            current="-100px";
          }
          $(".container").css("left",current);
        });
        $(".prev").click(function(){
          var current = $(".container").css("left");
          if(current == "-100px"){
            current="0px";
          }
          else if(current == "-200px"){
            current="-100px";
          }
          $(".container").css("left",current);});
      });
    </script>
</body>
</html>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题