我正在制作动画,当我们将鼠标悬停在三角形上时,三角形会移动并显示之前隐藏的内容。
它工作正常,但没有响应,在我的电脑上很好但是当我调整窗口大小时,三角形出现在屏幕中间或随机位置,我怎么能保持位置,以便只有黑色三角形可见?
我的代码,以防万一:
body{
height:100%;
background-color: grey;
}
/* AVISO :: Começo da animação trianglo lado esquerdo :: AVISO */
#container {
top:35%;
margin-left: -19.5%;
background-color: transperent;
width:355px;
}
.pencil-body {
background-color: red;
display: inline-block;
padding: 75px;
width: 100px;
}
.pencil-tip {
width: 0;
height: 0;
border-top: 75px solid transparent;
border-left: 100px solid black;
border-bottom: 75px solid transparent;
display: inline-block;
}
#container:hover {
transform: translate(200px,0);
-webkit-transform: translate(200px,0); /** Chrome & Safari **/
}
/* AVISO :: Fim da animação trianglo lado esquerdo :: AVISO */
/* AVISO :: Começo da animação trianglo lado direito :: AVISO */
#container2 {
float:right;
margin-left:92.5%;
top:35%;
width:355px;
}
.pencil-body2 {
float:right;
background-color: red;
display: inline-block;
padding: 75px;
width: 100px;
}
.pencil-tip2{
width: 0;
height: 0;
border-top: 75px solid transparent;
border-right: 100px solid black;
border-bottom: 75px solid transparent;
}
#container2:hover {
transform: translate(-200px,0);
-webkit-transform: translate(0px,200); /** Chrome & Safari **/
}
/* AVISO :: Fim da animação trianglo lado direito :: AVISO */
.animation {
position: absolute;
transition: all 2s ease-in-out;
-webkit-transition: all 2s ease-in-out; /** Chrome & Safari **/
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> Teste1 </title>
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body style="overflow: hidden;">
<div id="container" class="animation">
<div class="pencil-body"></div>
<div class="pencil-tip"></div>
</div>
<div id="container2" class="animation">
<div class="pencil-body2"></div>
<div class="pencil-tip2"></div>
</div>
</body>
</body>
</html>
&#13;
答案 0 :(得分:1)
你应该使用
left: -255px;
和
right: -255px;
而不是使用边距。
例如:
#container {
left: -255px;
}
#container2 {
right: -255px;
}
如果可以,你应该使用html5。 这是基本设置
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8>
<title>title</title>
</head>
<body>
...
</body>
</html>