1

codepen

.container {
  margin: 20px 0 0 50px;
  width: 500px;
  position: relative;
}

.container:hover .circle {
  animation-name: anim;
  animation-duration: 0.5s;
  animation-fill-mode: forwards
}

.container:hover .title {
  color: #fff;
}

.circle {
  display: inline-block;
  position: absolute;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: blue;
}

.title {
  margin-left: 130px;
}

@keyframes anim {
  0 {
    border-radius: 50%;
  }
  1% {
    border-radius: 50px 45px 45px 50px;
  }
  100% {
    width: 100%;
    border-radius: 50px 3px 3px 50px;
  }
}
<div class="container">
  <div class="circle"></div>
  <div class="title">
    <h2>МОИ ДОМЕНЫ</h2>
    <p>размещение/редактирование размещения/удаление</p>
  </div>
</div>

Подскажите как сделать чтобы текст отображался поверх анимации, как здесь

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

4 ответа 4

2

.container {
  margin: 20px 0 0 50px;
  width: 500px;
  height: 100px;
  position: relative;
}

.container:hover .circle {
  width: 100%;
  border-radius: 50px 3px 3px 50px;
}

.container:hover .title {
  color: #fff;
}

.circle {
  position: absolute;
  width: 100px;
  height: 100px;
  border-radius: 50px;
  background-color: blue;
  transition: all .5s linear 0s;
}

.title {
  margin-left: 130px;
  z-index: 1;
  position: absolute;
}
<div class="container">
  <div class="circle"></div>
  <div class="title">
    <h2>МОИ ДОМЕНЫ</h2>
    <p>размещение/редактирование размещения/удаление</p>
  </div>
</div>

2
  • Попробуй без анимации через переход, как альтернативный вариант.
    – Dhunga
    2 ноя 2017 в 1:24
  • Еще небольшой вопрос, не подскажешь как центрировать иконку в круге, что бы она не уезжала при расширении блока?
    – kost1k
    2 ноя 2017 в 16:32
1

Размести слой выше

.title {
    position: absolute;
    z-index: 1;
    margin-left: 130px;
}
1

.container {
  margin: 20px 0 0 50px;
  width: 500px;
  height: 100px;
  position: relative;
}

.container:hover .circle {
  width: 100%;
  border-radius: 50px 3px 3px 50px;
}

.container:hover .title {
  color: #fff;
}

.circle {
  position: absolute;
  width: 100px;
  height: 100px;
  border-radius: 50px;
  background-color: blue;
  transition: all .5s linear 0s;
}

.circle .img {
  max-width: 100%;
  display: block;
  position: relative;
  top: 10px;
  left: .8rem;
}

