阿里云首页--部分动态效果实现

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="css/style.css"/>
</head>
<body>
<div class="point-area"
     style="top: 15px; left: 12px; position: absolute; width: 110px; height: 110px; visibility: visible; opacity: 1;">
    <p class="point-name" style="position: absolute; top: 45px; left: 65px;">中国</p>

    <div class="point point-dot"></div>
    <div class="point point-10"></div>
    <div class="point point-40"></div>
    <div class="point point-shadow point-80"></div>
</div>
<div class="content">
    <ul class="clearfix aa">
        <li class="active">
            <div class="con">
                <div class="header1">我是标题</div>
                <div class="main1">
                    111
                </div>
                <div class="main2">
                    可弹性伸缩、安全稳定、简单<br>
                    可弹性伸缩、安全稳定、简单
                </div>
            </div>
        </li>
        <li>
            <div class="con">
                <div class="header1">我是标题</div>
                <div class="main1">
                    111
                </div>
                <div class="main2">
                    可弹性伸缩、安全稳定、简单<br>
                    可弹性伸缩、安全稳定、简单
                </div>
            </div>
        </li>
        <li>
            <div class="con">
                <div class="header1">我是标题</div>
                <div class="main1">
                    111
                </div>
                <div class="main2">
                    可弹性伸缩、安全稳定、简单<br>
                    可弹性伸缩、安全稳定、简单
                </div>
            </div>
        </li>
        <li>
            <div class="con">
                <div class="header1">我是标题</div>
                <div class="main1">
                    111
                </div>
                <div class="main2">
                    可弹性伸缩、安全稳定、简单<br>
                    可弹性伸缩、安全稳定、简单
                </div>
            </div>
        </li>
    </ul>
</div>
<ul class="bb clearfix">
    <li>
        <div class="bb_bg"></div>
        <div class="bb_con">
            <div class="bb_tit">我是标题</div>
            <div class="bb_line">_</div>
            <div class="bbb">金融服务</div>
            <div class="bb_content">
                我是内容<br>
                我是内容<br>
                我是内容
            </div>
        </div>
    </li>
    <li>
        <div class="bb_bg"></div>
        <div class="bb_con">
            <div class="bb_tit">我是标题</div>
            <div class="bb_line">_</div>
            <div class="bbb">金融服务</div>
            <div class="bb_content">
                我是内容<br>
                我是内容<br>
                我是内容
            </div>
        </div>
    </li>
    <li>
        <div class="bb_bg"></div>
        <div class="bb_con">
            <div class="bb_tit">我是标题</div>
            <div class="bb_line">_</div>
            <div class="bbb">金融服务</div>
            <div class="bb_content">
                我是内容<br>
                我是内容<br>
                我是内容
            </div>
        </div>
    </li>
    <li>
        <div class="bb_bg"></div>
        <div class="bb_con">
            <div class="bb_tit">我是标题</div>
            <div class="bb_line">_</div>
            <div class="bbb">金融服务</div>
            <div class="bb_content">
                我是内容<br>
                我是内容<br>
                我是内容
            </div>
        </div>
    </li>
</ul>
<div class="topmove"></div>
<!--<div class="tu1"></div>-->
<div class="outer">
    <div>111</div>
    <div class="cell-detail">www</div>
</div>
</body>
<script src="jquery-1.11.3.min.js"></script>
<script>
    $(".aa li").on("mouseover",function(){
        $(this).addClass("active");
        $(this).siblings().removeClass("active");
    });
    $(".bb li").hover(function(){
        $(this).addClass("active");
        $(this).siblings().removeClass("active");
    },function(){
        $(this).removeClass("active");
    })
</script>
</html>

.point-area {
    text-align: center;
    position: relative;
    width: 150px;
    height: 150px;
    -webkit-transition: opacity 0.5s ease-out;
    -moz-transition: opacity 0.5s ease-out;
    -o-transition: opacity 0.5s ease-out;
    transition: opacity 0.5s ease-out;
}

