CSS - настраиваемая пишущая головка для текстового поля - PullRequest
Новая
       77

CSS - настраиваемая пишущая головка для текстового поля

1 голос
/ 14 апреля 2020

Я много исследовал, но до сих пор не понимаю, как я мог сделать что-то вроде этого:

https://dribbble.com/shots/4605344-Search-icon-interaction

Совершенно нет идеи, как ни отредактировать голову, ни оживить ее ... Я буду очень рад за ответ! 100

1 Ответ

1 голос
/ 14 апреля 2020

Это займет у вас 2 минуты, чтобы найти его в Google code:

https://codepen.io/n7best/pen/qYzQzv

// concept Search icon interaction https://dribbble.com/shots/4605344-Search-icon-interaction
$('.search').click(() => $('.input').focus())

// demo
setTimeout(() => {
  $('.input').focus();
}, 500)

setTimeout(() => {
  $('.input').blur();
}, 2500)
html, body {
  height: 100%;
}

body {
  background: #C2B9FF;
  overflow: hidden;
}

.search {
  width: 80%;
  position: absolute;
  right: -30%;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  height: 150px;
  border-radius: 20px;
  background: #6c59ff;
  border: none;
  box-shadow: -12px 20px 55px rgba(134, 119, 255, 0.6);
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  cursor: text;
}

.input {
  caret-color: transparent;
  font-size: 100px;
  padding-left: 20px;
  color: #fff;
  outline: none;
  position: relative;
  font-family: 'Pacifico', cursive;
}
.input::after {
  content: '';
  background: #fff;
  width: 6px;
  height: 100%;
  border-radius: 5px;
  position: absolute;
  right: -40px;
  opacity: 0;
}
.input:focus::after {
  -webkit-animation: PulseAttention 1.5s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1) forwards infinite;
          animation: PulseAttention 1.5s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1) forwards infinite;
}
.input:focus ~ .cursor {
  -webkit-transform: rotateY(-90deg) rotateZ(75deg);
          transform: rotateY(-90deg) rotateZ(75deg);
}

.input:empty ~ .cursor {
  -webkit-perspective: 1000px;
          perspective: 1000px;
  -webkit-transition: all .5s;
  transition: all .5s;
  -webkit-transform-origin: center center;
          transform-origin: center center;
}
.input:empty ~ .cursor::after {
  color: #fff;
  content: '\f002';
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  text-decoration: inherit;
  font-size: 80px;
}

@-webkit-keyframes PulseAttention {
  50% {
    opacity: 1;
  }
}

@keyframes PulseAttention {
  50% {
    opacity: 1;
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="search">
  <span class="input" contenteditable="true"></span>
  <span class="cursor"></span>
</div>
...