我一直在浏览网页很长一段时间,试图找到一种方法,当你加载页面时,图标移动到屏幕上(从左侧和身体div的中心)。 如何才能做到这一点?

这是我到目前为止:

CSS3

a#rotator {
    text-decoration: none;
    padding-right: 20px;
    margin-left: 20px;
    float: left;
}

a#rotator img {
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out; 
    -o-transition: all 1s ease-in-out; 
    -ms-transition: all 1s ease-in-out; 
    border-radius:60px;
    transition-duration: 1s;
    }

a#rotator img:hover { 
    box-shadow: 0 3px 15px #000;
    -webkit-transform: rotate(360deg); 
    -moz-transform: rotate(360deg); 
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg); 
    transform: translate()
}

===============>>#1 票数:7 已采纳

如果您想要纯CSS解决方案,可以使用CSS3动画功能。 您可以创建或声明一个动画,其中包含关键字@animation后跟您要为该动画指定的名称。 在花括号内,您必须指明动画的关键帧以及将在该关键帧中应用的CSS属性,以便完成关键帧之间的转换。 您必须使用关键字fromto指定至少两个关键帧,动画的开头和结尾,然后是大括号内的属性。 例如:

@keyframes myanimation
{
    from {
        left: 0;
    }
    to {
        left: 50%;
    }
}

或者有三个关键帧的示例(百分比表示持续时间的百分比):

@keyframes myanimation
{
    0% {
        left: 0;
    }
    10% {
        left: 50%;
    }
    100% {
        left: 10%;
    }
}

一旦创建了动画,就必须指定要设置动画的元素,它只是CSS规则中与元素匹配的animation属性。 请注意,值中的名称必须与您之前创建的名称相匹配,并且您必须与动画的持续时间相匹配。 例如:

a#rotator {
    animation: myanimation 5s;
}

在这里,您可以指定持续时间,必须重复的次数等。您可以在此处阅读完整规范: http//www.w3.org/TR/css3-animations/

在这里,您可以看到一个包含您提供的代码的工作示例: http//jsfiddle.net/mcSL7/1/

我已停止浮动元素并且我已将其分配给绝对位置,因此我可以使用顶部和左侧属性将其移动到正文中。

几乎所有现代浏览器都支持这种CSS功能,即使其中一些浏览器需要-webkit-vendor前缀。 请在此处查看: http//caniuse.com/#feat=css-animation

===============>>#2 票数:1

使用jQuery

HTML

<div id="b">&nbsp;</div>

CSS

div#b {
    position: fixed;
    top:40px;
    left:0;
    width: 40px;
    height: 40px;
    background: url(http://www.wiredforwords.com/IMAGES/FlyingBee.gif) 0 0 no-repeat;
}

脚本

var b = function($b,speed){


    $b.animate({
        "left": "50%"
    }, speed);
};

$(function(){
    b($("#b"), 5000);
});

见jsfiddle http://jsfiddle.net/vishnurajv/Q4Jsh/

  ask by Ali Boulala translate from so

未解决问题?本站智能推荐:

2回复

使用CSS3过渡

有人知道如何自动在我的文本下给所有人添加一行吗? 这是我的动画 的CSS 在第一个示例中,一切正常,行的宽度还可以,但其他情况则没有。
2回复

如何使用CSS3无限制动我的图像

我有一个具有以下样式的图像: .graphs { -webkit-transition: all 2s ease; -moz-transition: all 2s ease; -o-transition: all 2s ease; transition: al
2回复

使用CSS3制作图像/ div淡入淡出,而不使用悬停

我有一个带有图像的div。 目前我使用CSS3动画将其淡化,但性能非常糟糕。 我很确定我应该使用过渡。 问题是我找不到一个不是由悬停触发的示例。 我怎样才能使页面加载,延迟2秒后,图像/ div从0%开始淡入? 目前,正如我在动画中所说,我有: 有任何想法吗? 谢
1回复

CSS3背景图像悬停过渡

请检查以下链接 http://intelmarketing.mk/demos/security/services/ 您将在行中看到3个图标,并且几乎所有悬停都有css3过渡,但是我无法将动画添加到我尝试过的几个示例图标中 http://css3.bradshawenterpri
2回复

棋盘格过渡仅使用CSS3吗?

是否可以仅使用CSS 3创建棋盘格过渡类型?
1回复

如何在css3中按对角线滚动显示图像?

我在启动屏幕上工作,我应该在其中为徽标从屏幕中央到左上方的过渡设置动画。 推出CS3效果我已经做到了,但是我想将它移到左上方 那么如何在CSS中的过渡和动画之间进行组合呢?
1回复

css3栏+响应式布局:使用css3或jquery / javascript设置商品位置变化的动画

我正在创建一个砌体样式的布局,但用css3作为列的替代,因为它使我可以更轻松,更准确地构建布局,尤其是因为我正在构建响应式布局。 现在,我正在使用css3媒体查询来根据窗口的大小更改显示的列数。 我想做的是在调整窗口大小时,当列数发生变化时,使各列之间的列元素的位置变化具有动画效果。
1回复

CSS3卡翻转毛刺

我使用CSS创建了HTML翻转卡。 但是,当卡翻转时,会出现闪烁(好像几乎无法完全翻转)。 该故障主要在光标直接在卡的中心移动时发生。 任何帮助是极大的赞赏! .card-box { width: 100px; height: 50px; position: relat
1回复

反向CSS3过渡

http://micheresources.com/html/j-crew-slider/ 我想知道如何反转动画? 当您将鼠标悬停在左侧的每个导航项目上时,您会注意到,当您将鼠标悬停在下一个项目上时,黑条只是捏到左上角,而不是向左滑动。 如何使其滑入类似于滑入? 黑条是<a
1回复

CSS3中的拟合元素

两天前,我请求动画css3的帮助。 这是我的动画:[link] http://jsfiddle.net/SD58Z/8/ [/ link] 一切正常,但我还有另一个问题。 是否可以自动设置该行的宽度,以使该行正确适合,而无论链接文本的长度如何? 关键是当我的标题较长时,此行太短。