Анімаційні ефекти
Анімаційні ефекти
Embedded Files
Виконати практичне завдання № 1
Виконати практичне завдання № 2
Виконати інтерактивну вправу № 1
Анімаційні ефекти можна створювати або виключно засобами каскадних таблиць стилів, або ж за допомогою JavaScript.
Практичне завдання 1. Створити анімацію кнопок
Практичне завдання 1. Створити анімацію кнопок
Результат виконання практичного завдання 1
HTML код веб сторінки INDEX.HTML
HTML код веб сторінки INDEX.HTML
У папці сайт22 створити нову веб сторінку index.html
Завантажити її у редактор коду https://jsfiddle.net та ввести цей код https://docs.google.com/document/d/1b8yF_rGWEViogj4ZBMpfBIfwT_Nr0Xp3zq0d1rveang/edit?usp=sharing
Зберегти та переглянути результат .
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/style.css" type="text/css">
<title>CSS knopka</title>
</head>
<body>
<div class="container">
<button class="btn btn1"> ТИСНИ ТУТ </button>
<button class="btn btn2"> ТИСНИ ТУТ </button>
<button class="btn btn3"> ТИСНИ ТУТ </button>
<button class="btn btn4"> ТИСНИ ТУТ </button>
</div>
</body>
У папці сайт22 створити папку CSS
У папці CSS створимо файл style.css
Завантажити її у редактор коду https://jsfiddle.net/ та ввести наступний код https://docs.google.com/document/d/1dlCQhkodSBVgZ6o1PoEvYLHZMZFf8tzvWKH9oam9WFo/edit?usp=sharing
Зберегти та переглянути . /// Натиснути RUN, щоб переглянути результат у області перегляду та Save, щоб згенерувати URL адресу вебсторінки 1. Прозвітувати посиланням
body {
margin: 0;
padding: 0;
}
.container{
text-align: center;
margin-top: 360px;
}
.btn{
border: 1px solid #5499C7;
background: none;
padding: 10px 20px;
font-size: 20px;
font-family: "montserrat";
cursor: pointer;
transition: 0.8s;
position: relative;
overflow: hidden;
}
.btn1,.btn2{
color: #5499C7;
}
.btn3,.btn4{
color: #fff;
}
.btn1:hover,.btn2:hover{
color: #fff;
}
.btn3:hover,.btn4:hover{
color: #5499C7;
}
.btn::before{
content: "";
position: absolute;
left: 0;
width: 100%;
height: 0%;
background: #5499C7;
z-index: -1;
transition: 0.8s;
}
.btn1::before,.btn3::before{
top: 0;
border-radius: 0 0 50% 50%;
}
.btn2::before,.btn4::before{
bottom: 0;
border-radius: 50% 50% 0 0;
}
.btn3::before,.btn4::before{
height: 180%;
}
.btn1:hover::before,.btn2:hover::before{
height: 180%;
}
.btn3:hover::before,.btn4:hover::before{
height: 0%;
}
Практичне завдання 2. Створити анімацію кнопки
Практичне завдання 2. Створити анімацію кнопки
Результат виконання практичного завдання 2
HTML код веб сторінки INDEX.HTML
HTML код веб сторінки INDEX.HTML
У папці сайт22-1 створити нову веб сторінку index1.html
Завантажити її у редактор коду https://jsfiddle.net та ввести цей код https://docs.google.com/document/d/13qUohkrAVoRgEJp6X-0hBWEybyxFkwdiZJ-5ohZ7ZnU/edit?usp=sharing
Зберегти та переглянути результат .
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/style.css" type="text/css">
<title>CSS knopka2</title>
</head>
<body>
<a href="ТУТ повинно бути посилання на сайт вашого навчального закладу">
<span> </span>
<span> </span>
<span> </span>
<span> </span>
Кнопка
</a>
</body>
У папці сайт22-1 створити папку CSS
У папці CSS створимо файл style.css
Завантажити її у редактор коду https://jsfiddle.net/ та ввести наступний код https://docs.google.com/document/d/1hp6JU7BrbwNCPc_St5IvcaW2gN7IvNM62UQ1aepAnqE/edit?usp=sharing
У HTML код (уважно переглянь) додати у відповідний рядок гіперпосилання на сайт вашого навчального закладу
Зберегти та переглянути . /// Натиснути RUN, щоб переглянути результат у області перегляду та Save, щоб згенерувати URL адресу вебсторінки 2. Прозвітувати посиланням
body {
margin: 0;
padding: 0;
background: #0c002b;
font-family: sans-serif;
}
a {
position: absolute;
top: 50%;
left: 50%;
transform: translate (-50%,-50%);
color: #1670f0;
padding: 30px 60px;
font-size: 30px;
letter-spacing: 2px;
text-transform: uppercase;
text-decoration: none;
box-shadow: 0 20px 50px rgba(0,0,0,.5);
overflow: hidden;
}
a:before
{
content: "";
position: absolute;
top: 2px;
left: 2px;
bottom: 2px;
width: 50%;
background: rgba(255,255,255,0.05);
}
a span:nth-child(1)
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 2px;
background: linear-gradient(to right, #0c002b, #1779ff);
animation: animate1 2s linear infinite;
animation-delay: 1s;
}
@keyframes animate1
{
0%
{
transform: translatex(-100%);
}
100%
{
transform: translatex(100%);
}
}
a span:nth-child(2)
{
position: absolute;
top: 0;
right: 0;
width: 2px;
height: 100%;
background: linear-gradient(to bottom, #0c002b, #1779ff);
animation: animate2 2s linear infinite;
animation-delay: 1s;
}
@keyframes animate2
{
0%
{
transform: translatey(-100%);
}
100%
{
transform: translatey(100%);
}
}
a span:nth-child(3)
{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 2px;
background: linear-gradient(to left, #0c002b, #1779ff);
animation: animate3 2s linear infinite;
animation-delay: 1s;
}
@keyframes animate3
{
0%
{
transform: translatex(100%);
}
100%
{
transform: translatex(-100%);
}
}
a span:nth-child(4)
{
position: absolute;
top: 0;
left: 0;
width: 2px;
height: 100%;
background: linear-gradient(to top, #0c002b, #1779ff);
animation: animate4 2s linear infinite;
animation-delay: 1s;
}
@keyframes animate4
{
0%
{
transform: translatey(100%);
}
100%
{
transform: translatey(-100%);
}
}
Домашнє завдання
Домашнє завдання
У коментарях написати, які CSS - використовувались у практичних завданнях уроку, щоб краще зоорієнтуватись, які властивості існують перегляньте вебконспект попереднього уроку https://docs.google.com/presentation/d/1eqg_96j8DmEy3IdPSuc_54TlEvTL_5IW/edit?usp=sharing&ouid=115116610745302428441&rtpof=true&sd=true
У коментарях написати, які CSS - використовувались у практичних завданнях уроку, щоб краще зоорієнтуватись, які властивості існують перегляньте вебконспект попереднього уроку https://docs.google.com/presentation/d/1eqg_96j8DmEy3IdPSuc_54TlEvTL_5IW/edit?usp=sharing&ouid=115116610745302428441&rtpof=true&sd=true
Page updated
Google Sites
Report abuse