下面是编程之家 jb51.cc 通过网络收集整理的代码片段。
编程之家小编现在分享给大家，也给大家做个参考。
<!DOCTYPE html>
<html>
<head>
<Meta charset="utf-8"/>
<Meta name="viewport" content="width=device-width,initial-scale=1"/>
<title>[email protected]</title>
<style type="text/css">
#iphone{ position: relative; width: 300px; margin: 0 auto;}
#top,#bottom{ border: 0px solid red;}
#bottom{
height: 170px;
background:url(http://a.hiphotos.baidu.com/album/s%3D1600%3Bq%3D90/sign=66dda283acaf2eddd0f14defbd203a98/79f0f736afc379311a815aacebc4b74542a9114d.jpg) center bottom no-repeat;
}
#top {
height: 460px;
background:url(http://a.hiphotos.baidu.com/album/s%3D1600%3Bq%3D90/sign=66dda283acaf2eddd0f14defbd203a98/79f0f736afc379311a815aacebc4b74542a9114d.jpg) no-repeat;
-webkit-animation-name: top;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
}
@-webkit-keyframes 'top' {
0% {
height : 392px;
}
20% {
height : 460px;
}
40% {
height : 460px;
}
60% {
height : 460px;
}
80% {
height : 460px;
}
100% {
height : 392px;
}
}
#message{
position: absolute;
top: 394px;
left: 37px;
width: 47px;
height: 61px;
background: url(http://priv.hiphotos.baidu.com/album/s%3D1600%3Bq%3D90/sign=569c44fed11373f0f13f6b99943f708a/ac345982b2b7d0a28b2bd818cbef76094a369a51.jpg?psign=e4f88b65f703918f86d7cef95114e9f659ee3d6d57fbe4a3) top right no-repeat;
-webkit-animation-name: message;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
}
@-webkit-keyframes 'message' {
0% {
width : 0px;
}
20% {
width : 0px;
}
40% {
width : 47px;
}
60% {
width : 47px;
}
80% {
width : 0px;
}
100% {
width : 0px;
}
}
</style>
</head>
<body>
<div id="page">
<div id="iphone">
<div id="message"></div>
<div id="top"></div>
<div id="bottom"></div>
</div>
</div>
<script></script>
</body>
</html>
以上是编程之家(jb51.cc)为你收集整理的全部代码内容，希望文章能够帮你解决所遇到的程序开发问题。
如果觉得编程之家网站内容还不错，欢迎将编程之家网站推荐给程序员好友。
