Форум

imedia · #1 (**permalink**) 03.04.2016, 10:37

Скажите пожалуйста как написать такую вот анимацию с использованием псевдоклассов.
При наведении на блок мыши появляется полоса вверху данного блока, то есть увеличивается от 0 до 10 px

Dilettante_Pro · #2 (**permalink**) 04.04.2016, 10:27

imedia,

<!DOCTYPE html >
<html>
<head>
<title></title>
<style type="text/css">
.target { 
      position: absolute;
      top: 50px;
      left: 100px;
      width: 200px;
      border-top: 0px solid red;
      background-color: Lime;
      -webkit-transition:border-top 0.5s ease;
      -moz-transition:border-top 0.5s linear;
      -o-transition:border-top 0.5s linear;
      transition:border-top 0.5s linear;
   }
   .target:hover
   { border-top: 10px solid red;  
   }
</style>
</head>
<body>
      <div class="target">Наведи сюда мьшь</div>
</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript