Пыльца сосны Россия
Инструкция
Все нюансы сборки, переработки, заготовки и применения.
-- Купить пыльцу высшего качества --

CSS翻转块

Сергей Кутузов

最初的效果,吸引了访客的注意力,并没有破坏页面的外观 — 一个块移位器。

当您将鼠标光标悬停在它上面时将其转为。 试一试,将鼠标悬停在我的照片上。

同意,如果访客把光标放在这样一个元素上,他突然复活了,那么它肯定会引起他的注意。

可以插入到html块中的超链接,背景图像和所有内容都可以轻松插入到此博客中。

代码:

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Документ без названия</title>
<style>
.perspective--100 {
perspective: 100px;
-webkit-perspective: 100px;
-ms-perspective: 100px;
}

.otcrytka {
display: block;
text-align: center;
width: 150px;
height: 150px;
color: #fff;
background-color: rgb(55,124,255);
font-size: 20px;
line-height: 250px;
background-image: url(images/sk1.jpg);
border-radius: 7px;
box-shadow: inset 0 0 0 3px #705E5F;
-webkit-transition: transform 3s;
-ms-transition: transform 3s;
transition: transform 3s;

}

.otcrytka:hover {
-webkit-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
transform: rotateY(180deg);
}

</style>
</head>
<body>

<div class="perspective"><a href="https://starper55plys.ru/">
<span class="otcrytka">
Sergei Kutuzov
< /span></a>
    </div>
</body>
</html>

根据主题设置,移位器的设计可能仍然需要纠正,也许不是。

祝你创造性的成功。

Запись опубликована в рубрике 免费网站脚本. Добавьте в закладки постоянную ссылку.
А так же:

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *