CSS3 (или JQuery) Цвет фона Анимация Вертикально от центра DIV

Question

Я пытаюсь создать такой эффект, как правый нав на этом сайте:

http://dianabobar.com/

с JQuery. То, как цвет открывается из середины, - это эффект, который я собираюсь сделать, но, к сожалению, этот сайт сделан во Flash, поэтому у меня нет возможности изучить, как это делается. Я не уверен, что искать. Я думал что-то вроде «фоновой радиальной анимации jquery» или «фоновой цветной анимации из центра jquery».

Я также рассмотрел возможность упрощения CSS3, как они подробно описаны здесь (Expand background from center (CSS/Javascript)). Проблема в том, что ответ на этот вопрос показывает, что переход CSS3 работает горизонтально, когда мне нужно, чтобы он работал вертикально. Я работал с JSFiddle, которые они использовали в ответе (http://jsfiddle.net/SNzgs/), но мне кажется, что мне кажется, что переход к анимации происходит сверху вниз, а не из центра. Код у них есть это:

.redline {background:red;height:10px;width:0;margin:auto;} 

.container:hover .redline { 
    width:200px; 
    -webkit-transition: all 0.3s ease-out; 
    transition:all 0.3s ease-out; 
} 

код, который я попытался было:

.redline {background:red;height:0px;width:10px;margin:auto;} 

.container:hover .redline { 
    height:200px; 
    -webkit-transition: all 0.3s ease-out; 
    transition:all 0.3s ease-out; 
} 

Спасибо за вашу помощь!

Answer 1

Вы можете легко сделать это с помощью :after псевдоэлемента и абсолютного позиционирования. Затем вы можете комбинировать height и top Свойства этого затеняющая коробка.
Я сделал совершенно новую скрипку: http://jsfiddle.net/SNzgs/5/, так как ваша была построена для выполнения горизонтальной работы.

.container:after { 
    content: ""; 
    display: block; 
    background: #ccc; 
    width: 100%; 
    height: 0; 
    top: 0.5em; 
    position: absolute; 
    left: 0; 

    transition: all 1s ease-out; 
} 
.container:hover:after { 
    top: 0; 
    height: 100%; 
} 

Answer 2

Это работает (хотя я не уверен, что это именно то, что вы хотите):

.container {height:100px;width:200px;background:#eee;position:relative;} 
.container span {display:block;} 
.greyline {background:#ccc;height:10px;width:200px;position:absolute;bottom:0;} 
.redline {background:red;height:0;width:200px;margin:auto; top:5px;position:relative;} 
.container:hover .redline { 
    height:10px; 
    top: 0px; 
    -webkit-transition: all 0.3s ease-out; 
    transition:all 0.3s ease-out; 
} 

Answer 3

Вы можете воссоздать подобный эффект с некоторыми изменениями в вашей скрипке:

<div class="container"> 
    <span class="vertgrey"> 
     <span class="vertredline"></span>   
    </span> 
    <span class="greyline"> 
     <span class="redline"></span> 
    </span> 
</div> 

а CSS:

.container {height:100px;width:200px;background:#eee;position:relative;} 
.container span {display:block;} 
.greyline {background:#ccc;height:10px;width:200px;position:absolute;bottom:45px;} 
.redline, .vertredline {background:red;height:10px;width:0;margin:auto;} 
.vertgrey { 
    background: #CCC; 
    height: 100%; 
    position: absolute; 
    width: 10px; 
    left: 90px; 
} 
.container:hover .redline { 
    width:200px; 
    -webkit-transition: all 0.3s ease-out; 
    transition:all 0.3s ease-out; 
} 
.container:hover .vertredline { 
    height:100%; 
    width: 10px; 
    -webkit-transition: all 0.3s ease-out; 
    transition:all 0.3s ease-out; 
} 

Это ссылка на обновленной скрипку: http://jsfiddle.net/SNzgs/4/

Answer 4

Вот мой выстрел в растворе для Вас:

скрипку: http://jsfiddle.net/itsmikem/gF28Y/

CSS:

.container {height:100px;width:200px;background:#eee;position:absolute;} 
.greyline {display:block;position:relative;background:#000;height:0%;width:100%;} 
.redline {display:block;position:relative;background:#f00;height:0%;width:100%;margin-top:50px;} 
.container:hover .redline { 
    margin-top:0px; 
    height:100px; 
    -webkit-transition: all 0.3s ease-out; 
    transition:all 0.3s ease-out; 
} 

HTML:

<div class="container"> 
    <div class="greyline"> 
     <div class="redline"></div> 
    </div> 
</div> 

Answer 5

Мое решение аналогично т o от matewka, но использует как :before, так и :after псевдоэлементы.Пример разметки выглядит следующим образом:

<nav> 
    <ul> 
     <li><a href="#">Link</a></li> 
    </ul> 
</nav> 

Для CSS:

nav ul { 
    list-style: none; 
    width: 6em; 
} 
nav ul li { 
    background-color: #eee; 
    position: relative; 
} 
    nav ul li:before, 
    nav ul li:after { 
     background-color: #333; 
     content: ""; 
     display: block; 
     position: absolute; 
     left: 0; 
     right: 0; 
     top: 50%;  /* Vertically positions pseudo elements in the center */ 
     bottom: 50%; /* Vertically positions pseudo elements in the center */ 
     transition: all .125s ease-in-out; 
     z-index: 50; 
    } 
nav ul li a { 
    color: #333; 
    display: block; 
    padding: .5em 1em; 
    position: relative; 
    z-index: 100; 
    transition: all .125s ease-in-out; 
} 
nav ul li a:hover { 
    color: #eee; 
} 
    nav ul li:hover:before { 
     top: 0; /* Forces :before to stretch to fill top half */ 
    } 
    nav ul li:hover:after { 
     bottom: 0; /* Forces :after to stretch to fill bottom half */ 
    } 

http://jsfiddle.net/teddyrised/rRtmB/

Answer 6

Вы можете использовать элемент :after псевдо создать оживлённую фон:

CSS

ul { 
    margin: 0; 
    padding: 0; 
} 
ul > li { 
    list-style: none; 
    margin: 0; 
    padding: 0; 
    position: relative; 
} 
ul > li > a { 
    display: block; 
    padding: 10px; 
    color: #000000; 
    text-decoration: none; 
    position: relative; 
    z-index: 10; 
    -webkit-transition: all 400ms; 
    transition: all 400ms; 
} 
ul > li:hover > a { 
    color: #ffffff; 
} 
ul > li:after { 
    content: " "; 
    position: absolute; 
    top: 50%; 
    bottom: 50%; 
    left: 0; 
    right: 0; 
    background: #353535; 
    z-index: 0; 
    -webkit-transition: all 400ms; 
    transition: all 400ms; 
} 
ul > li:hover:after { 
    top: 0; 
    bottom: 0; 
} 

HTML

<ul> 
    <li><a href="">Hello</a></li> 
    <li><a href="">Hello</a></li> 
    <li><a href="">Hello</a></li> 
    <li><a href="">Hello</a></li> 
</ul> 

Demo