Only background image has to fade in on page load

前端未结

关注

 1  1488

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 ima

相关标签:

1条回答

有刺的猬

2021-01-15 02:10

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)