logo

Трансформация «Дверной глазок»

«Дверной глазок»

Приподнимаем заслонку дверного глазка наводя курсор, а под ней находится ссылка на скачивание. Код каждого из представленных ниже глазков одинаков. Разница состоит в том, что для каждого из вариантов используются различные фоновые изображения и значения некоторых свойств. Различия выделены соответственно разными цветами. Эти значения изменяют местонахождение оси поворота, направление и угол поворота заслонки.


<div class="spyhole ">
  <div class="spyhole__info">
    <a href="#" class="spyhole__link">Скачать</a>
  </div>
  <div class="spyhole__thumb spyhole__bg"></div>
</div>

.spyhole {
    width: 190px;
    height: 190px;
    border-radius: 50%;
    position: relative;
    text-align: center;
    box-shadow: 1px 1px 7px rgba(0, 0, 0, 1)
}
.spyhole__thumb {
    width: 190px;
    height: 190px;
    border-radius: 50%;
    overflow: hidden;
    position: absolute;
    box-shadow: inset 0 0 0 15px rgba(255, 255, 255, 0.5);
    transform-origin: 95% 40%;
    transform-origin: 5% 40%;
    transform-origin: 50% 4%;
    transition: all .3s ease-in-out
}
.spyhole__thumb:after {
    content: '';
    width: 8px;
    height: 8px;
    position: absolute;
    border-radius: 50%;
    top: 40%;left: 95%;
    top: 40%;left: 5%;
    top: 4%;left: 50%;
    margin: -4px 0 0 -4px;
    background: #0e0e0e;
    background: radial-gradient(ellipse at center, rgba(14, 14, 14, 1) 0, rgba(125, 126, 125, 1) 100%);
    box-shadow: 0 0 1px rgba(255, 255, 255, 0.9)
}
.spyhole__bg {
    background-image: url(images/img1.jpg);
}
.spyhole__info {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    background: #c9512e url(images/img2.jpg);
    box-shadow: inset 0 0 0 5px rgba(0, 0, 0, 0.05);
}
.spyhole__link {
    font-size: 20px;
    line-height: 150px;
    text-decoration: none;
    color: #7297e0;
    font-style: italic;
    letter-spacing: 4px;
    text-shadow: 0 0 0 #5277c0, 1px 0 0 #3459a2, 2px 0 0 #163b84, 3px 0 2px rgba(0, 0, 0, 0.25), 3px 0 1px rgba(0, 0, 0, 0.5), 0 0 2px rgba(0, 0, 0, .2);
}
.spyhole__link:hover {
    text-decoration: underline;
}
.spyhole:hover .spyhole__thumb {
    box-shadow: inset 0 0 0 15px rgba(255, 255, 255, 0.5), 0 1px 3px rgba(0, 0, 0, 0.2);
    transform: rotate(110deg;)
    transform: rotate(-110deg);
    transform: rotate(150deg);
}

Практические примеры 0

Рекомендую прочитать...

Как изменить цвет изображения
как изменить цвет изображения

Как! Во многих интернет магазинах присутствует такая штука: цвет товара меняет свой цвет. Т.е. при клике на один из представленных цветов товар, как правило, это одежда, автомашина, чехлы для телефона или сам телефон меняет свою цветовую окраску. Со стороны кажется, что товар как бы заливается выбранным цветом, или приобретает тот орнамент ( часто представлены при […]

Читать полностью
Свойство text-shadow
Свойство text-shadow

Свойство text-shadow позволяет видоизменить внешний вид текста . Его применяют для того, чтобы выделить какую-то часть текста (или слово) . Обычное использование для заголовков, ссылок — текста на который следует обратить внимание. Да и просто наличие тени у слова красиво смотрится.

Читать полностью
Анимированный логотип на чистом CSS
Анимированный логотип

Если вы посмотрите на логотип, он состоит из 4 основных цветных точек. Эти точки расширяются и принимают вид скругленных линий, затем сжимаются, принимая первоначальный вид.

Они также перекрещиваясь, перекрывают друг друга, да и весь логотип установлен под углом. При этом цвета в местах пересечения линий смешиваются, но об этом в конце статьи.

Читать полностью

Всего комментариев: 0

Оставить комментарий

Ваш email не будет опубликован.