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

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s