• Для скачивания ресурсов Форума пользователь должен написать не менее 5 полезных сообщений и получить 5 симпатий.
    Если Вы не хотите выполнять условия, Вы должны купить переход в группу "Работяга" или любое наше дополнение и сможете скачивать ресурсы, перевод происходит по email, который указывается при оплате.
Оригинальное оформление подписки пользователей

Разработка Оригинальное оформление подписки пользователей

Нет прав для скачивания
Оригинальное оформление подписки пользователей на веб сайте.
Собираем скелет из HTML:
HTML:
<div class="frame">
    <input type="checkbox" id="cb">
    <label for="cb" class="button">Send mail</label>
    <label for="cb" class="button reset">Reset</label>
    <div class="circle"></div>
    <div class="circle-outer"></div>
    <svg class="icon mail">
        <polyline points="119,1 119,69 1,69 1,1"></polyline>
        <polyline points="119,1 60,45 1,1 119,1"></polyline>
    </svg>
    <svg class="icon plane">
        <polyline points="119,1 1,59 106,80 119,1"></polyline>
        <polyline points="119,1 40,67 43,105 69,73"></polyline>
    </svg>
</div>
Пишем оформление:
SCSS:
@import url(https://fonts.googleapis.com/css?family=Open+Sans:600);
body {
    background: #201c29;
}

.frame {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  height: 400px;
  margin-top: -200px;
  margin-left: -200px;
  border-radius: 2px;
  box-shadow: .5rem .5rem 1rem rgba(0, 0, 0, 0.6);
  background: #643a7a;
  font-family: 'Open Sans', Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden;
}

.circle, .circle-outer {
  position: absolute;
  width: 200px;
  height: 200px;
  top: 65px;
  left: 100px;
  background-image: linear-gradient(fade-out(#a846a8, .3), fade-out(#a846a8, .3)), url("https://i.pinimg.com/564x/9c/ce/d3/9cced3264a1e7b144467f506923ebb0b.jpg");
  border-radius: 50%;
    background-size: cover;
    background-repeat: no-repeat;
    transition: .5s ease-in;
}

.circle-outer {
  box-sizing: border-box;
  background: none;
  border: 4px solid #e6e6e6;
    box-shadow: .5rem .5rem 1rem rgba(0, 0, 0, .5);
}

.icon {
  position: absolute;
  z-index: 2;
  top: 130px;
  left: 140px;
  transform: translate3d(0, 0, 0);
  fill: none;
  stroke-width: 4px;
  stroke: #fff;
  stroke-dasharray: 325 325;
}

.icon.mail {
  width: 120px;
  height: 70px;
  stroke-dashoffset: 0;
    transition: .3s ease;
}

.icon.plane {
  width: 120px;
  height: 110px;
  stroke-dashoffset: 325;
}

#cb {
  display: none;
}

.button {
  position: absolute;
  width: 200px;
  height: 40px;
    top: 80%;
    left: 50%;
    transform: translate(-50%, -20%);
  border: 3px solid #ecf0f1;
  color: #ecf0f1;
  text-align: center;
  line-height: 40px;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 1.1rem;
  cursor: pointer;
    transition: .3s ease-in;
    z-index: 10;
    &:hover {
        background: #a846a8;
        color: #fff;
        border-radius: 20px;
    }
}

.button.reset {
  opacity: 0;
  z-index: 5;
}

#cb:checked ~ .button {
          animation: button 1s ease-in-out 1.7s;
          animation-fill-mode: both;
}

#cb:checked ~ .reset {
          animation: reset 1s ease-in-out 3s;
          animation-fill-mode: both;
    transition: .3s;
}

#cb:checked ~ .circle, #cb:checked ~ .circle-outer {
          animation: circle 1s ease-in-out;
          animation-fill-mode: both;
}

#cb:checked ~ .circle-outer {
          animation: circle .8s ease-in-out .2s;
          animation-fill-mode: both;
}

#cb:checked ~ .mail {
  stroke-dashoffset: 326;
  transition: stroke-dashoffset 1s ease-in-out;
}

#cb:checked ~ .plane {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset .5s ease-in-out .6s;
          animation: fly 2.4s ease-in-out;
          animation-fill-mode: both;
}

@keyframes fly {
  0%, 50% {
            transform: translate3d(0, 0, 0) scale(1);
  }
  60% {
            transform: translate3d(-10px, 5px, 0) scale(1.05);
  }
  70% {
    opacity: 1;
  }
  85% {
    opacity: 0;
  }
  100% {
            transform: translate3d(300px, -150px, 0) scale(0.4);
    opacity: 0;
  }
}

@keyframes circle {
  0% {
            transform: translate3d(0, 0, 0) scale(1);
  }
  20% {
            transform: scale(1.1);
  }
  100% {
            transform: scale(0);
  }
}

@keyframes button {
  0% {
    width: 50%;
  }
    50% {
        opacity: 0;
    }
  100% {
    width: 0;
    color: transparent;
        opacity: 0;
  }
}

@keyframes reset {
  from {
    opacity: 0;
        width: 0;
        color: transparent;
  }
  to {
    opacity: 1;
        width: 50%;
  }
}
Смотрим наш результат:
dr1.gif
  • Мне нравится
Реакции: hacker
Автор
baltun
Скачиваний
0
Просмотры
451
Первый выпуск
Обновление
Рейтинг
0.00 звёзд Оценок: 0

Ещё ресурсы от baltun

Похожие ресурсы
Верх Низ