Created
April 4, 2016 22:53
-
-
Save pouwerkerk/05948c8a69fcbd56661b67d38ec6248c to your computer and use it in GitHub Desktop.
Pulsar
This file contains 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
<?xml version="1.0" encoding="UTF-8" standalone="no"?> | |
<svg width="164px" height="209px" viewBox="0 0 164 209" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> | |
<!-- Generator: Sketch 3.6.1 (26313) - http://www.bohemiancoding.com/sketch --> | |
<title>arrow</title> | |
<desc>Created with Sketch.</desc> | |
<defs> | |
<linearGradient x1="50%" y1="100%" x2="50%" y2="0%" id="linearGradient-1"> | |
<stop stop-color="#0096FF" offset="0%"></stop> | |
<stop stop-color="#0078CC" offset="100%"></stop> | |
</linearGradient> | |
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-2"> | |
<stop stop-color="#0C9BFF" offset="0%"></stop> | |
<stop stop-color="#A0D8FF" offset="100%"></stop> | |
</linearGradient> | |
<filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-3"> | |
<feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetInner1"></feOffset> | |
<feGaussianBlur stdDeviation="5.5" in="shadowOffsetInner1" result="shadowBlurInner1"></feGaussianBlur> | |
<feComposite in="shadowBlurInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite> | |
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.035 0" in="shadowInnerInner1" type="matrix" result="shadowMatrixInner1"></feColorMatrix> | |
<feMerge> | |
<feMergeNode in="SourceGraphic"></feMergeNode> | |
<feMergeNode in="shadowMatrixInner1"></feMergeNode> | |
</feMerge> | |
</filter> | |
<linearGradient x1="50%" y1="100%" x2="50%" y2="0%" id="linearGradient-4"> | |
<stop stop-color="#0073C4" offset="0%"></stop> | |
<stop stop-color="#0078CC" offset="100%"></stop> | |
</linearGradient> | |
</defs> | |
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> | |
<g id="Artboard-1" transform="translate(-14.000000, -17.000000)"> | |
<g id="arrow" transform="translate(14.000000, 17.000000)"> | |
<path d="M160.458505,113 L164,129 L0,129 L3.54149512,113 L160.458505,113 Z" id="Rectangle-8" fill="url(#linearGradient-1)"></path> | |
<path d="M112.851485,129 L112.851485,8 L51.1485149,8 L51.1485149,129 L0,129 L82,209 L164,129 L112.851485,129 Z" id="Combined-Shape" stroke-opacity="0.25" stroke="#FFFFFF" fill="url(#linearGradient-2)" filter="url(#filter-3)"></path> | |
<path d="M111.370527,0 L112.70297,8 L51,8 L52.3324437,0 L111.370527,0 Z" id="Rectangle-8" fill="url(#linearGradient-4)"></path> | |
</g> | |
</g> | |
</g> | |
</svg> |
This file contains 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
<style> | |
.press-here { | |
position: relative; | |
left: 90px; | |
top: -80px; | |
width: 164px; | |
margin: 100pt auto; | |
} | |
.arrow { | |
-webkit-animation: mover 2s infinite alternate; | |
animation: mover 2s infinite alternate; | |
position: relative; | |
top: 0; | |
left: 0; | |
width: 164px; | |
z-index: 2; | |
} | |
.shadow { | |
position: absolute; | |
top: 135px; | |
width: 164px; | |
z-index: 1; | |
-webkit-animation: pulser 2s infinite alternate; | |
animation: pulser 2s infinite alternate; | |
} | |
.demo { | |
background: url("https://www.dropbox.com/s/pz0tbv6zji9cvbf/dash-outline.png?dl=0"); | |
width: 387px; | |
z-index: 0; | |
} | |
@-webkit-keyframes mover { | |
0% { transform: translateY(0); } | |
100% { transform: translateY(-20px); } | |
} | |
@keyframes mover { | |
0% { transform: translateY(0); } | |
100% { transform: translateY(-20px); } | |
} | |
@-webkit-keyframes pulser { | |
0% { opacity: translateY(0); } | |
100% { opacity: translateY(-20px); } | |
} | |
@keyframes pulser { | |
0% { opacity: 1; } | |
100% { opacity: 0.25; } | |
} | |
</style> | |
<div class="demo"> | |
<div class="press-here"> | |
<img class="arrow" src="arrow.svg"/> | |
<img class="shadow" src="shadow.svg"/> | |
</div> | |
</div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment