Question

http://dev.viral-minds.com/miller/abc/abc.html

关于这个的两个问题

当页面加载时，如何让绿色块在开头“闪烁”？
动画目前仅适用于Chrome ...如何让它在FF和IE中运行？

感谢。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>main</title>

    <style type="text/css">
        body 
        {
            background-color:#FFFFF0; /*ivory*/
            overflow: hidden;
        }

        #box
        {
            position: absolute;
            width:495px;
            height:263px;
            background:#32331d;
            top: 20px;
            left: 20px;
        }

        #nav
        {
            position: absolute;
            margin-left:30px;
            width:100%;
            height:100px;
            top: 425px;
            z-index: 100;
            background-image:url('colors.png');
            background-repeat:no-repeat;
        }


        #stars,
        #stars-2,
        #small-stars,
        #small-stars-2 {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 800px;
            height: 800px;
            margin: -300px 0 0 -300px;
            background: url(stars-large.png) no-repeat center center;
            -webkit-animation-name: starsLarge;
            -webkit-animation-duration: 240s;
            -webkit-animation-iteration-count: infinite;
            -webkit-animation-timing-function: linear;
        }

        @-webkit-keyframes starsLarge {
            from {
                -webkit-transform: rotate(0deg) scale(3);
                opacity: .9;
            }
            to {
                -webkit-transform: rotate(360deg) scale(.5);
                opacity: .5;
            }
        }

        #stars-2 {
            -webkit-animation-name: starsLargeAlt;
            -webkit-animation-duration: 180s;
            -webkit-animation-iteration-count: infinite;
            -webkit-animation-timing-function: linear;
        }

        @-webkit-keyframes starsLargeAlt {
            from {
                -webkit-transform: rotate(180deg) scale(3);
                opacity: .9;
            }
            to {
                -webkit-transform: rotate(360deg) scale(.5);
                opacity: .5;
            }
        }

        #small-stars,
        #small-stars-2 {
            background: url(stars-small.png) no-repeat center center;
            -webkit-animation-duration: 60s;
            -webkit-animation-name: starsSmall;
        }

        #small-stars-2 {
            -webkit-animation-name: starsSmallAlt;
            -webkit-animation-duration: 120s;
        }

        @-webkit-keyframes starsSmall {
            from {
                -webkit-transform: rotate(360deg) scale(3);
                opacity: .9;
            }
            to {
                -webkit-transform: rotate(0deg) scale(.5);
                opacity: .5;
            }
        }

        @-webkit-keyframes starsSmallAlt {
            from {
                -webkit-transform: rotate(0deg) scale(3);
                opacity: .9;
            }
            to {
                -webkit-transform: rotate(360deg) scale(.5);
                opacity: .5;
            }
        }
    </style>
</head>
<body>
    <div id="box"><img src="actual.png"></img></div>
    <div id="nav"></div>
    <div id="stars"></div>
    <div id="stars-2"></div>
    <div id="small-stars"></div>
    <div id="small-stars-2"></div>
</body>

Answer 1

第1项：绿色区块闪烁，因为尚未从服务器检索重叠的图像。您可以将display: none;添加到#box的CSS中，然后在页面完全加载后以编程方式显示它。例如：

// jQuery:
$(document).ready(function(){
  $('#box').show();
});

第2项：动画仅适用于Chrome，因为您使用的是-webkit特定样式定义。您需要研究替代方案，例如-moz和-ms，以了解它是否可以在这些浏览器中运行。您也可以尝试完全省略前缀。

Answer 2

予。您可以更改该div的背景颜色以匹配页面背景。之后，当图像加载完毕后，您可以通过jQuery将其更改为深绿色：

$(function() {
    $('#box img').load(function() {
        $(this).parent().css('background-color', '#32331D');
    });
});

II。您必须添加除-webkit以外的浏览器特定前缀。

对于FF - -moz
对于IE - -ms
对于Opera - -o

请记住，尽管有前缀，但这些动画在旧版IE（8及以下版本）中不起作用。那些吸盘不支持CSS动画。

firefox和IE中的css关键帧动画

2 个答案: