Only background image has to fade in on page load

2019-02-19 21:12发布

站内问答 / CSS3
1104 1 4

I have a div with a background image (an arrow). In the div is some text, the arrow is below it. I want the text inside the div to load with the page, but the background image load a few seconds later.

This is my code:

.homearrow {
    background: url(http://www.stefaanoyen.be/wp-content/uploads/2013/03/arrow.png) no-repeat 200px 155px;
    background-size: 125px 125px;
    float: left;
    -webkit-animation: fadein 4s; /* Safari and Chrome */
    -moz-animation: fadein 4s; /* Firefox */
    -ms-animation: fadein 4s; /* Internet Explorer */
    -o-animation: fadein 4s; /* Opera */
    animation: fadein 4s;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari and Chrome */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}​

/* Opera */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}​

The problem: the whole div (text and background image) fades in. Is there a way to make the background image fade in, not the text?

Thank you, Stefaan

1条回答
放我归山
2楼-- · 2019-02-19 22:09

Try the following

<html>
 <head>

    <style>

        .wrapper {position: relative;  margin: 15px 15px 15px 15px ;}

        .homearrow {
            background: #fff url('arrow.png') 0px 0px no-repeat ;
            background-size: 125px 125px;
            float: left;
            -webkit-animation: fadein 4s; /* Safari and Chrome */
            -moz-animation: fadein 4s; /* Firefox */
            -ms-animation: fadein 4s; /* Internet Explorer */
            -o-animation: fadein 4s; /* Opera */
            animation: fadein 4s;
            height: 125px;
            width: 125px;
            position: absolute;  top: 0px; left: 0px;
        }

        .homearrowtext {position: absolute; top: 10px; left: 10px; }


        @keyframes fadein {
            from { opacity: 0; }
            to   { opacity: 1; }
        }

        /* Firefox */
        @-moz-keyframes fadein {
            from { opacity: 0; }
            to   { opacity: 1; }
        }

        /* Safari and Chrome */
        @-webkit-keyframes fadein {
            from { opacity: 0; }
            to   { opacity: 1; }
        }

        /* Internet Explorer */
        @-ms-keyframes fadein {
            from { opacity: 0; }
            to   { opacity: 1; }
        }​

        /* Opera */
        @-o-keyframes fadein {
            from { opacity: 0; }
            to   { opacity: 1; }
        }​
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="homearrow"></div>
        <p class="homearrowtext">Hello World</p>
    </div>
</body>

I have put the text outside the div, applied position relative to the containing div and position absolute to the text. I have also given the image div some width and height.

Hope this helps.

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)