diff --git a/index.html b/index.html index 846cf93..14d5168 100644 --- a/index.html +++ b/index.html @@ -6,7 +6,18 @@ - + + +
+
+ +

Содержимое модального окна

+
+
Loading...
+
Loading...
+
+
+
\ No newline at end of file diff --git a/index.js b/index.js index dd50919..237509d 100644 --- a/index.js +++ b/index.js @@ -1,7 +1,9 @@ -/* - Изменить элементу цвет и ширину можно вот так: +const element = document.querySelector('.red'); - const element = document.querySelector('.myElement'); - element.style.color = 'red'; - element.style.width = '300px'; -*/ \ No newline at end of file +let a = 100; +let fps = 60; +let b = setInterval(() => { + element.style.clipPath = "inset(0 " + Math.min(100, a) + "% 0 0)" + a -= 100 / fps / 3; +}, 1000 / fps); +setTimeout(() => clearInterval(b), 3000); \ No newline at end of file diff --git a/styles.css b/styles.css index e69de29..a1c37af 100644 --- a/styles.css +++ b/styles.css @@ -0,0 +1,59 @@ +img { + width: 100px; + height: 100px; +} + +.lightbox { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(0, 0, 0, 0.5); + display: flex; + justify-content: center; + align-items: center; +} + +.lightcontent { + width: 640px; + background: white; + position: relative; + padding: 20px; +} + +.lightbutton { + position: absolute; + top: 10px; + right: 10px; + background: none; + border: none; + font-size: 20px; + cursor: pointer; +} + +.progress { + background-color: grey; + width: 640px; + height: 20px; + position: relative; +} + +.grey { + position: absolute; + width: 100%; + text-align: center; + z-index: 1; + color: black; +} + +.red { + text-align: center; + position: absolute; + background-color: red; + clip-path: inset(0 0% 0 0);; + height: 100%; + z-index: 2; + width: 100%; + color: white; +} \ No newline at end of file