Mon, 2013-12-09 16:13
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 ?
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>
Mon, 2013-12-09 22:42
#1
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;} }
Tue, 2013-12-10 02:26
#2
hj tony ! your code can't
hj tony ! your code can't move the angry bird ! it move the background
Tue, 2013-12-10 03:14
#3
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%;} }
Tue, 2013-12-10 03:29
#4
thanks tony ! i have do it !
thanks tony ! i have do it ! 