CSS3 animate图片自动渐入渐出效果


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="description" content="CSS3 animate图片自动渐入渐出效果 " />
<meta name="description" content="web前端学习实例页面" />
<meta name="keywords" content="web前端,css,jQuery,javascript,demo页面" />
<meta name="author" content="jiangwenyi" />
<title>CSS3 animate图片自动渐入渐出效果</title>
<style>
@-webkit-keyframes fadeInOut {
    0% {
        opacity:1;
     }
    25% {
        opacity:0;
    }
    50% {
        opacity: 0;    
    }
    75% {
        opacity:1;
    }
}
.anim_fade_image {
    position:absolute;
    -webkit-animation-name: fadeInOut;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: infinite;    q
    -webkit-animation-duration: 12s;
    -webkit-animation-direction: alternate;
}
</style>
</head>
<body>
<div class="show">
        <div id="testBox" class="demo">
            <img class="anim_fade_image" src="img/activity_desc_bg.png" />
        <img src="img/activity_hotel_2.png" />
    </div>
</div>
</body>
</html>

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>