.point-area .point {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 10px;
    height: 10px;
    margin: auto;
    -webkit-border-radius: 50%;
    -webkit-background-clip: padding-box;
    -moz-border-radius: 50%;
    -moz-background-clip: padding;
    border-radius: 50%;
    background-clip: padding-box;
    background: transparent;
}

.point-area .point-dot {
    background-color: #6AD7E9;
    border: 1px solid rgba(0, 205, 236, 0.37);
}

.point-area .point-10 {
    width: 100%;
    height: 100%;
}

.point-area .point-10:after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: 50%;
    border: 2px solid #00cdec;
    opacity: 0;
    -webkit-animation: ripple 4500ms ease-out 225ms infinite;
    -moz-animation: ripple 4500ms ease-out 225ms infinite;
    -o-animation: ripple 4500ms ease-out 225ms infinite;
    animation: ripple 4500ms ease-out 225ms infinite;
}

.point-area .point-40 {
    width: 100%;
    height: 100%;
}

.point-area .point-40:after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: 50%;
    border: 2px solid #00cdec;
    opacity: 0;
    -webkit-animation: ripple 4500ms ease-out 900ms infinite;
    -moz-animation: ripple 4500ms ease-out 900ms infinite;
    -o-animation: ripple 4500ms ease-out 900ms infinite;
    animation: ripple 4500ms ease-out 900ms infinite;
}

.point-area .point-80 {
    width: 100%;
    height: 100%;
}

.point-area .point-80:after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: 50%;
    border: 2px solid #00cdec;
    opacity: 0;
    -webkit-animation: ripple 4500ms ease-out 1800ms infinite;
    -moz-animation: ripple 4500ms ease-out 1800ms infinite;
    -o-animation: ripple 4500ms ease-out 1800ms infinite;
    animation: ripple 4500ms ease-out 1800ms infinite;
}

@-webkit-keyframes ripple {
    0% {
        opacity: 0;
        -webkit-transform: scale(0.1, 0.1);
    }
    5% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        -webkit-transform: scale(1)
    }
}

@-moz-keyframes ripple {
    0% {
        opacity: 0;
        -moz-transform: scale(0.1, 0.1);
    }
    5% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        -moz-transform: scale(1)
    }
}

@-o-keyframes ripple {
    0% {
        opacity: 0;
        -o-transform: scale(0.1, 0.1);
    }
    5% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        -o-transform: scale(1)
    }
}

@keyframes ripple {
    0% {
        opacity: 0;
        -webkit-transform: scale(0.1, 0.1);
        -moz-transform: scale(0.1, 0.1);
        -ms-transform: scale(0.1, 0.1);
        transform: scale(0.1, 0.1);
    }
    5% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
    }
}

.clearfix {
    zoom: 1;
}

.clearfix:after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    visibility: hidden;
    clear: both;
}

.content {
    width: 1200px;
    margin: 120px auto 0;
    height: 200px;
}

ul {
    list-style: none;
}

.aa li {
    float: left;
    width: 22%;
    border: 1px solid #ccc;
    position: relative;
    height: 200px;
    vertical-align: middle;
    transition: all 0.3s cubic-bezier(0.12, 0, 0.2, 1), z-index 0s 0.12s;
    z-index: 10
}

.header1 {
    height: 60px;
    line-height: 60px;
    background-color: #ccc;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1), z-index 0s 0.12s;
    position: absolute;
    top: 0;
    width: 100%;
}

.main1, .main2 {
    position: absolute;
    top: 60px;
    left: 0;
    width: 100%;
}

.main1 {
    z-index: 2;
    opacity: 1;
    filter: alpha(opacity=100);
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(opacity=(100));
    transition: all 0.12s cubic-bezier(0.4, 0, 0.2, 1) 0s;
}

.main2 {
    z-index: 1;
    opacity: 0;
    filter: alpha(opacity=0);
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(opacity=(0));
    transition: all 0.12s cubic-bezier(0.4, 0, 0.2, 1) 0.18s;
}

