diff --git a/100_projects/96-pagination-glassmorphism-animated/index.html b/100_projects/96-pagination-glassmorphism-animated/index.html new file mode 100644 index 0000000..0d41c6d --- /dev/null +++ b/100_projects/96-pagination-glassmorphism-animated/index.html @@ -0,0 +1,52 @@ + + + + + + + + Document + + +
+
+

Glassmorphism

+
+ + +
+ + \ No newline at end of file diff --git a/100_projects/96-pagination-glassmorphism-animated/pexels-photo-247431.jpeg b/100_projects/96-pagination-glassmorphism-animated/pexels-photo-247431.jpeg new file mode 100644 index 0000000..456b221 Binary files /dev/null and b/100_projects/96-pagination-glassmorphism-animated/pexels-photo-247431.jpeg differ diff --git a/100_projects/96-pagination-glassmorphism-animated/style.css b/100_projects/96-pagination-glassmorphism-animated/style.css new file mode 100644 index 0000000..e87b829 --- /dev/null +++ b/100_projects/96-pagination-glassmorphism-animated/style.css @@ -0,0 +1,161 @@ +* { + margin: 0; + padding: 0; + font-family: sans-serif; +} +.container { + position: relative; + height: 100vh; + width: 100%; + background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), + url("pexels-photo-247431.jpeg"); + background-size: cover; + background-position: center; + display: flex; + align-items: center; + justify-content: center; +} +.container .pagination { + position: relative; + height: 60px; + background: rgba(255, 255, 255, 0.05); + box-shadow: 5px 5px 30px rgba(0, 0, 0, 0.3); + display: flex; + align-items: center; + justify-content: center; + backdrop-filter: blur(3px); + border-radius: 2px; + z-index: 9; +} +.container .pagination li { + list-style-type: none; + display: inline-block; +} +.container .pagination li a { + position: relative; + padding: 20px; + text-decoration: none; + color: #fff; + font-weight: 500; + transition: .3s; +} +.container .pagination li a:hover, +.container .pagination li.active a { + background: rgba(255, 255, 255, 0.2); +} +/**/ +.context { + width: 100%; + position: absolute; + top:10vh; + z-index: 9; +} +.context h1{ + text-align: center; + color: rgba(255,255,255,0.5); + font-border: 1px solid rgba(255, 255, 255, 0.1); + font-size: 50px; + backdrop-filter: blur(50px); +} +.circles{ + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + overflow: hidden; + z-index: 1; +} +.circles li{ + position: absolute; + display: block; + list-style: none; + width: 20px; + height: 20px; + background: rgba(255, 255, 255, 0.1); + box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.2); + backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(10px); + border-radius: 80px; + border: 1px solid rgba(255, 255, 255, 0.18); + animation: animate 25s linear infinite; + bottom: -150px; +} +.circles li:nth-child(1){ + left: 25%; + width: 80px; + height: 80px; + animation-delay: 0s; +} +.circles li:nth-child(2){ + left: 10%; + width: 20px; + height: 20px; + animation-delay: 2s; + animation-duration: 12s; +} +.circles li:nth-child(3){ + left: 70%; + width: 20px; + height: 20px; + animation-delay: 4s; +} +.circles li:nth-child(4){ + left: 40%; + width: 60px; + height: 60px; + animation-delay: 0s; + animation-duration: 18s; +} +.circles li:nth-child(5){ + left: 65%; + width: 20px; + height: 20px; + animation-delay: 0s; +} +.circles li:nth-child(6){ + left: 75%; + width: 110px; + height: 110px; + animation-delay: 3s; +} +.circles li:nth-child(7){ + left: 35%; + width: 150px; + height: 150px; + animation-delay: 7s; +} +.circles li:nth-child(8){ + left: 50%; + width: 25px; + height: 25px; + animation-delay: 15s; + animation-duration: 45s; +} +.circles li:nth-child(9){ + left: 20%; + width: 15px; + height: 15px; + animation-delay: 2s; + animation-duration: 35s; +} +.circles li:nth-child(10){ + left: 85%; + width: 150px; + height: 150px; + animation-delay: 0s; + animation-duration: 11s; +} +@keyframes animate { + + 0%{ + transform: translateY(0) rotate(0deg); + opacity: 1; + border-radius: 0; + } + 100%{ + transform: translateY(-1000px) rotate(720deg); + opacity: 0; + border-radius: 50%; + } +} \ No newline at end of file