昨晚面试没有实现的响应式效果

其实主要是CSS3旋转的效果

上下DIV分离的效果只要用CSS3动画

这种交互响应可以用在很多图片按钮上

code

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <title>CSS3旋转效果</title>
    <style>
    * {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    body {
        background: #1F1F1F;
    }

    .zzsc {
        position: absolute;
        z-index: 2000;
        top: 220px;
        left: 110px;
        width: 220px;
        height: 220px;
        background: no-repeat url("http://images.cnblogs.com/cnblogs_com/goodbeypeterpan/605441/o_yuan.png") left top;
        -webkit-background-size: 220px 220px;
        -moz-background-size: 220px 220px;
        background-size: 220px 220px;
        -webkit-border-radius: 110px;
        border-radius: 110px;
        -webkit-transition: -webkit-transform 1s ease-out;
        -moz-transition: -moz-transform 1s ease-out;
        -o-transition: -o-transform 1s ease-out;
        -ms-transition: -ms-transform 1s ease-out;
    }

    .zzsc:hover {
        -webkit-transform: rotateZ(360deg);
        -moz-transform: rotateZ(360deg);
        -o-transform: rotateZ(360deg);
        -ms-transform: rotateZ(360deg);
        transform: rotateZ(360deg);
    }

    #top {
        position: absolute;
        z-index: 1000;
        top: 110px;
        height: 220px;
        width: 440px;
        background-color: #ff5200;
        transition: all 1s ease-out;
        -webkit-transition: all 1s ease-out;
    }

    #foot {
        position: absolute;
        z-index: 3000;
        top: 330px;
        margin: 0 auto;
        height: 220px;
        width: 440px;
        background-color: #66CC00;
        transition: all 1s ease-out;
        -webkit-transition: all 1s ease-out;
    }
    </style>
</head>

<body>
    <div id="top"></div>
    <div class="zzsc" id="mid"></div>
    <div style="text-align:center;clear:both;">
    </div>
    <div id="foot"></div>
</body>
<script>
document.getElementById('mid').addEventListener("mouseover", function() {　　
    document.getElementById('top').style.top = '0px';
    document.getElementById('foot').style.top = '440px';
});
document.getElementById('mid').addEventListener("mouseout", function() {　　
    document.getElementById('top').style.top = '110px';
    document.getElementById('foot').style.top = '330px';
});
</script>

</html>

 

　　

posted @ 2014-10-09 10:04  goodbyepeterpan  阅读(211)  评论(0)  编辑  收藏  举报