Держите края треугольников видимыми, а остальные скрыты

im работает над анимацией, которая, когда мы нависаем над треугольником, перемещается и показывает содержимое, которое ранее было скрыто.Держите края треугольников видимыми, а остальные скрыты

What i´ve done

Он отлично работает, но разве отзывчивый, на моем компьютере его штраф, но когда я изменить размер моего окна треугольники появляются на середине экрана или случайных местах, как я могу означают сохранение позиции для того, чтобы виден только черный треугольник?

Мой код, на всякий случай:

body{ 
 
    height:100%; 
 
    background-color: grey; 
 
} 
 

 
/* AVISO :: Começo da animação trianglo lado esquerdo :: AVISO */ 
 

 
#container { 
 
\t top:35%; 
 
\t margin-left: -19.5%; 
 
\t background-color: transperent; 
 
\t width:355px; 
 
} 
 

 
.pencil-body { 
 
\t background-color: red; 
 
\t display: inline-block; 
 
\t padding: 75px; 
 
\t width: 100px; 
 
} 
 

 
.pencil-tip { 
 
\t width: 0; 
 
\t height: 0; 
 
\t border-top: 75px solid transparent; 
 
\t border-left: 100px solid black; 
 
\t border-bottom: 75px solid transparent; 
 
\t 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 { 
 
\t float:right; 
 
\t margin-left:92.5%; 
 
\t top:35%; 
 
\t width:355px; 
 
} 
 

 
.pencil-body2 { 
 
\t float:right; 
 
\t background-color: red; 
 
\t display: inline-block; 
 
\t padding: 75px; 
 
\t width: 100px; 
 
} 
 

 
.pencil-tip2{ 
 
\t width: 0; 
 
\t height: 0; 
 
\t border-top: 75px solid transparent; 
 
\t border-right: 100px solid black; 
 
\t 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>

источник

2015-06-22 BugaDroid

Вы должны использовать

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>

пример: http://jsbin.com/lihuzoxube/edit?html,css,output

источник

2015-06-22 12:04:49 vgesteljasper

Держите края треугольников видимыми, а остальные скрыты

ответ

Смежные вопросы