.title {
  margin-left: 130px;
  z-index: 1;
  position: absolute;
}
<div class="container">
  <div class="circle">
    <img class="img" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAMAAABiM0N1AAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAClUExURUdwTNOGAD0iGgCahV52RLWGIz0iGj8kHACxmQObhACahUUnGC1LPgCahQCahd2ZBz0iGu6fANiIAD0iGuiYAOeXAOucAOSUAOCbAj6SW9ODAF4+M//JHf+/CgC1nQC4oGNDNwC9o//FFv+5Av3CFFc5LwKzmU8yJ2tJO+eYAOaxHPGkAPiwAgSljI1pNNOjIXpXKp58JuCRADw9PsWXJlJLOW+cSdLCGrMAAAAbdFJOUwD80kER/a/+uv10lCfcpS1u32ZHhkXYw5XRdo2WTKQAAAQ4SURBVFjD1ZhpY6IwEIaLEKkK4m13EaUYQO6jtP//p+1MOBYVJfhp9+UoDOThzUw47NvbfyVJWS9mY6bZYq1IL2KUxXgktzQaL5RXMDOkuLaumyBdt11kzYaipAVgXGBcGgENWKPFoA5KsxJjXioSbpglajaAJI1l2WYYs0Q0JNOW5bEyxI9tstzcYNDUAE8L4OhmowpTknT0tODjrEfI0RtL9aoEQf3k0ZozQa6OallqMIzkymOezq2xY8ipPZktDrsCdI7HUm2o7ekaxGdJwQzZJUdvmSr39MqSq3CUDG+LK1QzlRTdhttlwdMz29Yb3VBKFIDGPD3Da9ae7mQzS/JI4aiZbZdZsrswOh7mqBumiJEubOy1esk2zUsJ6k/SjIH0OPGTgmRxmqbl7Q8bcUYKCMc6A824QDE9VKJ+rSYS2y4HCIvm6snhiRKuso0QlNJnIJqioxEPKDs8VcYLsovnoMLmA7kmJtYvCEn8dns/IaRgh0yXzxGkiBJW9riV9SRm44BQTFI/CKoGKbJI9Q5KwYHF5qQaUBeCSeqvGpafACjOClDMLFmlobhIiiKLiXUgHOXHAZkcLBiHWRoX1LdAB1xZPi3iNPMptQ5J/4DENxHkGtrGX19f34mFm2wFnr4hFFPY9U25D6QRV07Rho+tvjKrpQwj3+xgKrtEewpaCZmc0j4QTeVMWD0F/RbylIFo/A1K2qACIzE7mKa58LvHkUcydq6fgKhFW8IIM0Qz4vU42gq5lyOIEa4wzS4cg5OE7fOq7XMvMCg12gDjehcCgZfve95sKyEHkGHBDBOuw8ALvLDcr6cg7+kZWNoIXggAONtgKxp6oNDAGMxsCT1h0/uqlVa70DAqCmsXBkHJqWLUCHcrnq+IVXCurly1blQ5Ogcrru8jrbZUCR7814Fwp/F9aW2YpRpDYhDx/0bOwYbz009bhsa5muDpQfDhESdNKFxyGoIbhVmC5exnRXgGgS+fBTD3vIZwWAbnUn5whqIFAdtCQcf2Az60tV2AbVjDECzhYpSRYKe9DdB2WXu6UbDcDvsxAqTwHhMO5gBpf08Kg/1gDuRpA6ZarBDsbLS3V7T9WMJtVikIlh/btxclaR/weGLy8g/tpZ+ikihOp/P5L8GrJPyaz6dTURxCU8TpXFUnTDUoFyYR7qvqfMoHUwACDaIocpzjKYJneAWKTkfHiZCmvvezRKQA4/hZyiEAQlZOnDJyAhrA3qdSL8Y5ff7VT2kpF35awSOy1IcoaareUNBSJuQgIXOu40dAvYvdnDm4OX3egD6dn4yQ7OeagyeBK3XazUE7JzyrPUELEESvguyPM5l0kKbI6RS26VYXSVQnDzhPdHQm6m2eoGNdZ9bzI1J0a0lRYezc61TPDzVRrweBOImOLymaiLegLkdHp5oeyOkEvaQ70Pz9Rc3Ff/Ufe38ALWg6T1nv0qoAAAAASUVORK5CYII=">
  </div>
  <div class="title">
    <h2>МОИ ДОМЕНЫ</h2>
    <p>размещение/редактирование размещения/удаление</p>
  </div>
</div>

1
  • Уточни какой формат иконки ? символ, .img, .ico, шрифт_иконки.
    – Dhunga
    2 ноя 2017 в 19:41
1

.container {
  margin: 20px 0 0 50px;
  width: 500px;
  height: 100px;
  position: relative;
}

.container:hover .circle {
  width: 100%;
  border-radius: 50px 3px 3px 50px;
}

.container:hover .title {
  color: #fff;
}

.circle {
  position: absolute;
  width: 100px;
  height: 100px;
  border-radius: 50px;
  background-color: blue;
  transition: all .5s linear 0s;
  font: normal 4rem/1.6 sans-serif;
  color: hsla(0, 0%, 80%, 1);
  text-shadow: 0px 0px 1px hsla(0, 0%, 0%, .4);
  text-align: left;
  text-indent: 4%;
}

.title {
  margin-left: 130px;
  z-index: 1;
  position: absolute;
}
<div class="container">
  <div class="circle">&phone;</div>
  <div class="title">
    <h2>МОИ ДОМЕНЫ</h2>
    <p>размещение/редактирование размещения/удаление</p>
  </div>
</div>

1

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.