Как сделать эффект распыления текста?

#css3 #html5

Увидел на youtube один эффект но без объяснения и утверждается что только html и
css и ни какого js и тому подобного 

Вопрос в виде картинки но как по другому это спросить не знаю

 
    

Ответы

Ответ 1

Реализация конечно хромает, но почему-то кажется, что и в "оригинале" будет аналогичное
или похожее решение.

Суть в том, что всё завязано animation и скорее всего спрайтах (ну или CSS стал ещё
мощнее..).

Извините за то что нет комментов и т.п., ибо голова не хочет варить после такого :D



body {
  background: #000;
}

label {
  color: #fff;
  font: inherit;
  background: gray;
  cursor: pointer;
  padding: 8px 10px;
  border-radius: 3px;
}

input[type="checkbox"] {
  display: none;
}

.effect {
  font-size: 0;
  font-weight: bold;
  color: #fff;
  margin-top: 30px;
  animation: hiddenParent 5.75s forwards linear paused;
}

.effect>span {
  display: inline-block;
  font-size: 40px;
}

.effect>span:empty {
  width: 10px;
}

.effect>span:not(:empty) {
  position: relative;
  z-index: 1;
}

.effect>span:not(:empty).red {
  color: red;
}

.effect>span:not(:empty).red::before {
  background-position-y: 100%;
}

.effect>span:not(:empty)::before,
.effect>span:not(:empty)::after {
  content: '';
  pointer-events: none;
  position: absolute;
}

.effect>span:not(:empty)::before {
  display: block;
  width: 100px;
  height: 100px;
  background: url('https://i.imgur.com/0KZdO5z.png') no-repeat 0 0 / 4000px 200px;
  animation: sprite 1s forwards steps(39, end);
  left: calc(50% - 50px);
  top: calc(50% - 50px);
  animation-play-state: paused;
  opacity: 0;
  z-index: 3;
}

.effect>span:not(:empty)::after {
  display: block;
  width: 0px;
  height: 100%;
  background: #000;
  animation: hidden .5s forwards linear;
  box-shadow: 0 0 10px 0 #000;
  z-index: 2;
  top: 0;
  right: -10px;
  bottom: 0;
  animation-play-state: paused;
}

input[type="checkbox"]:checked~label {
  opacity: 0;
  pointer-events: none;
}

input[type="checkbox"]:checked~.effect,
input[type="checkbox"]:checked~.effect>span:not(:empty)::before,
input[type="checkbox"]:checked~.effect>span:not(:empty)::after {
  animation-play-state: running;
}

.effect>span:not(:empty):nth-last-child(1)::before,
.effect>span:not(:empty):nth-last-child(1)::after {
  animation-delay: .1s;
}

.effect>span:not(:empty):nth-last-child(2)::before,
.effect>span:not(:empty):nth-last-child(2)::after {
  animation-delay: .2s;
}

.effect>span:not(:empty):nth-last-child(3)::before,
.effect>span:not(:empty):nth-last-child(3)::after {
  animation-delay: .3s;
}

.effect>span:not(:empty):nth-last-child(4)::before,
.effect>span:not(:empty):nth-last-child(4)::after {
  animation-delay: .4s;
}

.effect>span:not(:empty):nth-last-child(5)::before,
.effect>span:not(:empty):nth-last-child(5)::after {
  animation-delay: .5s;
}

.effect>span:not(:empty):nth-last-child(6)::before,
.effect>span:not(:empty):nth-last-child(6)::after {
  animation-delay: .6s;
}

.effect>span:not(:empty):nth-last-child(7)::before,
.effect>span:not(:empty):nth-last-child(7)::after {
  animation-delay: .7s;
}

.effect>span:not(:empty):nth-last-child(8)::before,
.effect>span:not(:empty):nth-last-child(8)::after {
  animation-delay: .8s;
}

