Вебтехнології

Виконати практичне завдання № 1
Виконати практичне завдання № 2
Виконати практичне завдання № 3
Виконати інтерактивну вправу № 1
Виконати інтерактивну вправу № 2

Практичне завдання № 1. Керуючись інструкціями, створіть анімацію кнопок меню.

Результат виконання практичного завдання № 1

HTML код веб сторінки INDEX.HTML

<!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 створити нову веб сторінку index.html
Завантажити її у редактор коду та ввести цей код
Зберегти та переглянути результат .

У папці сайт22-1 створити папку CSS
У папці CSS створимо файл style.css
Завантажити її у редактор коду та ввести наступний код
Зберегти та переглянути .

Таблиця стилей для файлу style.css

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. Керуючись інструкціями, створіть анімацію кнопок меню.

HTML код веб сторінки INDEX.HTML

<!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="http://nkpetl.org.ua"> <span> </span> <span> </span> <span> </span> <span> </span> Кнопка </a></body>

Результат виконання практичного завдання 2

У папці сайт22-2 створити папку CSS
У папці CSS створимо файл style.css
Завантажити її у редактор коду та ввести наступний код
Зберегти та переглянути .

Таблиця стилей для файлу style.css

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%); } }

Практичне завдання № 3. Керуючись інструкціями, створіть анімацію на CSS.

HTML код веб сторінки INDEX.HTML

<!DOCTYPE html><html lang="ru"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="style.css">
<title>Орбіта луни на CSS3</title> </head> <body> <img src="images/earth.png" alt="ЗЕМЛЯ" class="earth"> <img src="images/moon2.png" alt="ЛУНА" class="moon"> </body></html>

У папці сайт-22-3 створити нову веб сторінку index.html
Завантажити її у редактор коду та ввести цей код
Зберегти та переглянути результат .

У папці сайт-22-3 створити папку CSS
У папці CSS створимо файл style.css
Завантажити її у редактор коду та ввести наступний код
Зберегти та переглянути .

Таблиця стилей для файлу style.css

html, body{height: 100%;}body{ margin: 0; padding: 0; font: 1em sans-serif; background: url(images/cosmos.jpg); background-size: cover }.earth{ width: 300px; padding: 100px; position: relative; z-index: 1;}.moon{ position: absolute; top: 170px; left: 170px; animation: linear 5s orbita infinite; z-index: 0;}@keyframes orbita{ 0%{width: 72px;} 24%{z-index: 0;} 25% {left: 380px; top: 130px; z-index: 2;} 50%{width: 128px;} 74%{z-index: 2;} 75%{top: 300px; left: 40px; z-index: 0;} 100%{width: 72px; transform: rotate(360deg);}}

Заготівки для виконання практичного завдання №3