Question

如何从右向左滚动此图像？

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;"/>

Answer 1

在CSS3 @keyframes规则

中检查此代码段

＆＃13;

<!--Default Surveys-->
    <div class="data-stone">
        <div ng-repeat="survey in vm.defaultSurveys">
            <div class="chart2">
                <div class="chart-wrapper">
                    <div class="chart-header">
                        <h4>{{survey.title}}</h4>
                    </div>
                    <div class="chart-table">
                        <!--NUMBER OF USERS-->
                        <div class="chart-row">
                            <div class="chart-data-header chart-cell half-stand">
                                <label>NUMBER OF USERS</label>
                            </div>
                            <div class="chart-data-header chart-cell blankspace"></div>
                            <div class="chart-data-header chart-cell half-game">
                                <label>NUMBER OF USERS</label>
                            </div>
                        </div>
                        <!--ACCEPTED-->
                        <div class="chart-row">
                            <div class="chart-cell data-line">
                                <div class="pill sea">{{survey.accepted}}</div>
                            </div>
                            <div class="chart-cell data-line short-line-cell">
                                <div class="short-line"></div>
                            </div>
                            <div class="chart-cell data-line definition">
                                <label class="data-sea">ACCEPTED</label>
                            </div>
                            <div class="chart-cell data-line short-line-cell">
                                <div class="short-line"></div>
                            </div>
                            <div class="chart-cell data-line">
                                <div class="pill sea">{{survey.accepted}}</div>
                            </div>
                        </div>
                        <!--blank space-->
                        <div class="chart-row">
                            <div class="chart-cell data-line">
                                <div class="blank-divisor"></div>
                            </div>
                        </div>
                        <!---->
                        <!--DECLINED-->
                        <div class="chart-row">
                            <div class="chart-cell data-line">
                                <div class="pill forest">{{survey.declined}}</div>
                            </div>
                            <div class="chart-cell data-line short-line-cell">
                                <div class="short-line"></div>
                            </div>
                            <div class="chart-cell data-line definition">
                                <label class="data-forest">DECLINED</label>
                            </div>
                            <div class="chart-cell data-line short-line-cell">
                                <div class="short-line"></div>
                            </div>
                            <div class="chart-cell data-line">
                                <div class="pill forest">{{survey.declined}}</div>
                            </div>
                        </div>
                        <!--blank space-->
                        <div class="chart-row">
                            <div class="chart-cell data-line">
                                <div class="blank-divisor"></div>
                            </div>
                        </div>
                        <!---->
                        <!--TOTAL-->
                        <div class="chart-row">
                            <div class="chart-cell data-line">
                                <div class="pill water">{{survey.accepted + survey.declined}}</div>
                            </div>
                            <div class="chart-cell data-line short-line-cell">
                                <div class="short-line"></div>
                            </div>
                            <div class="chart-cell data-line definition">
                                <label class="data-night">TOTAL</label>
                            </div>
                            <div class="chart-cell data-line short-line-cell">
                                <div class="short-line"></div>
                            </div>
                            <div class="chart-cell data-line">
                                <div class="pill water">{{survey.accepted + survey.declined}}</div>
                            </div>
                        </div>
                        <!--CAKE CHARTS-->
                        <div class="chart-row space-recurrent">
                            <div class="chart-cell data-line cake-enclose">
                                <div class="cake">
                                    <div ac-chart="'pie'" ac-data="survey.chartData" ac-config="vm.config" class="cake"  height="120" width="120"></div>
                                </div>
                            </div>
                            <div class="chart-cell data-line porct">
                                <div class="cake-data">
                                    <div class="cake-subrow">
                                        <label class="data-sea">{{survey.accepted*100/(survey.accepted + survey.declined) | number:0}}%</label>
                                        <div class="mini-pill sea"></div>
                                        <label class="data-sea">{{survey.accepted*100/(survey.accepted + survey.declined) | number:0}}%</label>
                                    </div>
                                    <div class="cake-subrow">
                                        <label class="data-forest">{{survey.declined*100/(survey.accepted + survey.declined) | number:0}}%</label>
                                        <div class="mini-pill forest"></div>
                                        <label class="data-sea">{{survey.declined*100/(survey.accepted + survey.declined) | number:0}}%</label>
                                    </div>
                                </div>
                            </div>
                            <div class="chart-cell data-line cake-enclose">
                                <div class="cake">
                                    <div ac-chart="'pie'" ac-data="survey.chartData" ac-config="vm.config" class="cake" style="width: 120px; height: 120px"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="background"></div>
            </div>
            <div class="chart-divisor"></div>
        </div>
    </div>

＆＃13;

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%;
  }
}

＆＃13;

Answer 2

您可以使用关键帧动画的组合来完成此操作。下面的工作代码。

#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>

Answer 3

我的建议是：

旋转地球（background-position-x）
从右向左移动（右）

#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">

Answer 4

检查出来：

<!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>

如何在网页加载时从右向左滚动图像？

4 个答案: