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.
body | |
.searchcontainer | |
.ring | |
.ring.spin | |
.grip | |
.gripblink | |
h1 Inspired by 'Search' Concept by | |
span | |
a(href="https://dribbble.com/shots/2341287-Search") Oleg. |
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.
$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%) | |