4 replies [Last post]
huyem93
huyem93's picture
Offline
newbie
Last seen: 9 years 6 weeks ago
Timezone: GMT+7
Joined: 2013-12-09
Posts: 6
Points: 9

Sad Hi ! everybody ! i'm new member ! i have a code with my ex ! hjhj! so i want to move the agry bird from the left to the right in my background ! how can i do it ?

huy.jpg
my code :

<!DOCTYPE html>
<html>
<head>
<style>
 
div
{
margin-top:2px;
margin-left:40px;
background-image:url('demo.png');
background-size:800x 300px;
background-repeat:no-repeat;
}
img
{
 
opacity:0.7;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
img:hover
{
opacity:1.0;
filter:alpha(opacity=100); /* For IE8 and earlier */
}
 
</style>
</head>
 
<body>
 
<div >
<img src="bird.png" alt="Smiley face" width="50" height="50">
</div>
 
</body>
</html>

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 4 days 2 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

Hi huyem93, Try

Hi huyem93,
Try this:

div
{
margin-top:2px;
margin-left:40px;
background-image:url('huy.jpg');
background-repeat:no-repeat;
background-position:0 0;
animation:angry 5s linear infinite;
-webkit-animation:angry 5s linear infinite; /* Safari and Chrome */
width:100%;
height:600px;
}
img
{
opacity:0.7;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
img:hover
{
opacity:1.0;
filter:alpha(opacity=100); /* For IE8 and earlier */
}
 
@keyframes angry{
0%   {background-position:0 0;}
100% {background-position:150% 0;}
}
@-webkit-keyframes angry{
0%   {background-position:0 0;}
100% {background-position:150% 0;}
}

huyem93
huyem93's picture
Offline
newbie
Last seen: 9 years 6 weeks ago
Timezone: GMT+7
Joined: 2013-12-09
Posts: 6
Points: 9

hj tony ! your code can't

hj tony ! your code can't move the angry bird ! it move the background

no.jpg

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 4 days 2 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

That's what I thought you

That's what I thought you wanted. The image provided contained the bird on a background.

Try this:

img
{
position:relative;
animation:angry 5s linear infinite;
-webkit-animation:angry 5s linear infinite; /* Safari and Chrome */
opacity:0.7;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
img:hover
{
opacity:1.0;
filter:alpha(opacity=100); /* For IE8 and earlier */
}
 
@keyframes angry{
0%   {left:0;}
100% {left:100%;}
}
@-webkit-keyframes angry{
0%   {left:0;}
100% {left:100%;}
}

huyem93
huyem93's picture
Offline
newbie
Last seen: 9 years 6 weeks ago
Timezone: GMT+7
Joined: 2013-12-09
Posts: 6
Points: 9

thanks tony ! i have do it !

thanks tony ! i have do it ! Smile