Home Explore Help
Register Sign In
LenDoc
/
homework
Watch 1
Star 0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

homework the animation in css #3

LenDoc 2 years ago
parent
4bd751c684
commit
83e039ab5a
2 changed files with 112 additions and 0 deletions
Split View Show Diff Stats
  1. 31 0
      css3/index.html
  2. 81 0
      css3/style.css

+ 31 - 0
css3/index.html
View File 

@@ -0,0 +1,31 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <link rel="stylesheet" href="style.css">
 
+    <title>CSS Animation practise</title>
 
+</head>
 
+
 
+<body>
 
+
 
+    <div class="square"> </div>
 
+    <div class="wrapper">
 
+        <div class="menu">
 
+            <a href="#" class="menu-btn"></a>
 
+            <nav class="menu-list">
 
+
 
+                <a href="#"> Главная </a>
 
+
 
+                <a href="#"> Новости </a>
 
+
 
+                <a href="#"> Контакты </a>
 
+            </nav>
 
+        </div>
 
+
 
+    </div>
 
+</body>
 
+
 
+</html>

+ 81 - 0
css3/style.css
View File 

@@ -0,0 +1,81 @@
 
+.wrapper {
 
+    overflow-x: hidden;
 
+    -o-transition: all 0.5s ease-in-out;
 
+    -moz-transition: all 0.5s ease-in-out;
 
+    -webkit-transition: all 0.5s ease-in-out;
 
+    transition: all 0.5s ease-in-out;
 
+}
 
+
 
+.menu {
 
+    margin-top: 230px;
 
+    width: 20%;
 
+    height: 50vh;
 
+    background: rgb(245, 142, 104);
 
+    justify-content: center;
 
+    align-items: center;
 
+    transition: 1s;
 
+    cursor: pointer;
 
+    transform: translateX(-90%);
 
+}
 
+
 
+.menu:hover {
 
+    transform: translateX(0%);
 
+    transition: 2s;
 
+    background: rgb(192, 81, 40);
 
+}
 
+
 
+.menu-list {
 
+    display: flex;
 
+    justify-content: space-around;
 
+    align-items: center;
 
+    height: 50%;
 
+    flex-direction: column;
 
+}
 
+
 
+.menu-list a {
 
+    font-weight: 900;
 
+    text-decoration: none;
 
+    text-transform: uppercase;
 
+    color: white;
 
+}
 
+
 
+.menu-list a:hover {
 
+    color: yellow;
 
+}
 
+
 
+@keyframes bouncing {
 
+    0% {
 
+        transform: translateY(0)
 
+    }
 
+    25% {
 
+        transform: translateY(200px)
 
+    }
 
+    50% {
 
+        transform: translate(200px, 200px)
 
+    }
 
+    75% {
 
+        transform: translate(200px, 0px)
 
+    }
 
+}
 
+
 
+@keyframes change_color {
 
+    0% {
 
+        background: rgba(255, 0, 0, 0.925)
 
+    }
 
+    25% {
 
+        background: rgba(17, 0, 255, 0.5)
 
+    }
 
+    50% {
 
+        background: rgba(21, 255, 0, 0.5)
 
+    }
 
+    75% {
 
+        background: rgba(255, 208, 0, 0.938)
 
+    }
 
+}
 
+
 
+.square {
 
+    width: 100px;
 
+    height: 100px;
 
+    background: rgb(167, 47, 47);
 
+    animation: bouncing 2s cubic-bezier(0.5, 0.5, 0.5, 0.5) 2s infinite, change_color 2s cubic-bezier(0.5, 0.5, 0.5, 0.5) 2s infinite;
 
+}