Question

当用户将鼠标悬停在按钮上时，我试图滑出时遇到问题。我的代码如下所示：

/**
     * CSS3 balancing hover effect
     * Read the tutorial here: http://webbb.be/blog/little-css3-3d-hover-effects/
     */

body {
  background: #f06;
  background: linear-gradient(45deg, #f06, yellow);
  min-height: 100%;
}

.block {
  width: 150px;
  color: #fff;
  margin: 30px auto;
  text-transform: uppercase;
  text-align: center;
  font-family: Helvetica;
  position: relative;
  perspective: 350;
}

.block .normal {
  background: gray;
  padding: 15px;
  cursor: pointer;
  position: relative;
  z-index: 2;
}

.block .hover {
  margin-top: -48px;
}

.block .hover {
  background: #00aced;
  left: 150px;
  padding: 15px;
  display: none;
  color: #fff;
  text-decoration: none;
  position: relative;
  z-index: 1;
  transition: all 250ms ease;
}

.block:hover .normal {
  background: #0084b4;
}

.block:hover .hover {
  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 {
  0% {
    margin-top: -48px;
  }
  15% {
    margin-top: -48px;
    transform: rotateY(-50deg);
  }
  30% {
    margin-top: -48px;
    transform: rotateY(50deg);
  }
  45% {
    margin-top: -48px;
    transform: rotateY(-30deg);
  }
  60% {
    margin-top: -48px;
    transform: rotateY(30deg);
  }
  75% {
    margin-top: -48px;
    transform: rotateY(-30deg);
  }
  100% {
    margin-top: -48px;
    transform: rotateY(0deg);
  }
}

<div class="block">
  <div class="normal">
    <span>Follow me...</span>
  </div>
  <a target="_BLANK" class="hover" href="http://twitter.com/benoitboucart" title="My twitter profile">
    on Twitter
  </a>
</div>

我可以知道我该怎么办才能让它在左侧滑动而不会摇晃？我尝试了很多方法，例如转换：0.5s ease 0s;和许多其他，但它不起作用。我可以知道我该怎么做才能让它滑出左侧滑道？

Answer 1

检查出来。我通过评论来解释代码是css。

/**
 * CSS3 balancing hover effect
 * Read the tutorial here: http://webbb.be/blog/little-css3-3d-hover-effects/
 */

body {
  background: #f06;
  background: linear-gradient(45deg, #f06, yellow);
  min-height: 100%;
}

.block {
  width: 150px;
  color: #fff;
  margin: 30px auto;
  text-transform: uppercase;
  text-align: center;
  font-family: Helvetica;
  position: relative;
  perspective: 350;
}

.block .normal {
  background: gray;
  padding: 15px;
  cursor: pointer;
  position: relative;
  z-index: 2;
}

.block .hover {
  background: #00aced;
  padding: 15px;
  display: block;
  color: #fff;
  text-decoration: none;
  position: absolute;
  right: 0px;/*add this to make it position absolutely right to the parent so that it can slide out to left.*/
  top: 0;/*add this to make it position absolutely top to the parent*/
  z-index: 1;
  transition: all 250ms ease;
}

.block:hover .normal {
  background: #0084b4;
}

.block:hover .hover {
  margin-right: 0;
  right: 150px;/*add this to make it slide to left on hover*/
  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 {
  0% {
    margin-top: 0;
  }
  15% {
    margin-top: 0;
    transform: rotateX(-50deg);
  }
  30% {
    margin-top: 0;
    transform: rotateX(50deg);
  }
  45% {
    margin-top: 0;
    transform: rotateX(-30deg);
  }
  60% {
    margin-top: 0;
    transform: rotateX(30deg);
  }
  75% {
    margin-top: 0;
    transform: rotateX(-30deg);
  }
  100% {
    margin-top: 0;
    transform: rotateX(0deg);
  }
}

<div class="block">
  <div class="normal">
    <span>Follow me...</span>
  </div>
  <a target="_BLANK" class="hover" href="http://twitter.com/benoitboucart" title="My twitter profile">
		on Twitter
	</a>
</div>

Answer 2

只需从.block:hover .hover部分删除动画，然后将其滑出即可。但是，您可能需要给它一个固定的宽度。

.block .hover {
  background: #00aced;
  padding: 15px;
  display: block;
  color: #fff;
  text-decoration: none;
  position: absolute;
  width: 110px; /* to wrap the words, you can change it according to your design*/
  right: 0px;/*add this to make it position absolutely right to the parent so that it can slide out to left.*/
  top: 0;/*add this to make it position absolutely top to the parent*/
  z-index: 1;
  transition: all 250ms ease;
}
.block:hover .hover {
      margin-right: 0;
      right: 150px;/*add this to make it slide to left on hover*/
      transform-origin: top;
    }

当用户将鼠标悬停在按钮

2 个答案: