БЛОГ НА HUSL


Как нарисовать и анимировать символ (знак) российского рубля

Автор вопроса: Sevastopol'

У меня есть символ (знак) российского рубля: ₽ (₽)

Знак российского рубля представляет собой букву «Р», состоящую из двух элементов, с горизонтальной чертой. Как создать эффект анимации для символа российского рубля, например, поэтапно отрисовав все детали этого знака?

Я представляю себе следующий сценарий анимации:

  1. Нарисовать прямую вертикальную линию
  2. Нарисовать овал справа от вертикальной линии
  3. Нарисовать горизонтальную черту чуть ниже овала

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

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

Данный вопрос создан в рамках и с целью обмена опытом между участниками сообщества. Всех призываю принять участие и благодарю за участие!


Источник

Ответы (1 шт):

Автор решения: Sevastopol'

Подобный сценарий я реализовал следующим образом:

Каждый элемент символа российского рубля заключил в отдельный строчный элемент span.

Для рисования прямой вертикальной линии и горизонтальной черты использовал свойства width, height и background-color.

Овал справа от вертикальной линии нарисовал с помощью границ, используя свойства border и border-radius.

Хвостик овала слева от вертикальной линии изобразил по тому же принципу, как и вертикальную линию и горизонтальную черту, используя те же свойства, и также заключив его в дополнительный строчный элемент span.

Знак российского рубля у меня в итоге получился таким:

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  overflow: hidden;
  display: flex;
  width: 100%;
  height: 100vh;
  align-items: center;
  justify-content: center;
}

/* Контейнер */
.container {
  position: relative;
  width: 242px;
  height: 242px;
  border: 1px solid black;
}

/* Символ российского рубля */
.ruble>span {
  display: block;
  position: absolute;
}
.ruble>span:nth-child(1) {
  bottom: 40px;
  left: 80px;
  width: 16px;
  height: 160px;
  background-color: black;
}
.ruble>span:nth-child(2) {
  top: 40px;
  left: 96px;
  height: 90px;
  width: 90px;
  border-top: 16px solid black;
  border-right: 16px solid black;
  border-radius: 0 90px 90px 0;
}
.ruble>span:nth-child(3) {
  top: 40px;
  right: 54px;
  height: 90px;
  width: 90px;
  border-bottom: 16px solid black;
  border-right: 16px solid black;
  border-radius: 0 90px 90px 0;
}
.ruble>span:nth-child(4) {
  bottom: 85px;
  left: 72px;
  height: 16px;
  width: 82px;
  background-color: black;
}
.ruble>span:nth-child(5) {
  bottom: 110px;
  right: 160px;
  height: 16px;
  width: 8px;
  background-color: black;
}
<div class="container">
  <div class="ruble">
    <span></span><span></span><span></span><span></span><span></span>
  </div>
</div>

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

Для этого я создал CSS анимацию, и с помощью правила @keyframes установил общие ключевые кадры, включая в них нужные свойства при анимации для всех четырех элементов. Такой вариант анимации является совсем не сложным, поэтому достаточным было использование ключевых слов from и to.

Отдельно для каждого последующего в очереди элемента установил с помощью свойства animation-delay время ожидания перед воспроизведением анимации по возрастанию в заранее просчитанном промежутке.

Результат оказался следующим:

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  overflow: hidden;
  display: flex;
  width: 100%;
  height: 100vh;
  align-items: center;
  justify-content: center;
}

/* Контейнер */
.container {
  position: relative;
  width: 242px;
  height: 242px;
  border: 1px solid black;
}

/* Символ российского рубля */
.ruble>span {
  display: block;
  position: absolute;
}
.ruble>span:nth-child(1) {
  bottom: 40px;
  left: 80px;
  width: 16px;
  /*height: 160px;*/
  height: 0;
  background-color: black;
}
.ruble>span:nth-child(2) {
  top: 40px;
  left: 96px;
  /*height: 90px;*/
  height: 16px;
  /*width: 90px;*/
  width: 0;
  border-top: 16px solid black;
  border-right: 16px solid black;
  /*border-radius: 0 90px 90px 0;*/
  border-width: 0px;
}
.ruble>span:nth-child(3) {
  top: 40px;
  right: 54px;
  height: 90px;
  /*width: 90px;*/
  width: 0;
  border-bottom: 16px solid black;
  border-right: 16px solid black;
  /*border-radius: 0 90px 90px 0;*/
  border-width: 0px;
}
.ruble>span:nth-child(4) {
  bottom: 85px;
  /*left: 72px;*/
  left: 80px;
  height: 16px;
  /*width: 82px;*/
  width: 0;
  background-color: black;
}
.ruble>span:nth-child(5) {
  bottom: 110px;
  right: 160px;
  height: 16px;
  /*width: 8px;*/
  width: 0;
  background-color: black;
}

/* Анимация символа российского рубля */
.container:hover .ruble>span:nth-child(1) {
  animation: span__one 0.3s 0s forwards;
}
.container:hover .ruble>span:nth-child(2) {
  animation: span__two_1 0.3s 0.3s forwards, span__two_2 0.3s 0.6s forwards, radius 1.5s 2.0s ease forwards;
}
.container:hover .ruble>span:nth-child(3) {
  animation: span__three 0.3s 0.9s forwards, radius 1.5s 2.0s ease forwards;
}
.container:hover .ruble>span:nth-child(4) {
  animation: span__four_1 0.5s 4.0s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards, span__four_2 0.5s 5.0s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}
.container:hover .ruble>span:nth-child(5) {
  animation: span__five 0.5s 6.0s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}
@keyframes span__one {
  from {height: 0px;}
  to {height: 160px;}
}
@keyframes span__two_1 {
  from {border-width: 16px; height: 16px; width: 0px;}
  to {border-width: 16px; height: 16px; width: 90px;}
}
@keyframes span__two_2 {
  from {height: 16px;}
  to {height: 90px;}
}
@keyframes radius {
  from {border-radius: 0px;}
  to {border-radius: 0 90px 90px 0;}
}
@keyframes span__three {
  from {border-width: 16px; width: 0px;}
  to {border-width: 16px; width: 90px;}
}
@keyframes span__four_1 {
  from {width: 0px;}
  to {width: 74px;}
}
@keyframes span__four_2 {
  from {width: 74px; left: 80px}
  to {width: 82px; left: 72px;}
}
@keyframes span__five {
  from {width: 0px;}
  to {width: 8px;}
}
<div class="container">
  <div class="ruble">
    <span></span><span></span><span></span><span></span><span></span>
  </div>
</div>

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

Золотой рубль

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  overflow: hidden;
  display: flex;
  width: 100%;
  height: 100vh;
  align-items: center;
  justify-content: center;
  background: rgb(255,255,255);
  background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(238,201,3,1) 100%, rgba(238,201,3,1) 100%);
}

/* Кнопка запуска и контейнер */
input[type="radio"] {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80px;
  height: 80px;
  margin-top: -40px;
  margin-left: -40px;
  transition: opacity 2s ease;
}
input[type="radio"]:checked {
  opacity: 0;
}
input[type="radio"]:checked + div {
  display: flex;
  animation: start 2s forwards;
}
@keyframes start {
  0% {
      opacity: 0;
      display: none;
  }
  99.9% {
      opacity: 0;
      display: none;
  }   
  100% {
      opacity: 1;
      display: flex;
  }
}
.container {
  opacity: 0;
  display: none;
  width: 100%;
  height: 100vh;
  align-items: center;
  justify-content: center;
}

