Хороший эффект парения в css3 - PullRequest
Новая
       44

Хороший эффект парения в css3

1 голос
/ 08 февраля 2012

Я пытался сделать некоторые эффекты при наведении, как на странице nvidia (http://www.nvidia.com/object/cool_stuff.html) в css3, результат здесь http://www.html5.ssl2.pl/.Теперь, как вы можете видеть, это не работает хорошо - когда вы наводите один div, все остальные будут двигаться, и также есть проблема с границей (давая больше места)

Код: 

<html>
<head>
<style>
body{
background: #eee;
margin:0;
padding:0;
}

div.nowy{
position:absolute;
width:200px;
height:100px;
background:grey;
border: 0px solid #eee;
-moz-transition: border 0.2s, box-shadow 0.2s;
-webkit-transition: border 0.2s, box-shadow 0.2s;
 box-shadow: 1px 3px 3px black;
}

div.nowy:hover {
border:5px solid white;
box-shadow: 0px 2px 6px black;
}
</style>
</head>

<body>
<div style="width:800px; height:300px; margin-top:50px; margin-left:50px; position:relative">
<div class="nowy" style="left:100px;"></div>
<div class="nowy" style="left:350px;"></div>
<div class="nowy" style="left:600px;"></div>
</div>
</body>

Есть идеи, как это исправить?Спасибо за помощь.

Ответы [ 4 ]

4 голосов
/ 08 февраля 2012

Попробуйте это - http://jsfiddle.net/t2UCW/2/

body{
    background: #eee;
    margin:0;
    padding:0;
    position: relative;
}

div.nowy{
    position: absolute;
    margin-left:10px;
    float:left;
    width:200px;
    height:100px;
    background:grey;
    border: 0px solid grey;
    -moz-transition: border 0.5s, box-shadow 0.5s, top 0.5s, left 0.5s;
    -webkit-transition: border 0.5s, box-shadow 0.5s, top 0.5s, left 0.5s;
     box-shadow: 1px 3px 3px black;
}

div.nowy:hover {
    border:5px solid white;
    box-shadow: 0px 2px 6px black;
}

.d1, .d2, .d3 { top: 20px; }
.d1 { left: 50px; }
.d2 { left: 300px; }
.d3 { left: 550px; }

.d1:hover, .d2:hover, .d3:hover { top: 15px; }
.d1:hover { left: 45px; }
.d2:hover { left: 295px; }
.d3:hover { left: 545px; }
1 голос
/ 08 февраля 2012

Вот попытка без использования абсолютного позиционирования: jsfiddle

Не совсем верно ...

1 голос
/ 08 февраля 2012

Вам нужно будет установить их позиции на относительно , но вам также нужно будет анимировать позицию одновременно с анимацией границы.

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

Причина, по которой они выходятлинии, потому что они на самом деле становятся больше и становятся дальше от того места, где они были изначально.

Попробуйте добавить: 

position: relative; 
right: 5px;
left: 5px;

в класс div.nowy:hover, или где бы вы ни делалианимация для границы.

1 голос
/ 08 февраля 2012

Попробуйте установить их позиции как абсолютные, а не относительные.

Хотя страница nvidia, на которую вы ссылаетесь, делает это во флэш-памяти, вы все равно сможете достичь того, что делаете в css3, с помощью некоторого jQuery, возможно.

...