iphone4变iphone5

下面是编程之家 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)为你收集整理的全部代码内容，希望文章能够帮你解决所遇到的程序开发问题。

如果觉得编程之家网站内容还不错，欢迎将编程之家网站推荐给程序员好友。

相关推荐