[Front-End] CSS 簡易動畫--animation_rollimage
利用animation屬性與keyframes製作簡易的動畫。
範例code：
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#banner{
position:relative;
width:800px;
height:168px;
margin:0px auto;
overflow:hidden;
outline: 1px solid gray;
}
#bannerText{
position:absolute;
right:15px;
top:8px;
font-family:Arial;
font-style:italic;
font-size:20px;
color:darkblue;
}
#bannerImage {
position:relative;
width:1800px;
height:168px;
background-image:url("cloud.jpg");
background-repeat:repeat-x;
animation:rollImage linear 12s infinite;
}
@keyframes rollImage{
from{right:0px;}
to{right:300px}
}
</style>
</head>
<body>
<div id="banner">
<div id="bannerImage"></div>
<div id="bannerText">Rolling Clouds(Right to left)</div>
</div>
</body>
</html>
如要使圖片反向捲動，可在animation屬性後方加上reverse，即可使圖片反向捲動。
範例code：
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#banner{
position:relative;
width:800px;
height:168px;
margin:0px auto;
overflow:hidden;
outline: 1px solid gray;
}
#bannerText{
position:absolute;
right:15px;
top:8px;
font-family:Arial;
font-style:italic;
font-size:20px;
color:darkblue;
}
#bannerImage {
position:relative;
width:1800px;
height:168px;
background-image:url("cloud.jpg");
background-repeat:repeat-x;
animation:rollImage linear 12s infinite;
}
@keyframes rollImage{
from{right:0px;}
to{right:300px}
}
</style>
</head>
<body>
<div id="banner">
<div id="bannerImage"></div>
<div id="bannerText">Rolling Clouds(Right to left)</div>
</div>
</body>
</html>
如要使圖片反向捲動，可在animation屬性後方加上reverse，即可使圖片反向捲動。
留言
張貼留言