.effect>span:not(:empty):nth-last-child(9)::before,
.effect>span:not(:empty):nth-last-child(9)::after {
  animation-delay: .9s;
}

.effect>span:not(:empty):nth-last-child(10)::before,
.effect>span:not(:empty):nth-last-child(10)::after {
  animation-delay: 1s;
}

.effect>span:not(:empty):nth-last-child(11)::before,
.effect>span:not(:empty):nth-last-child(11)::after {
  animation-delay: 1.1s;
}

.effect>span:not(:empty):nth-last-child(12)::before,
.effect>span:not(:empty):nth-last-child(12)::after {
  animation-delay: 1.2s;
}

.effect>span:not(:empty):nth-last-child(13)::before,
.effect>span:not(:empty):nth-last-child(13)::after {
  animation-delay: 1.3s;
}

.effect>span:not(:empty):nth-last-child(14)::before,
.effect>span:not(:empty):nth-last-child(14)::after {
  animation-delay: 1.4s;
}

.effect>span:not(:empty):nth-last-child(15)::before,
.effect>span:not(:empty):nth-last-child(15)::after {
  animation-delay: 1.5s;
}

.effect>span:not(:empty):nth-last-child(16)::before,
.effect>span:not(:empty):nth-last-child(16)::after {
  animation-delay: 1.6s;
}

.effect>span:not(:empty):nth-last-child(17)::before,
.effect>span:not(:empty):nth-last-child(17)::after {
  animation-delay: 1.7s;
}

.effect>span:not(:empty):nth-last-child(18)::before,
.effect>span:not(:empty):nth-last-child(18)::after {
  animation-delay: 1.8s;
}

.effect>span:not(:empty):nth-last-child(19)::before,
.effect>span:not(:empty):nth-last-child(19)::after {
  animation-delay: 1.9s;
}

.effect>span:not(:empty):nth-last-child(20)::before,
.effect>span:not(:empty):nth-last-child(20)::after {
  animation-delay: 2s;
}

.effect>span:not(:empty):nth-last-child(21)::before,
.effect>span:not(:empty):nth-last-child(21)::after {
  animation-delay: 2.1s;
}

.effect>span:not(:empty):nth-last-child(22)::before,
.effect>span:not(:empty):nth-last-child(22)::after {
  animation-delay: 2.2s;
}

.effect>span:not(:empty):nth-last-child(23)::before,
.effect>span:not(:empty):nth-last-child(23)::after {
  animation-delay: 2.3s;
}

.effect>span:not(:empty):nth-last-child(24)::before,
.effect>span:not(:empty):nth-last-child(24)::after {
  animation-delay: 2.4s;
}

.effect>span:not(:empty):nth-last-child(25)::before,
.effect>span:not(:empty):nth-last-child(25)::after {
  animation-delay: 2.5s;
}

.effect>span:not(:empty):nth-last-child(26)::before,
.effect>span:not(:empty):nth-last-child(26)::after {
  animation-delay: 2.6s;
}

.effect>span:not(:empty):nth-last-child(27)::before,
.effect>span:not(:empty):nth-last-child(27)::after {
  animation-delay: 2.7s;
}

.effect>span:not(:empty):nth-last-child(28)::before,
.effect>span:not(:empty):nth-last-child(28)::after {
  animation-delay: 2.8s;
}

.effect>span:not(:empty):nth-last-child(29)::before,
.effect>span:not(:empty):nth-last-child(29)::after {
  animation-delay: 2.9s;
}

.effect>span:not(:empty):nth-last-child(30)::before,
.effect>span:not(:empty):nth-last-child(30)::after {
  animation-delay: 3s;
}

.effect>span:not(:empty):nth-last-child(31)::before,
.effect>span:not(:empty):nth-last-child(31)::after {
  animation-delay: 3.1s;
}

.effect>span:not(:empty):nth-last-child(32)::before,
.effect>span:not(:empty):nth-last-child(32)::after {
  animation-delay: 3.2s;
}

