<div>
<div>
<span class="x-swipe-indicator">
<i class="x-hand fa fa-hand-pointer-o"></i>
</span>
</div>
<div class="x-swipe-msg">Swipe</div>
<div>
body {
margin: 0;
}
.x-hand {
color:#000;
font-size:4em;
height:100px;
left:calc(50% - 22px);
opacity:.8;
position:absolute;
top:calc(50% - 5px);
transform-origin:bottom;
width:100px;
}
.x-swipe-msg{
position: absolute;
top: calc(50% - 30px);
left : 40%;
font-family:'Verdana';
font-weight : bold;
}
.x-swipe-indicator {
position: absolute;
top: calc(50% - 60px);
width: 60px;
height: 60px;
border-radius: 50%;
border: 5px dotted transparent;
animation: swipe-animation 2s linear infinite;
}
@keyframes swipe-animation {
0% {
left: 10px;
border-color: #bbb;
}
50% {
left: 400px;
}
100% {
left: 10px;
}
}
This Pen doesn't use any external JavaScript resources.