ЛПР № 20 Додавання до HTML-документів зображення.
Анімаційні ефекти.
Створити сторінку за посиланням www.w3schools.com/html/tryit.asp?filename=tryhtml_default
Приклад 1 Задати зміну кольорів протягом 4 ск.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Анімація example </title>
<style type = "text/css">
div {
width: 200px;
height: 50px;
background-color: red;
-webkit-animation-name: example;
-webkit-animation-duration: 4s;
animation-name: example;
animation-duration: 4s;
}
@keyframes example {
0% {background-color: red;}
25% {background-color: yellow;}
50% {background-color: blue;}
100% {background-color: green;}
}
</style>
</head>
<body>
<div>Я люблю Україну</div>
</body>
</html>
Приклад 2 мінений радіус фігури (border-radius) - таким чином можна отримати коло, чи еліпс. Цей атрибут може визначати форму фігури за параметрами округлення окремих кутів, наприклад border-radius:50% 0 0 0; означає, що округлений буде лише 1 верхній лівий кут.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Блокова верстка в три колонки</title>
<style type = "text/css">
div {
width: 100px;
height: 100px;
background-color: red;
-webkit-animation-name: example;
-webkit-animation-duration: 4s;
animation-name: example;
animation-duration: 4s;
border-radius: 50%;
text-align:center;
position: relative;
}
@keyframes example {
0% { background-color: red; left: 0px; top: 0px;}
25% { background-color: yellow; left: 200px; top: 0px; border-radius: 50% 0 0 0;}
50% { background-color: blue; left: 200px; top: 100px; border-radius: 50% 50% 0 0}
75% { background-color: green; left: 0px; top: 100px; border-radius: 50% 50% 50% 0}
100% { background-color: red; left: 0px; top: 0px;}
}
</style>
</head>
<body>
<div>Я<br /> люблю<br /> Україну</div>
</body>
</html>
Приклад 3 Трансформація
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Блокова верстка в три колонки</title>
<style type = "text/css">
div {
width: 60px;
height: 60px;
background-color: red;
animation-name: example;
animation-duration: 4s;
border-radius: 50%;
text-align:center;
}
@keyframes example {
50% {transform: rotate(360deg)
}
</style>
</head>
<body>
<div>Я<br /> люблю<br /> Україну</div>
</body>
</html>