/* Монета */
.coin {
  position: relative;
  width: 260px;
  height: 260px;
  border: 10px solid transparent;
  border-radius: 100%;
  background-color: gold;
  background-image: -webkit-repeating-radial-gradient(center center, rgba(0,0,0,.2), rgba(0,0,0,.2) 1px, transparent 1px, transparent 100%);
  background-image: -moz-repeating-radial-gradient(center center, rgba(0,0,0,.2), rgba(0,0,0,.2) 1px, transparent 1px, transparent 100%);
  background-image: -ms-repeating-radial-gradient(center center, rgba(0,0,0,.2), rgba(0,0,0,.2) 1px, transparent 1px, transparent 100%);
  background-image: repeating-radial-gradient(center center, rgba(0,0,0,.2), rgba(0,0,0,.2) 1px, transparent 1px, transparent 100%);
  -webkit-background-size: 3px 3px;
  -moz-background-size: 3px 3px;
  background-size: 3px 3px;
  animation: spin 0.1s 1.9s ease 20;
}
.coin:before {
  content: "";
  display: block;
  position: absolute;
  top: -10px;
  left: -10px;
  width: 100%;
  height: 100%;
  border: 10px solid #e3c006;
  border-radius: 100%;
  background-color: transparent;
  box-shadow: inset 0px 0px 5px 0px rgba(50, 50, 50, 0.75);
}
.coin:after {
  z-index: -1;
  content: "";
  display: block;
  position: absolute;
  left: 26px;
  right: 26px;
  top: 248px;
  bottom: -20px;
  border-radius: 50%;
  background-image: radial-gradient(black, transparent);
  opacity: 0.25;
}
.ruble {
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 100%;
}
.ruble:after {
  content: "";
  position: absolute;
  top: -20%;
  left: -230%;
  width: 200%;
  height: 200%;
  opacity: 0;
  transform: rotate(-30deg);
  background: rgba(255, 255, 255, 0.13);
  background: linear-gradient(to right, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.05) 77%, rgba(255, 255, 255, 0.7) 92%, rgba(255, 255, 255, 0.0) 100%);
  animation: shine 3.5s 11.5s ease infinite;
}

/* Символ российского рубля */
.ruble>span {
  display: block;
  position: absolute;
}
.ruble>span:nth-child(1) {
  bottom: 40px;
  left: 80px;
  width: 16px;
  /*height: 160px;*/
  height: 0;
  background-color: darkgoldenrod;
}
.ruble>span:nth-child(2) {
  top: 40px;
  left: 96px;
  /*height: 90px;*/
  height: 16px;
  /*width: 90px;*/
  width: 0;
  border-top: 16px solid darkgoldenrod;
  border-right: 16px solid darkgoldenrod;
  /*border-radius: 0 90px 90px 0;*/
  border-width: 0px;
}
.ruble>span:nth-child(3) {
  top: 40px;
  right: 54px;
  height: 90px;
  /*width: 90px;*/
  width: 0;
  border-bottom: 16px solid darkgoldenrod;
  border-right: 16px solid darkgoldenrod;
  /*border-radius: 0 90px 90px 0;*/
  border-width: 0px;
}
.ruble>span:nth-child(4) {
  bottom: 85px;
  /*left: 72px;*/
  left: 80px;
  height: 16px;
  /*width: 82px;*/
  width: 0;
  background-color: darkgoldenrod;
}
.ruble>span:nth-child(5) {
  bottom: 110px;
  right: 160px;
  height: 16px;
  /*width: 8px;*/
  width: 0;
  background-color: darkgoldenrod;
}

/* Анимация символа российского рубля */
.container .ruble>span:nth-child(1) {
  animation: span__one 0.3s 5.0s forwards;
}
.container .ruble>span:nth-child(2) {
  animation: span__two_1 0.3s 5.3s forwards, span__two_2 0.3s 5.6s forwards, radius 1.5s 7.0s ease forwards;
}
.container .ruble>span:nth-child(3) {
  animation: span__three 0.3s 5.9s forwards, radius 1.5s 7.0s ease forwards;
}
.container .ruble>span:nth-child(4) {
  animation: span__four_1 0.5s 9.0s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards, span__four_2 0.5s 10.0s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}
.container .ruble>span:nth-child(5) {
  animation: span__five 0.5s 11.0s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}
@keyframes span__one {
  from {height: 0px;}
  to {height: 160px;}
}
@keyframes span__two_1 {
  from {border-width: 16px; height: 16px; width: 0px;}
  to {border-width: 16px; height: 16px; width: 90px;}
}
@keyframes span__two_2 {
  from {height: 16px;}
  to {height: 90px;}
}
@keyframes radius {
  from {border-radius: 0px;}
  to {border-radius: 0 90px 90px 0;}
}
@keyframes span__three {
  from {border-width: 16px; width: 0px;}
  to {border-width: 16px; width: 90px;}
}
@keyframes span__four_1 {
  from {width: 0px;}
  to {width: 74px;}
}
@keyframes span__four_2 {
  from {width: 74px; left: 80px}
  to {width: 82px; left: 72px;}
}
@keyframes span__five {
  from {width: 0px;}
  to {width: 8px;}
}

/* Анимация монеты */
@keyframes spin {
  0% {
    border-left-width: 0;
    border-right-width: 0;
    width: 260px;
  }
  50% {
    border-left-width: 26px;
    border-right-width: 0;
    width: 0;
  }
  50.001% {
    border-left-width: 0;
    border-right-width: 26px;
  }
  100% {
    border-left-width: 0;
    border-right-width: 0;
    width: 260px;
  }
}

/* Блеск */
@keyframes shine {
  0% {
    top: -20%;
    left: -230%;
    opacity: 0;
    
  }
  50% {
    top: -50%;
    left: -50%;
    opacity: 1;
  }
  100% {
    top: -50%;
    left: -50%;
    opacity: 1;
  }
}
<input type="radio">
<div class="container">
<div class="coin">
  <div class="ruble">
    <span></span><span></span><span></span><span></span><span></span>
  </div>
</div>
</div>

Серебряный рубль

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  overflow: hidden;
  display: flex;
  width: 100%;
  height: 100vh;
  align-items: center;
  justify-content: center;
  background: rgb(255,255,255);
  background: radial-gradient(circle, rgba(255,255,255,1) 0%, silver 100%, silver 100%);
}

/* Кнопка запуска и контейнер */
input[type="radio"] {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80px;
  height: 80px;
  margin-top: -40px;
  margin-left: -40px;
  transition: opacity 2s ease;
}
input[type="radio"]:checked {
  opacity: 0;
}
input[type="radio"]:checked + div {
  display: flex;
  animation: start 2s forwards;
}
@keyframes start {
  0% {
      opacity: 0;
      display: none;
  }
  99.9% {
      opacity: 0;
      display: none;
  }   
  100% {
      opacity: 1;
      display: flex;
  }
}
.container {
  opacity: 0;
  display: none;
  width: 100%;
  height: 100vh;
  align-items: center;
  justify-content: center;
}

/* Монета */
.coin {
  position: relative;
  width: 260px;
  height: 260px;
  border: 10px solid transparent;
  border-radius: 100%;
  background-color: silver;
  background-image: -webkit-repeating-radial-gradient(center center, rgba(0,0,0,.2), rgba(0,0,0,.2) 1px, transparent 1px, transparent 100%);
  background-image: -moz-repeating-radial-gradient(center center, rgba(0,0,0,.2), rgba(0,0,0,.2) 1px, transparent 1px, transparent 100%);
  background-image: -ms-repeating-radial-gradient(center center, rgba(0,0,0,.2), rgba(0,0,0,.2) 1px, transparent 1px, transparent 100%);
  background-image: repeating-radial-gradient(center center, rgba(0,0,0,.2), rgba(0,0,0,.2) 1px, transparent 1px, transparent 100%);
  -webkit-background-size: 3px 3px;
  -moz-background-size: 3px 3px;
  background-size: 3px 3px;
  animation: spin 0.1s 1.9s ease 20;
}
.coin:before {
  content: "";
  display: block;
  position: absolute;
  top: -10px;
  left: -10px;
  width: 100%;
  height: 100%;
  border: 10px solid silver;
  border-radius: 100%;
  background-color: transparent;
  box-shadow: inset 0px 0px 5px 0px rgba(50, 50, 50, 0.75);
}
.coin:after {
  z-index: -1;
  content: "";
  display: block;
  position: absolute;
  left: 26px;
  right: 26px;
  top: 248px;
  bottom: -20px;
  border-radius: 50%;
  background-image: radial-gradient(black, transparent);
  opacity: 0.25;
}
.ruble {
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 100%;
}
.ruble:after {
  content: "";
  position: absolute;
  top: -20%;
  left: -230%;
  width: 200%;
  height: 200%;
  opacity: 0;
  transform: rotate(-30deg);
  background: rgba(255, 255, 255, 0.13);
  background: linear-gradient(to right, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.05) 77%, rgba(255, 255, 255, 0.7) 92%, rgba(255, 255, 255, 0.0) 100%);
  animation: shine 3.5s 11.5s ease infinite;
}

/* Символ российского рубля */
.ruble>span {
  display: block;
  position: absolute;
}
.ruble>span:nth-child(1) {
  bottom: 40px;
  left: 80px;
  width: 16px;
  /*height: 160px;*/
  height: 0;
  background-color: gray;
}
.ruble>span:nth-child(2) {
  top: 40px;
  left: 96px;
  /*height: 90px;*/
  height: 16px;
  /*width: 90px;*/
  width: 0;
  border-top: 16px solid gray;
  border-right: 16px solid gray;
  /*border-radius: 0 90px 90px 0;*/
  border-width: 0px;
}
.ruble>span:nth-child(3) {
  top: 40px;
  right: 54px;
  height: 90px;
  /*width: 90px;*/
  width: 0;
  border-bottom: 16px solid gray;
  border-right: 16px solid gray;
  /*border-radius: 0 90px 90px 0;*/
  border-width: 0px;
}
.ruble>span:nth-child(4) {
  bottom: 85px;
  /*left: 72px;*/
  left: 80px;
  height: 16px;
  /*width: 82px;*/
  width: 0;
  background-color: gray;
}
.ruble>span:nth-child(5) {
  bottom: 110px;
  right: 160px;
  height: 16px;
  /*width: 8px;*/
  width: 0;
  background-color: gray;
}

/* Анимация символа российского рубля */
.container .ruble>span:nth-child(1) {
  animation: span__one 0.3s 5.0s forwards;
}
.container .ruble>span:nth-child(2) {
  animation: span__two_1 0.3s 5.3s forwards, span__two_2 0.3s 5.6s forwards, radius 1.5s 7.0s ease forwards;
}
.container .ruble>span:nth-child(3) {
  animation: span__three 0.3s 5.9s forwards, radius 1.5s 7.0s ease forwards;
}
.container .ruble>span:nth-child(4) {
  animation: span__four_1 0.5s 9.0s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards, span__four_2 0.5s 10.0s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}
.container .ruble>span:nth-child(5) {
  animation: span__five 0.5s 11.0s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}
@keyframes span__one {
  from {height: 0px;}
  to {height: 160px;}
}
@keyframes span__two_1 {
  from {border-width: 16px; height: 16px; width: 0px;}
  to {border-width: 16px; height: 16px; width: 90px;}
}
@keyframes span__two_2 {
  from {height: 16px;}
  to {height: 90px;}
}
@keyframes radius {
  from {border-radius: 0px;}
  to {border-radius: 0 90px 90px 0;}
}
@keyframes span__three {
  from {border-width: 16px; width: 0px;}
  to {border-width: 16px; width: 90px;}
}
@keyframes span__four_1 {
  from {width: 0px;}
  to {width: 74px;}
}
@keyframes span__four_2 {
  from {width: 74px; left: 80px}
  to {width: 82px; left: 72px;}
}
@keyframes span__five {
  from {width: 0px;}
  to {width: 8px;}
}

/* Анимация монеты */
@keyframes spin {
  0% {
    border-left-width: 0;
    border-right-width: 0;
    width: 260px;
  }
  50% {
    border-left-width: 26px;
    border-right-width: 0;
    width: 0;
  }
  50.001% {
    border-left-width: 0;
    border-right-width: 26px;
  }
  100% {
    border-left-width: 0;
    border-right-width: 0;
    width: 260px;
  }
}

/* Блеск */
@keyframes shine {
  0% {
    top: -20%;
    left: -230%;
    opacity: 0;
    
  }
  50% {
    top: -50%;
    left: -50%;
    opacity: 1;
  }
  100% {
    top: -50%;
    left: -50%;
    opacity: 1;
  }
}
<input type="radio">
<div class="container">
<div class="coin">
  <div class="ruble">
    <span></span><span></span><span></span><span></span><span></span>
  </div>
</div>
</div>

→ Ссылка

licensed under cc by-sa 3.0 with attribution.