.aa li.active {
    width: 32%;
    border: 1px solid #00c1de;
    box-shadow: 0 0 20px rgba(0, 198, 226, 0.5);
    height: 238px;
    z-index: 100;
}

.aa li.active .header1 {
    background-color: #00c1de;
    height: 100px;
    top: -40px;
}

.aa li.active .main1 {
    z-index: 1;
    opacity: 0;
    filter: alpha(opacity=0);
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(opacity=(0));
}

.aa li.active .main2 {
    z-index: 2;
    opacity: 1;
    filter: alpha(opacity=100);
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(opacity=(100));
}

.bb {
    height: 200px;
    width: 1200px;
    margin: 60px auto;
    text-align: center
}

.bb li {
    width: 25%;
    height: 100%;
    background-color: #CCCCCC;
    float: left;
    position: relative;
    cursor: pointer;
    transition: all 0.3s;
}

.bb_bg {
    width: 100%;
    height: 100%;
    transition: all 0.3s;
}

.bb_line {
    opacity: 1;
    margin: 10px;
    transition: all 0.3s;
}

.bbb {
    font-size: 20px;
    margin: 10px;
}

.bb_content {
    opacity: 0;
    transition: all 0.3s;
}

.bb_con {
    height: 120px;
    position: absolute;
    top: 60px
}

.bb li.active .bb_bg {
    background: rgba(255, 201, 201, 0.2)
}

.bb li.active .bb_line {
    opacity: 0;
    margin: 0;
}

.bb li.active .bb_content {
    opacity: 1;
}

.bb li.active .bb_con {
    top: 30px;
    transition: all 0.3s
}

/*鼠标经过图片旋转*/
.topmove {
    width: 75px;
    height: 75px;
    border: 1px solid #ccc;
    background: url("../bg1.jpg") no-repeat 0 0;
    background-size: 75px;
    -webkit-animation: topMove 1.5s cubic-bezier(0.4, 0, 0.2, 1) 0s 1;
    -moz-animation: topMove 1.5s cubic-bezier(0.4, 0, 0.2, 1) 0s 1;
    -o-animation: topMove 1.5s cubic-bezier(0.4, 0, 0.2, 1) 0s 1;
    animation: topMove 1.5s cubic-bezier(0.4, 0, 0.2, 1) 0s 1;
}

@-webkit-keyframes topMove{0%{opacity:0;-webkit-transform:translateY(20px)}100%{opacity:1;}}
@-moz-keyframes topMove{0%{opacity:0;-moz-transform:translateY(20px)}100%{opacity:1;}}
@-o-keyframes topMove{0%{opacity:0;-o-transform:translateY(20px)}100%{opacity:1;}}
@keyframes topMove{0%{opacity:0;-webkit-transform:translateY(20px);-moz-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px);}100%{opacity:1;}}
.tu1 {
    width: 75px;
    height: 75px;
    border: 1px solid #ccc;
    background: url("../bg1.jpg") no-repeat 0 0;
    background-size: 75px;
    margin-top:20px;
}
.outer{width:192px;height:187px;border:1px solid #ccc;position:relative}
.outer:hover .cell-detail{display:block;}
.cell-detail{
    position:absolute;
    width: 192px;
    left: 1px;
    height: 187px;
    top: 50%;
    margin-top: -94px;
    border-radius: 0;
    animation: flipInX 0.7s ease both;
    display: none;
    background-color:green;
}
@keyframes flipInX {
    0% {
        transform: perspective(400px) rotateX(90deg);
        opacity: 0.5;
    }
    40% {
        transform: perspective(400px) rotateX(-10deg)
    }
    70% {
        transform: perspective(400px) rotateX(10deg)
    }
    100% {
        transform: perspective(400px) rotateX(0deg);
        opacity: 1.0
    }
}

posted @ 2016-08-12 14:00 dongxiaolei 阅读(278) 评论(0) 编辑收藏举报

刷新页面返回顶部

dongxiaolei

博客内容仅作为个人学习笔记使用！！

阿里云首页--部分动态效果实现

公告