.effect>span:not(:empty):nth-last-child(33)::before,
.effect>span:not(:empty):nth-last-child(33)::after {
  animation-delay: 3.3s;
}

.effect>span:not(:empty):nth-last-child(34)::before,
.effect>span:not(:empty):nth-last-child(34)::after {
  animation-delay: 3.4s;
}

.effect>span:not(:empty):nth-last-child(35)::before,
.effect>span:not(:empty):nth-last-child(35)::after {
  animation-delay: 3.5s;
}

.effect>span:not(:empty):nth-last-child(36)::before,
.effect>span:not(:empty):nth-last-child(36)::after {
  animation-delay: 3.6s;
}

.effect>span:not(:empty):nth-last-child(37)::before,
.effect>span:not(:empty):nth-last-child(37)::after {
  animation-delay: 3.7s;
}

.effect>span:not(:empty):nth-last-child(38)::before,
.effect>span:not(:empty):nth-last-child(38)::after {
  animation-delay: 3.8s;
}

.effect>span:not(:empty):nth-last-child(39)::before,
.effect>span:not(:empty):nth-last-child(39)::after {
  animation-delay: 3.9s;
}

.effect>span:not(:empty):nth-last-child(40)::before,
.effect>span:not(:empty):nth-last-child(40)::after {
  animation-delay: 4s;
}

.effect>span:not(:empty):nth-last-child(41)::before,
.effect>span:not(:empty):nth-last-child(41)::after {
  animation-delay: 4.1s;
}

.effect>span:not(:empty):nth-last-child(42)::before,
.effect>span:not(:empty):nth-last-child(42)::after {
  animation-delay: 4.2s;
}

.effect>span:not(:empty):nth-last-child(43)::before,
.effect>span:not(:empty):nth-last-child(43)::after {
  animation-delay: 4.3s;
}

.effect>span:not(:empty):nth-last-child(44)::before,
.effect>span:not(:empty):nth-last-child(44)::after {
  animation-delay: 4.4s;
}

.effect>span:not(:empty):nth-last-child(45)::before,
.effect>span:not(:empty):nth-last-child(45)::after {
  animation-delay: 4.5s;
}

.effect>span:not(:empty):nth-last-child(46)::before,
.effect>span:not(:empty):nth-last-child(46)::after {
  animation-delay: 4.6s;
}

.effect>span:not(:empty):nth-last-child(47)::before,
.effect>span:not(:empty):nth-last-child(47)::after {
  animation-delay: 4.7s;
}

.effect>span:not(:empty):nth-last-child(48)::before,
.effect>span:not(:empty):nth-last-child(48)::after {
  animation-delay: 4.8s;
}

.effect>span:not(:empty):nth-last-child(49)::before,
.effect>span:not(:empty):nth-last-child(49)::after {
  animation-delay: 4.9s;
}

.effect>span:not(:empty):nth-last-child(50)::before,
.effect>span:not(:empty):nth-last-child(50)::after {
  animation-delay: 5s;
}

@keyframes sprite {
  0% {
    background-position-x: 0%;
    transform: rotate(0deg);
    opacity: 1;
  }
  99% {
    background-position-x: 100%;
    transform: rotate(180deg);
    opacity: 1;
  }
  100% {
    background-position-x: 100%;
    transform: rotate(180deg);
    opacity: 0;
  }
}

@keyframes hidden {
  from {
    width: -10px;
  }
  to {
    width: calc(100% + 10px);
  }
}

@keyframes hiddenParent {
  0% {
    opacity: 1;
    pointer-events: all;
  }
  99.9% {
    opacity: 1;
    pointer-events: all;
  }
  100% {
    opacity: 0;
    pointer-events: none;
  }
}

Click

  T
  u
  t
  o
  r
  i
  a
  l
  
  C
  o
  m
  i
  n
  g
  
  S
  o
  o
  n