CSS3 animation/transform

欢迎光临
<!DOCTYPE html>
<html>
<head>
    <meta content="width =device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="format-detection" content="telephone=no" />
    <title></title>
    <style>
        html, body { margin: 0px; padding: 0px; height: 100%; width: 100%; }
        p { margin: 0px; padding: 0px; }
        .page { width: 100%; height: 100%; }
        .page .pagehome { height: 100%; width: 100%; background: #24a5cf; position: relative; z-index: 99; }
        .page .an-box { position: absolute; top: 45%; left: 25%; -webkit-animation: hinge 10s cubic-bezier(.44,.44,.54,1.42) infinite; }
        .page .an-box .y { width: 200px; height: 200px; border-radius: 50%; position: absolute; top: 0px; left: 0px; transform-origin: 50% 100%; border-top: 0.1em solid rgba(255,255,255,0.4); box-shadow: 0 1em 2em rgba(0,0,0,0.5); top: 50%; left: 50%; margin-left: -100px; margin-top: -200px; }
        .page .an-box .y0 { background: rgba(16, 63, 236, 0.75); z-index: 100; }
        .page .an-box .y1 { background: rgba(37, 172, 162, 0.75); -webkit-transform: rotateZ(90deg); z-index: 99; }
        .page .an-box .y2 { background: rgba(233, 124, 32, 0.75); -webkit-transform: rotateZ(180deg); z-index: 98; }
        .page .an-box .y3 { background: rgba(235, 67, 35, 0.75); -webkit-transform: rotateZ(270deg); z-index: 97; }

        @-webkit-keyframes myfirst {
            0% { -webkit-transform: rotateZ(0deg); }
            25% { -webkit-transform: rotateZ(360deg); }
            50% { -webkit-transform: rotateZ(180deg); }
            99% { -webkit-transform: rotateZ(360deg); }
            100% { -webkit-transform: rotateZ(0deg); }
        }

        @-webkit-keyframes hinge {
            0% { -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; }
            16% { -webkit-transform: rotate3d(0, 0, 1, 360deg); transform: rotate3d(0, 0, 1, 360deg); }
            32% { -webkit-transform: rotate3d(0, 0, 1, 0deg); transform: rotate3d(0, 0, 1, 0deg); }
            48% { -webkit-transform: rotate3d(0, 0, 1, 360deg); transform: rotate3d(0, 0, 1, 360deg); }
            64% { -webkit-transform: rotate3d(0, 0, 1, 0deg); transform: rotate3d(0, 0, 1, 0deg); }
            80% { -webkit-transform: rotate3d(0, 0, 1, 360deg); transform: rotate3d(0, 0, 1, 360deg); }
            99% { -webkit-transform: rotate3d(0, 0, 1, 0deg); transform: rotate3d(0, 0, 1, 0deg); }
            100% { -webkit-transform: rotate3d(0, 0, 1, 0deg); transform: rotate3d(0, 0, 1, 0deg); }
        }

        .page .biaopai { position: absolute; top: 100px; left: 50%; z-index: 999; -webkit-transform-style: preserve-3d; -webkit-perspective: 700; -webkit-perspective-origin: 50% 50%; }
        .page .biaopai .content { padding: 0px 30px; background: #cb8e8e; border-radius: 10px; -webkit-transform-origin-y: -15px; -webkit-transform: rotateZ(90deg); -webkit-animation: hinge1 cubic-bezier(.44,.44,.54,1.42) 1.3s both; }
        .page .biaopai .content:before { content: ''; width: 15px; height: 15px; background: #eb5757; border: 2px solid #c62a2a; box-shadow: 0px 2px 5px #2b2929; position: absolute; left: 50%; border-radius: 15px; top: -30px; margin-left: -12px; z-index: 99; }
        .page .biaopai .content:after { content: ''; display: block; width: 0px; height: 0px; overflow: hidden; border: 40px dashed transparent; border-bottom: 50px solid #cb8e8e; position: absolute; left: 50%; top: -90px; margin-left: -45px; }
        .page .biaopai .content p { line-height: 145px; text-align: center; font-size: 75px; font-family: 'Microsoft YaHei'; text-shadow: 0px 5px 5px #888; color: #ee492b; font-weight: bold; }

        @-webkit-keyframes hinge1 {
            0% { }
            20% { -webkit-transform: rotate3d(0, 0, 1, -55deg); }
            40% { -webkit-transform: rotate3d(0, 0, 1,55deg); }
            60% { -webkit-transform: rotate3d(0, 0, 1,-20deg); }
            80% { -webkit-transform: rotate3d(0, 0, 1, 20deg); }
            100% { -webkit-transform: rotate3d(0, 0, 1, 0deg); -webkit-animation-timing-function: ease-in; }
        }
    </style>

</head>
<body>

    <div class="page">
        <div class="pagehome">
            <div class="an-box">
                <div class="y y0"></div>
                <div class="y y1"></div>
                <div class="y y2"></div>
                <div class="y y3"></div>
            </div>
        </div>
        <div class="biaopai">
            <div class="content">
                <p>欢迎光临</p>
            </div>
        </div>
    </div>
</body>
</html>
posted on 2015-06-05 10:18 流浪小白鼠阅读(223) 评论(0) 编辑收藏举报