Css opacity: opacity — CSS: Cascading Style Sheets

Leave a Comment / Css / By /

Анимированный прелоадер на чистом СSS · Блог веб-студии Keengo

<div>
	<div>
		<div>
			<div></div>
			<div></div>
			<div></div>
		</div>
		<p>Loading</p>
	</div>
</div>
/* Этот код для примера */
.site-container {
	position: relative;
	height: 300px;
	width: 100%;
}
/* Далее код прелоадера */
.loader {
	position: absolute; /* Заменить на fixed, чтобы прелоадер был на весь экран */
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #fff;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	z-index: 100;
}
.loader p {
	margin: 1em 0 0 0;
	font-size: 16px;
}
.logo {
	width: 100px;
	height: 100px;
	box-sizing: border-box;
	position: relative;
	background-color: white;
}
. logo::before,
.logo::after {
	z-index: 1;
	box-sizing: border-box;
	content: '';
	position: absolute;
	border: 4px solid transparent;
	width: 0;
	height: 0;
	animation-direction: alternate;
	animation-timing-function: linear;
}
.logo::before {
	top: 0;
	left: 0;
	animation: border-before 1.5s infinite;
	animation-direction: alternate;
}
.logo::after {
	bottom: 0;
	right: 0;
	animation: border-after 1.5s infinite;
	animation-direction: alternate;
}
.logo > div {
	position: absolute;
	opacity: 0;
}
.white {
	border-left: 4px solid #333;
	top: 0;
	bottom: 0;
	right: 0;
	width: 0;
	animation: white 1.5s infinite;
	animation-direction: alternate;
}
.orange {
	border-top: 4px solid #333;
	left: 0;
	bottom: 0;
	right: 0;
	height: 0;
	background-color: #1967c3;
	animation: orange 1.
 
  5s infinite;
	animation-direction: alternate;
}
.red {
	border-right: 4px solid #333;
	top: 0;
	bottom: 0;
	left: 0;
	width: 0;
	background-color: #EA5664;
	animation: red 1.5s infinite;
	animation-direction: alternate;
}
@keyframes border-before {
	0% {
		width: 0;
		height: 0;
		border-top-color: #333;
		border-right-color: transparent;
	}
	12.49% {
		border-right-color: transparent;
	}
	12.5% {
		height: 0;
		width: 100%;
		border-top-color: #333;
		border-right-color: #333;
	}
	25%,
	100% {
		width: 100%;
		height: 100%;
		border-top-color: #333;
		border-right-color: #333;
	}
}
@keyframes border-after {
	0%,
	24.99% {
		width: 0;
		height: 0;
		border-left-color: transparent;
		border-bottom-color: transparent;
	}
	25% {
		width: 0;
		height: 0;
		border-left-color: transparent;
		border-bottom-color: #333;
	}
	37.
 
 49% {
		border-left-color: transparent;
		border-bottom-color: #333;
	}
	37.5% {
		height: 0;
		width: 100%;
		border-left-color: #333;
		border-bottom-color: #333;
	}
	50%,
	100% {
		width: 100%;
		height: 100%;
		border-left-color: #333;
		border-bottom-color: #333;
	}
}
@keyframes red {
	0%,
	50% {
		width: 0;
		opacity: 0;
	}
	50.01% {
		opacity: 1;
	}
	65%,
	100% {
		opacity: 1;
		width: 27%;
	}
}
@keyframes orange {
	0%,
	65% {
		height: 0;
		opacity: 0;
	}
	65.01% {
		opacity: 1;
	}
	80%,
	100% {
		opacity: 1;
		height: 50%;
	}
}
@keyframes white {
	0%,
	75% {
		width: 0;
		opacity: 0;
	}
	75.01% {
		opacity: 1;
	}
	90%,
	100% {
		opacity: 1;
		width: 23%;
	}
}

Непрозрачность CSS

Пример <стиль> дел { высота: 100 пикселей; ширина: 200 пикселей; граница: 1px сплошной черный; } . нижний { цвет фона: золото; z-индекс: 1; } .вершина { положение: родственник; верх: -65px; слева: 50 пикселей; цвет фона: салатовый; z-индекс: 2; непрозрачность: 0,4; } <дел> <дел>

