Inspired by 'Search' Concept by Oleg Frolov. Would love to make this snappier with the motion though. http://www.uplabs.com/posts/search-interface-inspiration
A Pen by Felice DeNigris on CodePen.
Created
March 9, 2016 05:06
-
-
Save felicedeNigris/c5b7abe016ba52f82c2a to your computer and use it in GitHub Desktop.
Search
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body | |
| .searchcontainer | |
| .ring | |
| .ring.spin | |
| .grip | |
| .gripblink | |
| h1 Inspired by 'Search' Concept by | |
| span | |
| a(href="https://dribbble.com/shots/2341287-Search") Oleg. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $diameter: 60px | |
| h1 | |
| position: absolute | |
| left: 100px | |
| top: 400px | |
| display: inline | |
| font-family: sans-serif | |
| color: white | |
| a | |
| color: white | |
| body | |
| background-color: rgba(57,171,251,1) | |
| margin-left: 0 | |
| margin-right: 0 | |
| margin-top: 30px | |
| padding: 0 | |
| .searchcontainer | |
| margin-left: auto | |
| margin-right: auto | |
| margin-top: 0 | |
| transform: translateY(50%) | |
| width: 300px | |
| height: 300px | |
| position: relative | |
| .ring | |
| position: absolute | |
| border: solid 10px white | |
| opacity: .5 | |
| width: $diameter | |
| height: $diameter | |
| display: block | |
| margin: auto | |
| border-radius: 50% | |
| animation: blink 4s infinite | |
| @keyframes blink | |
| 45% | |
| opacity: .5 | |
| //at 2 seconds turns full opacity | |
| 50% | |
| opacity: 1 | |
| 99% | |
| opacity: 1 | |
| // at 4 seconds turns half opacity | |
| 100% | |
| opacity: .5 | |
| .spin | |
| opacity: 1 | |
| margin: 0 | |
| padding: 0 | |
| position: absolute | |
| border-radius: 50% | |
| border-color: white | |
| border-width: 10px | |
| animation: spin 2s infinite | |
| @keyframes spin | |
| 0% | |
| -webkit-clip-path: polygon(45% 49%, 58% 48%, 100% 100%, 79% 100%) | |
| transform: rotate(-10deg) | |
| 8% | |
| -webkit-clip-path: polygon(45% 49%, 58% 48%, 100% 100%, 79% 100%) | |
| transform: rotate(-10deg) | |
| 12% | |
| transform: rotate(35deg) | |
| 16% | |
| -webkit-clip-path: polygon(49% 50%, 50% 51%, 95% 100%, 81% 100%) | |
| transform: rotate(130deg) | |
| 20% | |
| transform: rotate(183deg) | |
| 24% | |
| transform: rotate(230deg) | |
| -webkit-clip-path: polygon(49% 50%, 50% 51%, 95% 100%, 60% 100%) | |
| 28% | |
| transform: rotate(279deg) | |
| 32% | |
| transform: rotate(300deg) | |
| -webkit-clip-path: polygon(49% 50%, 50% 51%, 95% 100%, 60% 100%) | |
| 36% | |
| transform: rotate(347deg) | |
| -webkit-clip-path: polygon(49% 50%, 50% 51%, 95% 100%, 47% 100%) | |
| 40% | |
| transform: rotate(356deg) | |
| 44% | |
| transform: rotate(383deg) | |
| 48% | |
| transform: rotate(400deg) | |
| -webkit-clip-path: polygon(49% 50%, 50% 51%, 95% 100%, 31% 100%) | |
| 52% | |
| transform: rotate(430deg) | |
| 56% | |
| transform: rotate(460deg) | |
| -webkit-clip-path: polygon(49% 50%, 50% 51%, 95% 100%, 15% 100%) | |
| 60% | |
| transform: rotate(495deg) | |
| 64% | |
| transform: rotate(536deg) | |
| -webkit-clip-path: polygon(49% 50%, 50% 51%, 100% 100%, 0 100%) | |
| 68% | |
| transform: rotate(558deg) | |
| 72% | |
| transform: rotate(622deg) | |
| -webkit-clip-path: polygon(49% 50%, 50% 51%, 100% 100%, 0 100%) | |
| 76% | |
| transform: rotate(674deg) | |
| 82% | |
| transform: rotate(730deg) | |
| -webkit-clip-path: polygon(53% 55%, 54% 57%, 59% 63%, 100% 81%, 100% 100%, 46% 100%, 0 100%, 0% 70%, 0% 35%, 50% 60%) | |
| 86% | |
| transform: rotate(784deg) | |
| 90% | |
| transform: rotate(820deg) | |
| -webkit-clip-path: polygon(14% 0, 49% 46%, 100% 54%, 100% 70%, 100% 100%, 50% 100%, 0 100%, 0% 70%, 0% 35%, 0 0) | |
| 94% | |
| transform: rotate(860deg) | |
| -webkit-clip-path: polygon(74% 0, 49% 46%, 100% 48%, 100% 70%, 100% 100%, 50% 100%, 0 100%, 0% 70%, 0% 35%, 0 0) | |
| 98% | |
| transform: rotate(1080deg) | |
| -webkit-clip-path: polygon(74% 0, 100% 0, 100% 48%, 100% 70%, 100% 100%, 50% 100%, 0 100%, 0% 70%, 0% 35%, 0 0) | |
| 100% | |
| -webkit-clip-path: polygon(74% 0, 100% 0, 100% 48%, 100% 70%, 100% 100%, 50% 100%, 0 100%, 0% 70%, 0% 35%, 0 0) | |
| .gripblink | |
| position: relative | |
| width: 14px | |
| height: 45px | |
| background-color: #39abfb | |
| display: block | |
| margin: auto | |
| transform: rotate(130deg) | |
| position: absolute | |
| bottom: 197px | |
| left: 80px | |
| animation: blueblink 4s infinite | |
| @keyframes blueblink | |
| 45% | |
| opacity: 1 | |
| //at 2 seconds turns full opacity | |
| 50% | |
| opacity: 0 | |
| 99% | |
| opacity: 0 | |
| // at 4 seconds turns half opacity | |
| 100% | |
| opacity: 1 | |
| .grip | |
| width: 10px | |
| height: 40px | |
| background-color: white | |
| display: block | |
| margin: auto | |
| transform: rotate(130deg) | |
| position: absolute | |
| bottom: 201px | |
| left: 80px | |
| animation: popout 2s infinite | |
| animation-timing-function: cubic-bezier(0.06, 1.35, 1, 1.1) | |
| @keyframes popout | |
| 0% | |
| //scale to zero | |
| -webkit-clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%) | |
| 25% | |
| -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%) | |
| 50% | |
| -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%) | |
| 80% | |
| -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%) | |
| 100% | |
| -webkit-clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%) | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment