7 091 Text / Codepen

Размытый текст с помощью фильтра blur

Размытие текста с помощью css свойства filter: blur()


HTML

<p>Text</p>

CSS

* {
  box-sizing: border-box;
}

::selection {
  background: #000000;
  color: #ffffff;
}

html, body {
  height: 100vh;
  font-family: 'Open Sans', sans-serif;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
}

p {
  font-size: 300px;
  font-weight: 1000;
  text-transform: uppercase;
  animation: jump 2s ease-in-out infinite;
}

@keyframes jump {
  0% {
    transform: translateY(0);
  }
  
  50% {
    transform: translateY(50px);
    filter: blur(15px);
  }
}

Комментарии

  • Facebook
  • Вконтакте

Похожие статьи