HTML
<!doctype html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>наша первая Web-страница</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="description" content="Описание нашей первой Web-страницы." />
<meta name="keywords" content="web-страница, первая web-страницаб html" />
<link type="text/css" rel="stylesheet" href="css/main15_1.css">
</head>
<body>
<div>
<a href="#">Link</a>
</div>
<div class="block"></div>
<div class="block_1"></div>
</body>
</html>
CSS:
a {
color: #00c;
font-size: 200%;
transition-property: color;
transition-duration: 0.8s;
}
a:hover {
color: #c00;
}
.block {
background: #ccc;
height: 300px;
width: 30%;
transition-property: width; /* здесь указываем к какому свойству применяется переход */
transition-duration: 0.8s; /* длительность */
transition-timing-function: ease; /* эффект */
}
.block:hover {
width: 100%;
}
/* АНИМАЦИЯ */
.block_1 {
background-color: #000;
height: 300px;
width: 300px;
}
.block_1:hover {
animation-name: bc;
animation-duration: 3s;
animation-timing-function: ease-in;
}
@keyframes bc {
0% {
background-color: #000;
}
30% {
background-color: #555;
}
70% {
background-color: #999;
}
100% {
background-color: #fff;
}
}
}
ТРАНСФОРМАЦИЯ
HTML
<!doctype html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>наша первая Web-страница</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="description" content="Описание нашей первой Web-страницы." />
<meta name="keywords" content="web-страница, первая web-страницаб html" />
<link type="text/css" rel="stylesheet" href="css/main15_2.css">
</head>
<body>
<div class="t_1"></div>
<div class="t_2"></div>
<div class="t_3"></div>
<br><br><br><br><br>
<hr>
<div class="t_5"></div>
</body>
</html>
CSS
div {
background: linear-gradient(180deg, #c00, #0c0);
height: 300px;
width: 500px;
}
.t_1 {
transform: rotate(50deg); /* поворот */
transform-origin: center top; /* относительно какого места блока идет поворот*/
}
.t_2 {
transform: scaleX(2); /* изменение масштаба */
}
.t_3 {
transform: skew(30deg); /* скашивание */
}
.t_5 {
transition-duration: 1s;
}
.t_5:hover {
transform: rotate(-200deg);
}
<!doctype html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>наша первая Web-страница</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="description" content="Описание нашей первой Web-страницы." />
<meta name="keywords" content="web-страница, первая web-страницаб html" />
<link type="text/css" rel="stylesheet" href="css/main15_1.css">
</head>
<body>
<div>
<a href="#">Link</a>
</div>
<div class="block"></div>
<div class="block_1"></div>
</body>
</html>
CSS:
a {
color: #00c;
font-size: 200%;
transition-property: color;
transition-duration: 0.8s;
}
a:hover {
color: #c00;
}
.block {
background: #ccc;
height: 300px;
width: 30%;
transition-property: width; /* здесь указываем к какому свойству применяется переход */
transition-duration: 0.8s; /* длительность */
transition-timing-function: ease; /* эффект */
}
.block:hover {
width: 100%;
}
/* АНИМАЦИЯ */
.block_1 {
background-color: #000;
height: 300px;
width: 300px;
}
.block_1:hover {
animation-name: bc;
animation-duration: 3s;
animation-timing-function: ease-in;
}
@keyframes bc {
0% {
background-color: #000;
}
30% {
background-color: #555;
}
70% {
background-color: #999;
}
100% {
background-color: #fff;
}
}
}
ТРАНСФОРМАЦИЯ
HTML
<!doctype html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>наша первая Web-страница</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="description" content="Описание нашей первой Web-страницы." />
<meta name="keywords" content="web-страница, первая web-страницаб html" />
<link type="text/css" rel="stylesheet" href="css/main15_2.css">
</head>
<body>
<div class="t_1"></div>
<div class="t_2"></div>
<div class="t_3"></div>
<br><br><br><br><br>
<hr>
<div class="t_5"></div>
</body>
</html>
CSS
div {
background: linear-gradient(180deg, #c00, #0c0);
height: 300px;
width: 500px;
}
.t_1 {
transform: rotate(50deg); /* поворот */
transform-origin: center top; /* относительно какого места блока идет поворот*/
}
.t_2 {
transform: scaleX(2); /* изменение масштаба */
}
.t_3 {
transform: skew(30deg); /* скашивание */
}
.t_5 {
transition-duration: 1s;
}
.t_5:hover {
transform: rotate(-200deg);
}
Комментариев нет:
Отправить комментарий