您的位置：首页 > Web前端 > CSS

css3幻灯片效果

2016-04-21 10:25 495 查看

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title></title>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta content="always" name="referrer">
<meta name="theme-color" content="#2932e1">
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
<style type="text/css" media="screen">
.al{
width: 120px;
height: 120px;
padding:50px;
border-radius: 50%;
background: #14295A;
margin: 200px;
}
.logo{
width: 120px;
height: 120px;
background: #14295A;
background-repeat: no-repeat;
background-position: 50% 50%;
animation: logo 6s linear infinite;
}
@-webkit-keyframes logo{0%,33.34%,66.67%{opacity: 0;}10%,33.33%,43.34%,66.66%,76.67%,100%{opacity: 1;}0%,33.34%,66.67%{-webkit-transform:translateY(-30px);}5%,33.33%,38.34%,66.66%,71.67%,100%{-webkit-transform:translateY(0);}0%,33.33%{background-image: url(images/1.png);}33.34%,66.66%{background-image: url(images/2.png);}66.67%,100%{background-image: url(images/3.png);}}
</style>
</head>
<body>
<div class="al">
<div class="logo">
</div>
</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航