PANDA WALKING ON THE SURFACE

Steps to follow

  1. Create html file or copy walk.html file
  2. Create css file or copy walk.css file
  3. Link them using code in html file

<link rel=”stylesheet” type=”text/css” href=”walk.css”>

walk.html

<html>
<head>
<title></title>
<link rel=”stylesheet” type=”text/css” href=”walk.css”>
</head>
<body>
<div class=”div_run”></div>
<hr style=”margin-top:-10px; height:10px;color:#fff;background:black;border:2px solid black;transform:skew(45deg);z-index:-1;”>
</body>
</html>

walk.css

body{background:#fff;height:70px;}
.div_run{background:url(panda_colour.png);
width:250px;height:335px;margin-top:253px;
margin-left:30px;
animation:walk 3s steps(12) infinite,forward 10s linear infinite;}
@keyframes walk{
0%{background-position:0px;}
100%{background-position:3000px;}
}
@keyframes forward{
0%{transform:translateX(-100px);}
100%{transform:translateX(1250px);}
}

Image of panda and image in png format

View of walking of panda

To follow my blog to click below

© WebCoder.com

Please follow me on social media pages : –

Facebook

Twitter

LinkedIn