Концепция кнопки отправить

Разработка Концепция кнопки отправить

Нет прав для скачивания
Концепция кнопки отправить.
Пишем нашу разметку:
HTML:
  <body>
    <div class="wrapper">
      <div class="msg-box" id="msg">
        <div class="items items1">
          <i class="material-icons">camera_alt</i> <i class="mss">CAMERA</i>
        </div>
        <div class="items items2">
          <i class="material-icons">filter_none</i> <i class="mss">FILES</i>
        </div>
        <div class="items items3">
          <i class="material-icons">mic</i> <i class="mss">RECORD</i>
        </div>
        <div class="items items4">
          <i class="material-icons">chat_bubble_outline</i>
          <i class="mss">NEW EMAIL</i>
        </div>
      </div>
      <div class="button" id="btn">
        <div class="btn-wrapper">
          <span class="one btn" id="plus">+</span>
          <span class="two btn" id="sendmsg"
            ><i class="material-icons">send</i></span
          >
        </div>
        <div class="effect"></div>
      </div>
    </div>
  </body>
Пишем стиль:
CSS:
body {
  background: white;

  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

* {
  padding: 0;
  margin: 0;
}

.msg-box {
  border-radius: 50%;
  background: white;
  overflow: hidden;
  height: 20px;
  width: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transition: all 0.7s ease-in-out;
  transform: translate(-50%, -50%);
  will-change: contents;
  display: grid;
  grid-gap: 15px;
  color: rgb(75, 72, 72);
  box-sizing: border-box;
  padding: 10px;
}

i {
  transform: translateY(4px);
}

.wrapper {
  width: 400px;
  height: 400px;
  position: relative;
  box-shadow: 1px 4px 8px black;
  background: linear-gradient(to bottom right, #f3bcf0, #fa6c97);
}

.button {
  border-radius: 50%;
  background: white;
cursor:pointer;
  height: 50px;

  width: 50px;
  position: absolute;
  top: 50%;
  transition: all 0.5s cubic-bezier(0.63, 0.18, 0.83, 0.67);
  z-index: 3;
  left: 50%;
  font-size: 25px;
  font-weight: bolder;
  color: rgb(51, 48, 48);
  transform: translate(-50%, -50%);
  box-shadow: 4px 3px 4px rgba(48, 47, 47, 0.459);
}
.items:hover {
  color: black;
}
.btn-wrapper {
  width: 100%;
  height: 100%;
  position: relative;
}

span {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transition: all 1s;
}
i {
  font-weight: normal;
  font-style: normal;
}
.one {
  top: 100%;
  left: -130%;
  transition: top 0.5s, left 0.5s, transform 0.7s linear 0.1s;
  font-weight: bolder;
  font-size: 40px;
  transform: translate(-50%, -50%) rotate(0deg) scale(0);
  transform-origin: center;
}
.one-move {
  top: 50%;
  transition: top 1s, left 1s, transform 0.4s ease 0.5s;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg) scale(1);
}
.two {
  transform: translate(-50%, -50%) rotate(-45deg);
  transform-origin: center;
  transition: all 0.8s ease;
}

.send {
  top: 30%;
  left: 130%;
}
.move {
  left: 50%;
  transform: translate(-50%, -50%);
  top: 83%;
}
.resize {
  width: 200px;
  height: 200px;
  border-radius: 10px;
  box-shadow: 5px 2px 10px black;
}
i.mss {
  border-bottom: 1px solid gainsboro;
  margin-left: 5px;
  font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
  color: rgb(122, 119, 119);
  transform: translateY(15px);
  display: inline-block;
  opacity: 0;
  transition: all 0.5s ease-in-out 0.4s;
}
i.mss-show {
  opacity: 1;
  transform: translateY(0px);
}
.items {
  opacity: 0;
  transition: opacity 0.3s;
}
.itmshow {
  opacity: 1;
}
.btn-wrapper {
  overflow: hidden;
}
.effect {
  position: absolute;
  transform: translate(-50%, -50%) scale(0);
  top: 50%;
  left: 50%;
  border: 4px solid rgba(255, 255, 255, 0.37);
  height: 100%;
  border-radius: 50%;
  width: 100%;
  transition: opacity 0.5s ease 0.4s, transform 0.5s;
}
.effectshow {
  transform: translate(-50%, -50%) scale(1.3);
  opacity: 0;
}
И немного динамики:
JavaScript:
   let btnOne = document.getElementById("btn");
    let msg = document.getElementById("msg");
    let itms = document.getElementsByClassName("items");
    let snd = document.getElementById("sendmsg");
    let close = document.getElementById("plus");
    let dialogText = document.getElementsByClassName("mss");
    let effct = document.querySelector(".effect");
    console.log(dialogText);
    btnOne.addEventListener("click", function() {
      btnOne.classList.toggle("move");
      msg.classList.toggle("resize");
      snd.classList.toggle("send");
      close.classList.toggle("one-move");
      effct.classList.toggle("effectshow");
      for (let i = 0; i <= dialogText.length; i++) {
        dialogText[i].classList.toggle("mss-show");
        itms[i].classList.toggle("itmshow");
      }
    });
Смотрим наш результат:
fg21.gif
Автор
baltun
Скачиваний
0
Просмотры
610
Первый выпуск
Обновление
Рейтинг
0.00 звёзд Оценок: 0

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

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