Свойство CSS opacity было введено в CSS3, чтобы позволить разработчикам включать прозрачность в элементах HTML.

Свойство opacity позволяет указать уровень непрозрачности объекта, чтобы он стал полупрозрачным или даже полностью прозрачным (если это желаемый эффект).

Синтаксис

непрозрачность: <значение>

Возможные значения

Возможные значения:

<альфа-значение>
Задает степень прозрачности, которую следует применить к элементу. Значение 0,0 указывает на полную прозрачность, а значение 1,0 указывает на полную непрозрачность (отсутствие прозрачности).

Кроме того, все свойства CSS также принимают следующие значения ключевых слов CSS в качестве единственного компонента значения их свойства:

начальный
Представляет значение, указанное как начальное значение свойства.
унаследовать
Представляет вычисленное значение свойства родительского элемента.
снято с охраны
Это значение действует как inherit или initial , в зависимости от того, унаследовано свойство или нет. Другими словами, он устанавливает для всех свойств их родительские значения, если они наследуемые, или их начальные значения, если они не наследуемые.

Основная информация о свойствах

Исходное значение
1
Применимо к
Все элементы
Унаследовано?
№
СМИ
Визуальный
Анимируемый
Да (см. пример)

Пример кода

Базовый CSS

непрозрачность: 0,4;

Рабочий пример в документе HTML

Пример <стиль> дел { высота: 100 пикселей; ширина: 200 пикселей; граница: 1px сплошной черный; } . нижний { цвет фона: золото; z-индекс: 1; } .вершина { положение: родственник; верх: -65px; слева: 50 пикселей; цвет фона: салатовый; z-индекс: 2; непрозрачность: 0,4; }

<дел> <дел>

Попробуй

Спецификации CSS

  • Свойство opacity определено в модуле цвета CSS уровня 3 (рекомендация W3C от 7 июня 2011 г.).

Поддержка браузера

В следующей таблице, предоставленной Caniuse.com, показан уровень поддержки этой функции браузерами.

Префиксы поставщиков

Для максимальной совместимости с браузерами многие веб-разработчики добавляют свойства, специфичные для браузера, с помощью таких расширений, как 9.0005 -webkit- для Safari, Google Chrome и Opera (более новые версии), -ms- для Internet Explorer, -moz- для Firefox, -o- для более старых версий Opera и т.д. CSS свойство, если браузер не поддерживает проприетарное расширение, он просто проигнорирует его.

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

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

Многие разработчики используют Autoprefixer, постпроцессор для CSS. Autoprefixer автоматически добавляет префиксы поставщиков в ваш CSS, поэтому вам это не нужно. Он также удаляет старые ненужные префиксы из вашего CSS.

Вы также можете использовать Autoprefixer с такими препроцессорами, как Less и Sass.

Непрозрачность CSS | Свойство CSS3 Opacity, изменение прозрачности изображения

Автор: Авинаш Малхотра

Обновлено

  • ← Размер коробки
  • RGBA, HSL, HSLA Цвета
  1. Дом
  2. Веб-дизайн
  3. CSS3
  4. Непрозрачность

Непрозрачность

CSS3 непрозрачность устанавливает непрозрачность элемента. Непрозрачность — противоположность прозрачности. Значение opacity представляет собой плавающее значение от 0 до 1.

0 определяет элемент как полностью прозрачный ( то же, что и visibility:hidden ), тогда как значение непрозрачности 1 означает, что элемент полностью непрозрачен или имеет нулевую прозрачность. .

Изменить непрозрачность

Непрозрачность :

Значения непрозрачности

Возможные значения непрозрачности

Непрозрачность значения
1 Непрозрачность всех элементов по умолчанию.
0 Непрозрачность 0 показывает элемент как полностью прозрачный . То же, что ( видимость: скрыто )
0,5 Непрозрачность 0,5 показывает элемент как полупрозрачный . Таким образом, мы можем видеть фоновые цвета и изображения.

Как использовать непрозрачность

Значения непрозрачности всегда

плавающие значения , минимальное значение равно 0, а максимальное значение равно 1. Мы предпочитаем значение непрозрачности до одного места.

 <стиль> .img-1{непрозрачность:1}
 .img-2 {непрозрачность: 0,8}
 .

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *