この画像を右から左に表示するには？Webページの読み込み時にイメージを右から左へロールする方法は？
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