CSS-анимация круговой ряби

Я пытаюсь получить эффект полукруга, направленного вверх, и вот что у меня есть до сих пор. У меня есть эта анимация луча Wi-Fi, но мне нужен такой же эффект на полукруге с лучами сплошного цвета. Любая помощь будет оценена.

Вместо эффекта мерцания мне нужна плавная анимация для баннера сайта.

Что у меня есть до сих пор

<div class = "wifi-symbol">
  <div class = "wifi-circle first"></div>
  <div class = "wifi-circle second"></div>
  <div class = "wifi-circle third"></div> 
  <div class = "wifi-circle fourth">
</div>

А вот эталонное изображение для анимации.

CSS-анимация круговой ряби

Вы неправильно написали opacity на большинстве ключевых кадров.

— 07.08.2018 14:13

Не совсем понятно, какой эффект вам нужен, поэтому, прежде чем я отвечу, это та анимация, которую вы ищете? jsfiddle.net/v4t0u83p

— 07.08.2018 14:30

Вы должны разместить здесь в своем вопросе разметку и код, а не jsbin. минимальный воспроизводимый пример Этот сайт может дополнять ваш пример, но не может использоваться вместо него.

— 07.08.2018 15:26

css css-animations

07.08.2018 14:01

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

1 017

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Пример, который вы разместили в своем JSBin, умело использует границы в div для создания круглой формы с помощью border-radius, затем закрепляет ее с контейнером и, наконец, вращает результат, чтобы создать символ Wi-Fi сверху вниз.

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

Теоретически ваш ответ правильный, но, пожалуйста, приведите пример, отображающий ваше решение. В нынешнем виде это был бы отличный комментарий, но его немного короче, чтобы считаться ответом.

— 07.08.2018 15:04

Да, действительно, стоит ли удалить ответ и поместить его в комментарий?

— 07.08.2018 16:48

Спасибо за чаевые :)

— 09.08.2018 11:56

07.08.2018 14:14

Вот идея с одним элементом, но без прозрачности:

