Question

嗨，当用户将鼠标悬停在按钮上时，我在尝试将动画放在按钮的左侧时遇到问题。其中一个例子解释如下：

HTML：

<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>

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; margin-top:-48px; padding: 15px; display: block; 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; 
    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);} 
}

https://jsfiddle.net/9dwk8vzg/

原始链接：http://dabblet.com/gist/5559193

但是对于这个例子位于按钮左侧的底部，我尝试使用margin-right和padding-left仍然无法让鼠标超过上诉div标签位于右侧，我可以知道我想错过什么来让div标签在右侧上诉/

Answer 1

/**
 * 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 {
	width: 100%;
	background: gray; padding: 15px; cursor: pointer;
	position:relative; z-index:2;
}
.block .hover {
	width: 100%;
	background: #00aced;
	padding: 15px; 
	display: block;
	position:absolute;
	color: #fff;
	text-decoration: none;
	z-index:1;
	transition: all 250ms ease;
	right: -30px;
	top: 0;
}
.block:hover .normal {
	background: #0084b4;
}
.block:hover .hover {
	right: 100%;
	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 { 
	15% { width: 95%; }	
	30% { width: 105%; } 
	45% { width: 97%; } 
	60% { width: 103%; } 
	75% { width: 97%; } 
	100% { width: 100%; } 
}

<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>

将鼠标悬停在按钮上，另一个div或HTML标记将显示在按钮的左侧

1 个答案: