Как сделать эффект появления прозрачности не всего элемента сразу?
Например, слева направо или снизу вверх?
-
может такой вариант подойдет - jsfiddle.net/soledar10/vh2e8h7j – soledar10 7 сен '15 в 16:24
4 ответа
Например, так: http://jsfiddle.net/g7zovv5c/2/
<div class="container">
<div class="transparent">content</div>
<div class="overlay transparent">content</div>
</div>
.transparent {
display: block;
padding: 20px;
font-size: 30px;
font-weight: bold;
font-family: arial;
opacity: 0.5;
background-color: red;
overflow: hidden;
}
.overlay {
opacity: 1 !important;
position: relative;
top: -76px;
}
Суть: делаем 2 элемента, один прозрачный, другой нет, помещаем второй поверх первого. После этого мы можем анимировать верхний элемент, показывая часть нижнего, прозрачного. Анимацию можно сделать и на CSS3 Transitions.
Создать 2 слоя, в которых один является прозрачным относительно второго, но не является таковым относительно всего документа. Скриптом прописать перемещение нижнего слоя под прозрачным. Должен получиться ожидаемый эффект.
Для WebKit можно сделать так:
.transparency_gradient {
-webkit-mask-image: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
}
Но в остальных браузерах - пичалька.
В веб-дизайне частичная прозрачность также применяется и достигается за счёт формата цвета RGBA, который задаётся только для фона элемента http://site-fi.ru/effekt-prozrachnosti-pri-navedenii-na-ssylku/
-
-
Постарайтесь писать более развернутые ответы. Поясните, на чем основано ваше утверждение? Добавьте в ответ минимальный необходимый пример решения (информацию по ссылке могут удалить и ответ потеряет ценность). – Nicolas Chabanovsky♦ 8 сен '15 в 15:13