.ripple {
 box-sizing:border-box;
 width:200px;
 height:200px;
 border-right:20px solid red;
 border-top:20px solid red;
 border-bottom:20px solid transparent;
 border-left:20px solid transparent;
 
 box-shadow:0px 0px 0 20px #fff inset,
            0px 0px 0 40px red inset,
            0px 0px 0 60px #fff inset,
            0px 0px 0 80px red inset;
 
 border-radius:50%;
 transform:rotate(-45deg);
 position:relative;
 animation:pulse 2s infinite linear;
}
.ripple:before {
  content:"";
  position:absolute;
  bottom:0;
  top:0;
  left:0;
  right:0;
  background:linear-gradient(to top right,#fff 50%,transparent 50%);
  z-index:1;
}

@keyframes pulse {
 0% {
  border-right-color: rgba(255, 0, 0, 1);
  border-top-color:rgba(255, 0, 0, 1);
  box-shadow:0px 0px 0 20px #fff inset,
            0px 0px 0 40px rgba(255, 0, 0, 1) inset,
            0px 0px 0 60px #fff inset,
            0px 0px 0 80px rgba(255, 0, 0, 1) inset;
 }
 25% {
  border-right-color: rgba(255, 0, 0, 1);
  border-top-color:rgba(255, 0, 0, 1);
  box-shadow:0px 0px 0 20px #fff inset,
            0px 0px 0 40px rgba(255, 0, 0, 1) inset,
            0px 0px 0 60px #fff inset,
            0px 0px 0 80px rgba(255, 0, 0, 0.5) inset;
 
 }
 50% {
  border-right-color: rgba(255, 0, 0, 1);
  border-top-color:rgba(255, 0, 0, 1);
  box-shadow:0px 0px 0 20px #fff inset,
            0px 0px 0 40px rgba(255, 0, 0, 0.5) inset,
            0px 0px 0 60px #fff inset,
            0px 0px 0 80px rgba(255, 0, 0, 1) inset;
 
 }
 75% {
  border-right-color: rgba(255, 0, 0, 0.5);
  border-top-color:rgba(255, 0, 0, 0.5);
  box-shadow:0px 0px 0 20px #fff inset,
            0px 0px 0 40px rgba(255, 0, 0, 1) inset,
            0px 0px 0 60px #fff inset,
            0px 0px 0 80px rgba(255, 0, 0, 1) inset;
 
 }
 100% {
  border-right-color: rgba(255, 0, 0, 1);
  border-top-color:rgba(255, 0, 0, 1);
  box-shadow:0px 0px 0 20px #fff inset,
            0px 0px 0 40px rgba(255, 0, 0, 1) inset,
            0px 0px 0 60px #fff inset,
            0px 0px 0 80px rgba(255, 0, 0, 1) inset;
 
 }
}

<div class = "ripple">

</div>

С прозрачностью вы можете попробовать следующее:

.ripple {
 box-sizing:border-box;
 width:200px;
 height:200px;
 border-right:20px solid red;
 border-top:20px solid red;
 border-bottom:20px solid transparent;
 border-left:20px solid transparent;
 
 border-radius:50%;
 transform:rotate(-45deg);
 position:relative;
 animation:pulse 3s 2s infinite linear;
}
.ripple:before {
  content:"";
  position:absolute;
  bottom:20px;
  top:20px;
  left:20px;
  right:20px;
  border:inherit;
  border-radius:inherit;
  animation:pulse 3s 1s infinite linear;
}
.ripple:after {
  content:"";
  position:absolute;
  bottom:60px;
  top:60px;
  left:60px;
  right:60px;
  border:inherit;
  border-radius:inherit;
  animation:pulse 3s infinite linear;
}

@keyframes pulse {
  0%,33%,100% {
    border-right:20px solid red;
    border-top:20px solid red;
    border-bottom:20px solid transparent;
    border-left:20px solid transparent;
  }
  66% {
    border-right:20px solid rgba(255,0,0,0.5);
    border-top:20px solid rgba(255,0,0,0.5);
    border-bottom:20px solid transparent;
    border-left:20px solid transparent;
  }

}

<div class = "ripple">

</div>

07.08.2018 14:21

Ответ принят как подходящий

Как это?

body {
  background: #232425;
}
.wifi-symbol {
  --color: #ffffcc;
  --opacity: 0.4;
  overflow: hidden;
  display: inline-block;
  position: relative;
  width: 150px;
  height: 75px;
}
.wifi-symbol > * {
  box-sizing: border-box;
  display: block;
  position: absolute;
  bottom: 0px;
  left: 50%;
  transform: translateY(50%) translateX(-50%);
  border-color: var(--color);
  border-style: solid;
  border-width: 0.8em;
  border-radius: 100%;
  opacity: 0;
  animation: expansion 3s infinite;
}
.wifi-symbol > :nth-child(1) {
  width: 100%;
  height: 200%;
  animation-delay: 800ms;
}
.wifi-symbol > :nth-child(2) {
  width: 72.5%;
  height: 145%;
  animation-delay: 400ms;
}
.wifi-symbol > :nth-child(3) {
  width: 45%;
  height: 90%;
}
.wifi-symbol > :nth-child(4) {
  width: 10%;
  height: 20%;
  opacity: 1;
  background-color: var(--color);
  animation: none;
}

@keyframes expansion {
  0% {
    opacity: 0;
  }
  15% {
    opacity: var(--opacity);
  }
}

.as-console-wrapper { max-height: 0 !important; }

<div class = "wifi-symbol"><div></div><div></div><div></div><div></div></div>

Как мне сделать эти волны сплошным белым цветом? в настоящее время он полупрозрачный

— 07.08.2018 14:57

@ user6725932, изменив border-color (и отрегулировав непрозрачность ключевых кадров по своему вкусу)

— 07.08.2018 15:01

07.08.2018 14:38

Другие вопросы по теме

Safari не останавливает анимацию CSS3

IsSupported 'неопределенного jquery

CSS переход ширины границы

SVG-анимация толстой пунктирной закругленной затененной линии на произвольном фоне

Я не могу понять, как остановить привязку, когда пользователь наведен на фон моего сайта

Как установить время анимации абзаца в зависимости от длины текста в абзаце?

Сделайте слайд div вверх, подождите 5 секунд и спуститесь с помощью CSS-анимации

CSS - Заставить указатель мыши исчезнуть через несколько секунд

Читать спрайт css всегда в полноэкранном режиме?

CSS: анимация по ключевым кадрам исчезает при наведении курсора

CSS-анимация круговой ряби

Ответы 3

Другие вопросы по теме

Похожие вопросы