试图制作我在 CSS 中完成但失败的代码的动画幻灯片

Posted 2023-03-06

【中文标题】试图制作我在 CSS 中完成但失败的代码的动画幻灯片

【英文标题】：Trying to make a slide in out animation of my codes that I have done in CSS but failed

【发布时间】：2018-09-17 02:36:39

【问题描述】：

我正在尝试制作一个动画，其中用户将光标拖到按钮上，它滑出，当用户拖出按钮时，它滑入。我在下面的另一个链接上制作了另一个代码，能够但是当我尝试使用我的包装器ID时，我试图在链接“完全由我：”上对我的完整代码执行此操作，但它不起作用。我可以知道当用户鼠标悬停时我应该怎么做才能让它滑出和滑入？谢谢。

完全由我：https://jsfiddle.net/bftjvsex/73/

html：

<div id="wrapper">
  <div class="main-item menu">
    <span class="line line01"></span>
    <span class="line line02"></span>
    <span class="line line03"></span>
  </div>
</div>
<div class="box">

</div>

CSS：

* 
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;


#wrapper 
  /*border-style: solid;
  border-color: white;*/
  position: fixed;
  margin-top: 20px;
  background: #648B79;
  display: inline-block;
  /*border-radius:500px;*/
  /*margin:10px;*/
  /*margin-left: 5px;*/
  position: fixed;
  padding: 10px 15px 10px 10px;
  cursor: pointer;
  z-index: 10000;
  font-size: 1em;
  transition: all 0.2s ease-in-out;
  opacity: 0.8;


.box  margin-top:-48px;
.box
  background: #648B79;
   width: 35px;
  height: 35px; 
  display: none;
   text-decoration: none;
   color: #fff; text-decoration: none;
   position: relative; z-index:1;




@media only screen and (max-width: 600px) 
  #wrapper 
    background: #29afd1;
    display: inline-block;
    border-radius: 250px;
    margin: 5px;
    position: relative;
    padding: 40px;
    cursor: pointer;
  


.main-item 
  width: 35px;
  height: 35px;
  position: relative;


.line 
  position: absolute;
  height: 5px;
  width: 100%;
  background: white;
  border-radius: 3px;
  transition: all cubic-bezier(0.25, 0.1, 0.28, 1.54) 0.32s;


.line01 
  top: 9%;


.line02 
  top: 39%;


.line03 
  top: 69%;


.menu.close .line01 
  transform: rotate(45deg);
  top: 49%;


.menu.close .line02,
.menu.close .line03 
  transform: rotate(-45deg);
  top: 49%;


.main:hover .box 
    margin-right: 0;
  display:block;
    transform-origin: top;
    /*
    animation-name: balance;
    animation-duration: 1.5s;
    animation-timing-function: ease-in-out;
    animation-delay: 110ms;
    animation-iteration-count: 1;
    animation-direction: alternate;
    */
    animation: balance 1.5s ease-in-out 110ms 1 alternate;


@keyframes balance  
    from left: 0px;
    to right: 48px;


.fa-facebook-square 
  margin-top: 250px;
  font-size: 70px;
  width: 6%;
  padding: 11px;
  background: #648B79;
  border-color: white;
  color: white;
  position: fixed;
  text-align: center;
  transition: all 200ms linear;
  white-space: nowrap;
  overflow: hidden;


i.fa-github:hover,
i.fa-facebook-square:hover 
  color: white;
  padding: 11px;
  width: 7%;
  text-align: center;
  transition-property: color;
  transition-delay: 1s;
  transition: all 200ms linear;


.fa-github 
  margin-top: 290px;
  font-size: 36px;
  padding: 11px;
  width: 6%;
  background: #648B79;
  border-color: white;
  color: white;
  position: fixed;
  text-align: center;

由我编辑：https://jsfiddle.net/9dwk8vzg/84/

【问题讨论】：

谁有这个问题的正确答案？

【参考方案1】：

将position 添加到您的.main div

.main 
  position: relative;

还有一些默认的left position 到你的.box div

.box 
  left:150px; 

$("#wrapper").click(function() 
  $(".menu").toggleClass("close");
);

$(document).ready(function() 
  $('#sidebarCollapse').on('click', function() 
    $('#sidebar').toggleClass('active');
  );
);

* 
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;


#wrapper 
  /*border-style: solid;
  border-color: white;*/
  position: fixed;
  margin-top: 20px;
  background: #648B79;
  display: inline-block;
  /*border-radius:500px;*/
  /*margin:10px;*/
  /*margin-left: 5px;*/
  position: fixed;
  padding: 10px 15px 10px 10px;
  cursor: pointer;
  z-index: 10000;
  font-size: 1em;
  transition: all 0.2s ease-in-out;
  opacity: 0.8;

.main 
  position: relative;

.box  margin-top:-48px;
.box
  background: #648B79;
   width: 35px;
  height: 35px; 
  left:150px; 
  display: none;
   text-decoration: none;
   color: #fff; text-decoration: none;
   position: relative; z-index:1;
   transition: all 250ms ease;




@media only screen and (max-width: 600px) 
  #wrapper 
    background: #29afd1;
    display: inline-block;
    border-radius: 250px;
    margin: 5px;
    position: relative;
    padding: 40px;
    cursor: pointer;
  


.main-item 
  width: 35px;
  height: 35px;
  position: relative;


.line 
  position: absolute;
  height: 5px;
  width: 100%;
  background: white;
  border-radius: 3px;
  transition: all cubic-bezier(0.25, 0.1, 0.28, 1.54) 0.32s;


.line01 
  top: 9%;


.line02 
  top: 39%;


.line03 
  top: 69%;


.menu.close .line01 
  transform: rotate(45deg);
  top: 49%;


.menu.close .line02,
.menu.close .line03 
  transform: rotate(-45deg);
  top: 49%;


.main:hover .box 
	margin-right: 0;
  display:block;
	transform-origin: top;
	/*
	animation-name: balance;
	animation-duration: 1.5s;
	animation-timing-function: ease-in-out;
	animation-delay: 110ms;
	animation-iteration-count: 1;
	animation-direction: alternate;
	*/
	animation: balance 1.5s ease-in-out 110ms 1 alternate;


@keyframes balance  
	from left: 0px;
    to right: 48px;


.fa-facebook-square 
  margin-top: 250px;
  font-size: 70px;
  width: 6%;
  padding: 11px;
  background: #648B79;
  border-color: white;
  color: white;
  position: fixed;
  text-align: center;
  transition: all 200ms linear;
  white-space: nowrap;
  overflow: hidden;


i.fa-github:hover,
i.fa-facebook-square:hover 
  color: white;
  padding: 11px;
  width: 7%;
  text-align: center;
  transition-property: color;
  transition-delay: 1s;
  transition: all 200ms linear;


.fa-github 
  margin-top: 290px;
  font-size: 36px;
  padding: 11px;
  width: 6%;
  background: #648B79;
  border-color: white;
  color: white;
  position: fixed;
  text-align: center;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<a id="toggle-btn" href="#" class="menu-btn">
  <div class="main">

    <div id="wrapper">
      <div class="main-item menu">
        <span class="line line01"></span>
        <span class="line line02"></span>
        <span class="line line03"></span>
      </div>
    </div>
    <div class="box">
     
    </div>
    
 </div>
</a>

  

<i class="fa fa-facebook-square" style="font-size:30px"></i>
<i class="fa fa-github" style="font-size:30px"></i>

【讨论】：

您好，很抱歉，这不是我真正想要的，您能否参考这个问题。如果在理解我的问题时有任何问题，请在下面的 cmets 中下拉。谢谢

您希望.box div 在将鼠标悬停在#wrapper div 右侧或其他任何位置时滑入和滑出？？