HTML CSS

Сдвиг при наведении курсора мыши

Демо:

Описание

Для различных эффектов при наведении курсора мыши часто используются свойства CSS3. Их полноценно поддерживают только современные браузеры. Приведённый выше эффект не поддерживается в InternetExplorer. Поэтому в таких случаях желательно дублировать этот эффект, например, изменением цвета.

Скачать исходники этого примера:

Скачать исходник

HTML:


<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Сдвиг при наведении курсора</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>

<h1>Сдвиг при наведении курсора</h1>

<div class="dem">
  <div class="metka">
    <ul>
      <li><a href="" class="meta">Ссылка 1</a></li>
      <li><a href="" class="meta">Ссылка 2</a></li>
      <li><a href="" class="meta">Ссылка 3</a></li>
      <li><a href="" class="meta">Ссылка 4</a></li>
      <li><a href="" class="meta">Ссылка 5</a></li>
      <li><a href="" class="meta">Ссылка 6</a></li>
    </ul>
  </div>
</div>

</body>
</html>

CSS:


html,
body,
div,
h1,
h2,
h3,
p,
ul,
li,
a,
img {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

body {
  line-height: 1em;
  background: #F1F1F1;
}

html,
body {
  width:100%;
  font-family: "Open Sans", Tahoma, Geneva, sans-serif;
  color: #5C5C5C;
}

li {
  list-style: none;
}

h1 {
  font-size: 2em;
  line-height: 1em;
  text-align: center;
  margin: .5em .5em;
}

.metka {
  width: 160px;
  height: 220px;
  margin: 20px auto;
  background: #ADC0FF;
  border: solid 1px #9CC4E2;
  border-radius: 4px;
}

a.meta {
  display:block;
  position: relative;
  font-size: 1em;
  line-height: .7em;
  font-weight: bold;
  color: #fff;
  padding: 10px 30px 10px;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  -webkit-transition: all 0.5s ease-in-out;
}

a.meta:hover {
  -webkit-transform: translate(20px,0);
  -moz-transform: translate(20px,0);
  -o-transform: translate(20px,0);
  color: #FFFB09;
}

©   2017   0od.ru

Наверх