iphone4变iphone5

清华大佬耗费三个月吐血整理的几百G的资源,免费分享!....>>>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <title>xe@12-9-23</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>