0

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

关于这个的两个问题

  1. 当页面加载时，如何防止绿色块在开始时“闪烁”？
  2. 动画目前仅适用于 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>

4

2 回答 2

3

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

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

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

于 2012-06-05T15:08:06.363 回答
1

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

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

二、您必须添加浏览器特定的前缀，而不是-webkit.

  • 对于 FF --moz
  • 对于 IE --ms
  • 对于歌剧 --o

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

于 2012-06-05T15:12:48.190 回答