如何將此圖片從右向左滾動？如何在網頁加載時從右向左滾動圖像？
img{
position:absolute;
top:50px;
right:5px;
width:100px;
height:100px;
border-radius:50%;
background:#ff00ff;
}<img src="http://cdn.wallpapersafari.com/15/28/zMTLik.jpg" style="height:100px; width:100px;"/>可以使用關鍵幀動畫的結合做到這一點。下面的工作代碼。
#circle {
display: block;
width: 100px;
height: 100px;
background: red;
border-radius: 50%;
overflow:hidden;
/* Animation to spin and move the sphere */
-webkit-animation: spin 1000ms linear infinite, moveLeftToRight 5s linear infinite;
-moz-animation: spin 1000ms linear infinite, moveLeftToRight 5s linear infinite;
-ms-animation: spin 1000ms linear infinite, moveLeftToRight 5s linear infinite;
animation: spin 1000ms linear infinite, moveLeftToRight 5s linear infinite;
-webkit-transition: all 1s ease;
transition: all 1s ease;
position: absolute;
left: 0;
}
/* Spinning the sphere using key frames */
@keyframes spin {
from { transform: rotate3d(0, 1, 0, 0deg); }
to { transform: rotate3d(0, 1, 0, 180deg); }
}
/* Move sphere from left to right */
@keyframes moveLeftToRight {
0% { left: 0; }
100% { left: 100%; }
}<div id="circle">
<img src="http://cdn.wallpapersafari.com/15/28/zMTLik.jpg" style="height:100px; width:100px;"/>
</div>我的建議是：
#rotate {
position:absolute;
width: 100px;
height: 100px;
top:50px;
right:5px;
background: url(http://cdn.wallpapersafari.com/15/28/zMTLik.jpg);
border-radius: 50%;
overflow: visible;
background-size: 210px;
box-shadow: inset 16px 0 40px 6px rgb(0, 0, 0),
inset -3px 0 6px 2px rgba(255, 255, 255, 0.2);
animation-name: rotate;
animation-duration: 10s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes rotate {
from { background-position-x: 0px; right:5px; }
to { background-position-x: 210px; right:100%; }
}<div id="rotate">檢查了這一點：
<!DOCTYPE html>
<html>
<head>
<style>
img {
width: 100px;
height: 100px;
position :relative;
border-radius:50px;
-webkit-animation: mymove 5s infinite; /* Chrome, Safari, Opera */
animation: mymove 5s infinite;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
0% {left: 80%;}
100% {left: 0%;}
}
/* Standard syntax */
@keyframes mymove {
0% {left:80%;}
50% {left: 0%;}
100% {left: 80%;}
}
</style>
</head>
<body>
<img src="http://cdn.wallpapersafari.com/15/28/zMTLik.jpg" style="height:100px; width:100px;"/>
<div style="clear:both;"></div>
</body>
</html>檢查這個片段在CSS3 @keyframes排除
img{
position:absolute;
top:50px;
right:80%;
width:100px;
height:100px;
border-radius:50%;
transition-duration:1s;
animation:animate 3s;
}
@keyframes animate{
from{
transform:rotate(0deg);
}
to{
transform:rotate(-500deg);
}
from{
right:5px;
}
to{
right:80%;
}
}<img src="http://cdn.wallpapersafari.com/15/28/zMTLik.jpg" style="height:100px; width:100px;"/>不錯，但滾動後左圖固定。 –
非常感謝 –
你能描述一下你的意思嗎？ –
下面的答案几乎沒有迴應，而且問題還沒有澄清，所以我認爲這應該被擱置爲「不清楚」。 – halfer