From e1973def84218d7b9fcea299c6425ca7d7eb5456 Mon Sep 17 00:00:00 2001 From: Andrey Bejarano Date: Fri, 8 Jul 2022 00:11:55 -0300 Subject: [PATCH] clase 16 --- clase16/index.html | 21 ++++++++++++++++ clase16/styles.css | 61 ++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 82 insertions(+) create mode 100644 clase16/index.html create mode 100644 clase16/styles.css diff --git a/clase16/index.html b/clase16/index.html new file mode 100644 index 0000000..f0cd1e1 --- /dev/null +++ b/clase16/index.html @@ -0,0 +1,21 @@ + + + + + + + + Document + + + + +
+
+
+
+
+
+ + + \ No newline at end of file diff --git a/clase16/styles.css b/clase16/styles.css new file mode 100644 index 0000000..70c40eb --- /dev/null +++ b/clase16/styles.css @@ -0,0 +1,61 @@ +.container { + background-color: gray; + margin-top: 50px; + position: relative; + height: 1000px; + width: 500px; +} + +.box1, +.box2, +.box3{ + width: 200px; + height: 200px; +} + +.box1 { + left: 100px; + top: 100px; + position: relative; + background-color: red; + z-index: 1; +} +.box2 { + position: relative; + background-color: yellow; + z-index: 2; + transition: border-radius 1000ms cubic-bezier(0.35, 0.28, 0.6, 1.32); +} + +.box2:hover { + border-radius: 50%; +} + +.box3 { + position: absolute; + top: 0; + right: 0; + width: 200px; + background-color: blue; + animation: rotar 3s; +} +.box4 { + position: fixed; + background-color: green; + top: 0; + left: 0; + right: 0; + height: 100px; +} + +@keyframes rotar { + from { + width: 0; + height: 0; + } + to { + transform: rotate(360deg); + width: 200px; + height: 200px; + } +} \ No newline at end of file