阿里云首页特效

<!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">
    <p class="point-name">中国</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="index_navL">
    <div class="dd">
        <div class="item active item_nav1">
            <div class="item1 item-title" >
                1<b class="inline"></b>
            </div>
            <div class="item_content" >
                <div class="item1">
                    1<b class="inline"></b>
                </div>
                <div class="itemNav-con">
                    <ul class="item2">
                        <li class="clearfix ">
                            <a href="javascript:void(0);" class="fl  itemNav_oneA">1-1</a>
                        </li>
                        <li class="clearfix">
                            <a href="javascript:void(0);" class="fl itemNav_oneA">1-1</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="item  item_nav2">
            <div class="item1 item-title">
                2<b class="inline"></b>
            </div>
            <div class="item_content">
                <div class="item1">
                    2<b class="inline"></b>
                </div>
                <div class="itemNav-con">
                    <ul class="item2 dh2">
                        <li >
                            <a href="javascript:void(0);">2-1</a>
                        </li>
                        <li>
                            <a href="javascript:void(0);">2-1</a>
                        </li>
                        <li>
                            <a href="javascript:void(0);" >2-1</a>
                        </li>
                        <li>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="item item_nav3">
            <div class="item1 item-title">
                3<b class="inline"></b>
            </div>
            <div class="item_content">
                <div class="item1">
                    3<b class="inline"></b>
                </div>
                <div class="itemNav-con">
                    <ul class="item2">
                        <li>
                            <a href="javascript:void(0);">3-1</a>
                        </li>
                        <li>
                            <a href="javascript:void(0);">3-1</a>
                        </li>
                        <li>
                            <a href="javascript:void(0);">3-1</a>
                        </li>
                        <li>
                            <a href="javascript:void(0);">3-1</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </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="outer">
    <div>111</div>
    <div class="cell-detail">www</div>
</div>
<div class="jd-qg">
    <span>
        <em>立</em><em>即</em><em>抢</em><em>购</em>
        <span> </span><em>&gt;</em>
    </span>
</div>
<div class="floating-carnival">
    <div class="link-carnival">
        <img src="images/2.png" class="floating-carnival-ani"/>
    </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");
    });
    /*鼠标经过--背景图片变形--开始*/
    var timer,time1;
    function clear(timer){
//        timer=null;
        clearInterval(timer);
    }
    var i = 0;
    $(".topmove").hover(function(){
        clear(timer);
        var $this=$(this);
        var pos2;
        timer=window.setInterval(function (){
            i++;
            var pos1=parseInt($this.css("backgroundPositionY"));
            pos2 = "0" + " " + (pos1 - 75) + "px";
            $this.css("background-position", pos2);
            if(i>25){
                console.log("over");
                clear(timer);
            }
            console.log(pos2)
        },100);
    },function(){
        clear(timer);
        var $this=$(this);
        var pos2;
        timer=window.setInterval(function (){
            i--;
            var pos1=parseInt($this.css("backgroundPositionY"));
            pos2 = "0" + " " + (pos1 + 75) + "px";
            $this.css("background-position", pos2);
            if(i<=0){
                clear(timer);
            }
            console.log(pos2)
        },100);
    });
    /*鼠标经过--背景图片变形--结束*/
    $(‘.item‘).on("mouseover",function(){
        $(this).addClass(‘active‘);
        $(this).siblings().removeClass(‘active‘);
    });
</script>
</html>

html

/*地理位置除扩大的圆圈--开始*/
.point-area {
    text-align: center;
    -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;
    top: 15px;
    left: 12px;
    position: absolute;
    width: 110px;
    height: 110px;
    visibility: visible;
    opacity: 1;
}

.point-name {
    position: absolute;
    top: 45px;
    left: 65px;
}

.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("../images/11.jpg") no-repeat;
    background-position: 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;
    }
}

/*鼠标经过图片变形--结束*/
/*鼠标经过--类似翻页效果--开始*/
.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
    }
}

/*鼠标经过--类似翻页效果--结束*/

/*竖向导航鼠标经过放大--开始*/
.index_navL {
    width: 300px;
    margin: 20px auto;
}

.index_navL .item {
    height: 68px;
    position: relative;
    transition: all 0.5;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    background: rgba(0, 0, 0, 0.7);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#B2000000, endColorstr=#B2000000);
    opacity: 0.7 \9\0;
}

.index_navL .item1 {
    line-height: 68px;
    color: #747373;
    position: relative;
    padding-left: 22px;
    font-size: 14px;
}

.index_navL .item_content {
    width: 316px;
    background: #1d1c1c;
    position: absolute;
    right: 0;
    display: none;
    box-shadow: -4px 2px 8px #555;
    -webkit-box-shadow: -4px 2px 8px #555;
    -moz-box-shadow: -4px 2px 8px #555;
    -ms-box-shadow: -4px 2px 8px #555;
    -o-box-shadow: -4px 2px 8px #555;
    overflow: hidden;
}

.itemNav-con {
    position: relative;
    height: 268px;
    display: none;
}

.index_navL .item.active {
    height: 336px;
    opacity: 1 \9\0;
}

.index_navL .item.active .item1 {
    padding-left: 38px;
    color: #fff;
    background: #1d1c1c;
}

.index_navL .item.active .itemNav-con {
    display: block;
}

.index_navL .item.active .item_content {
    display: block;
    width: 316px;
    background: #1d1c1c;
    height: 100%;
    position: absolute;
    right: 0;
}

.index_navL .item.active .item-title {
    display: none;
}

/*竖向导航鼠标经过放大--结束*/
/*京东--立即抢购*/
.jd-qg {
    position: relative;
    cursor: pointer;
    width: 200px;
    height: 60px;
    overflow: hidden;
}

.jd-qg em {
    display: inline-block;
    opacity: 0;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    transition: all 0.5s;
    -moz-transform: translate3d(0, -10px, 0);
    -ms-transform: translate3d(0, -10px, 0);
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
    padding: 0 1px;
}

.jd-qg > span::before {
    content: ‘立即抢购 >‘;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    transition: all 0.5s;
}

.jd-qg > span {
    font-family: "Microsoft YaHei";
    position: absolute;
    font-size: 14px;
    width: 180px;
    height: 40px;
    line-height: 40px;
    color: #fff;
    bottom: 5px;
    left: 50%;
    margin-left: -90px;
    text-align: center;
    background: #000;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    transition: all 0.5s;
}

.jd-qg:hover > span {
    background: #ff4e00;
}

.jd-qg:hover > span::before {
    opacity: 0;
    /*此处用如下的css3控制也好，用top:40px也可
    -webkit-transform: translate3d(0, 100%, 0);
    -moz-transform: translate3d(0, 100%, 0);
    -ms-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);*/
    top: 40px;
}

.jd-qg:hover > span > em {
    opacity: 1;
    height: 30px;
    line-height: 30px;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.jd-qg:hover > span > em:nth-child(1) {
    -webkit-transition-delay: 0.045s;
    -moz-transition-delay: 0.045s;
    -ms-transition-delay: 0.045s;
    transition-delay: 0.045s;
}

.jd-qg:hover > span > em:nth-child(2) {
    -webkit-transition-delay: 0.09s;
    -moz-transition-delay: 0.09s;
    -ms-transition-delay: 0.09s;
    transition-delay: 0.09s;
}

.jd-qg:hover > span > em:nth-child(3) {
    -webkit-transition-delay: 0.135s;
    -moz-transition-delay: 0.135s;
    -ms-transition-delay: 0.135s;
    transition-delay: 0.135s;
}

.jd-qg:hover > span > em:nth-child(4) {
    -webkit-transition-delay: 0.18s;
    -moz-transition-delay: 0.18s;
    -ms-transition-delay: 0.18s;
    transition-delay: 0.18s;
}

.jd-qg:hover > span > em:nth-child(5) {
    -webkit-transition-delay: 0.225s;
    -moz-transition-delay: 0.225s;
    -ms-transition-delay: 0.225s;
    transition-delay: 0.225s;
}

.jd-qg:hover > span > em:nth-child(6) {
    -webkit-transition-delay: 0.27s;
    -moz-transition-delay: 0.27s;
    -ms-transition-delay: 0.27s;
    transition-delay: 0.27s;
}

/*嘉年华浮层*/
.floating-carnival {
    transition: all 1s linear;
    transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
    position: fixed;
    top: 0px;
    left: 50%;
    margin-left: 476px;
    width: 249px;
    height: 112px;
    z-index: 62;
}

.floating-carnival .link-carnival {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.floating-carnival-ani {
    width:100%;
    height:100%;
    background:#ab2223;
    -webkit-animation: floating 50s 0.3s linear infinite forwards;
    animation: floating 50s 0.3s linear infinite forwards;
}

@keyframes floating {
    0% {
        transform: translate(0, 0);
    }
    5% {
        transform: translate(-200px, 100px);
    }
    10% {
        transform: translate(-400px, 200px);
    }
    15% {
        transform: translate(-600px, 300px);
    }
    20% {
        transform: translate(-800px, 400px);
    }
    25% {
        transform: translate(-1000px, 300px);
    }
    30% {
        transform: translate(-1200px, 200px);
    }
    35% {
        transform: translate(-1000px, 100px);
    }
    40% {
        transform: translate(-800px, 200px);
    }
    45% {
        transform: translate(-600px, 100px);
    }
    50% {
        transform: translate(-400px, 200px);
    }
    55% {
        transform: translate(-200px, 300px);
    }
    60% {
        transform: translate(0px, 200px);
    }
    65% {
        transform: translate(-200px, 100px);
    }
    70% {
        transform: translate(-400px, 200px);
    }
    75% {
        transform: translate(-600px, 300px);
    }
    80% {
        transform: translate(-800px, 200px);
    }
    85% {
        transform: translate(-600px, 100px);
    }
    90% {
        transform: translate(-400px, 0px);
    }
    95% {
        transform: translate(-200px, 100px);
    }
    100% {
        transform: translate(0, 0);
    }
}

@-webkit-keyframes floating {
    0% {
        -webkit-transform: translate(0, 0);
    }
    5% {
        -webkit-transform: translate(-200px, 100px);
    }
    10% {
        -webkit-transform: translate(-400px, 200px);
    }
    15% {
        -webkit-transform: translate(-600px, 300px);
    }
    20% {
        -webkit-transform: translate(-800px, 400px);
    }
    25% {
        -webkit-transform: translate(-1000px, 300px);
    }
    30% {
        -webkit-transform: translate(-1200px, 200px);
    }
    35% {
        -webkit-transform: translate(-1000px, 100px);
    }
    40% {
        -webkit-transform: translate(-800px, 200px);
    }
    45% {
        -webkit-transform: translate(-600px, 100px);
    }
    50% {
        -webkit-transform: translate(-400px, 200px);
    }
    55% {
        -webkit-transform: translate(-200px, 300px);
    }
    60% {
        -webkit-transform: translate(0px, 200px);
    }
    65% {
        -webkit-transform: translate(-200px, 100px);
    }
    70% {
        -webkit-transform: translate(-400px, 200px);
    }
    75% {
        -webkit-transform: translate(-600px, 300px);
    }
    80% {
        -webkit-transform: translate(-800px, 200px);
    }
    85% {
        -webkit-transform: translate(-600px, 100px);
    }
    90% {
        -webkit-transform: translate(-400px, 0px);
    }
    95% {
        -webkit-transform: translate(-200px, 100px);
    }
    100% {
        -webkit-transform: translate(0, 0);
    }
}

css

时间： 2024-11-08 21:58:35

阿里云首页特效的相关文章

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

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="css/style.css"/> </head> <body> <div class="p

阿里云部署Java web项目初体验

林炳文Evankaka原创作品.转载请注明出处http://blog.csdn.net/evankaka 摘要:本文主要讲了如何在阿里云上安装JDK.Tomcat以及其配置过程.最后以一个实例来演示在阿里云上部署Java web项目. 本文实例访问:http://120.24.19.24:8080/JavaHelloWorld-0.0.1-SNAPSHOT/ (到2016.3.9就不能访问了) 本文实例下载: 一.准备工作 1.注册账号 下载完成后.可到这里https://free.aliyun

阿里云部署java web

转载请注明出处http://blog.csdn.net/evankaka 摘要:本文主要讲了如何在阿里云上安装JDK.Tomcat以及其配置过程.最后以一个实例来演示在阿里云上部署Javaweb项目. 本文实例访问:http://120.24.19.24:8080/JavaHelloWorld-0.0.1-SNAPSHOT/(到2016.3.9就不能访问了) war包有需要的可以来这里下载:http://download.csdn.net/detail/evankaka/9439612 本文实例

阿里云PHP环境（主机宝--AMH--WDCP）操作说明及横向对比

本人是做网站的,技术略懂,论坛中大神有很多,在下不敢班门弄斧,只因最近加入了一个阿里云的qq群,每天都有新人加入后咨询许多初级问题,特此写几篇关于web使用阿里云的教程和推荐给大家,我会尽量通俗的来写,让大家看得明白,希望对大家有一些帮助.   本人撰写系列教程,从各层面帮助大家走上运营网站的道路:     第一篇:阿里云PHP环境(主机宝--AMH--WDCP)操作说明及横向对比(Nginx + Apache[wdcp自带] + MySQL + PHP) http://bbs.aliyun.c

阿里云部署Java web项目初体验（转）

林炳文Evankaka原创作品.转载请注明出处http://blog.csdn.net/evankaka 摘要:本文主要讲了如何在阿里云上安装JDK.Tomcat以及其配置过程.最后以一个实例来演示在阿里云上部署Java web项目. 本文实例访问:http://120.24.19.24:8080/JavaHelloWorld-0.0.1-SNAPSHOT/(到2016.3.9就不能访问了) war包有需要的可以来这里下载:http://download.csdn.net/detail/evan

阿里云部署Java web项目

转自:http://blog.csdn.net/evankaka 摘要:本文主要讲了如何在阿里云上安装JDK.Tomcat以及其配置过程.最后以一个实例来演示在阿里云上部署Javaweb项目. 本文实例访问:http://120.24.19.24:8080/JavaHelloWorld-0.0.1-SNAPSHOT/(到2016.3.9就不能访问了) war包有需要的可以来这里下载:http://download.csdn.net/detail/evankaka/9439612 本文实例下载:

带你穷游阿里云，寻找阿里云最省钱网站建设攻略！

有人发最省钱旅游攻略,有人发最省钱美味饭功略,有人发最省钱购物攻略~今儿,小编就发一个穷游阿里云,最省钱网站建设攻略! 这篇文章主要给已经在或者准备在阿里云混迹的站长们传授下如何能够在阿里云各种淘,花最少的钱搭建并且装扮自己的网站~ 这里以搭建phpwind社区论坛为例. 准备工作: 1. 获取phpwind安装包(加商业授权) http://market.aliyun.com/products/55586021/cmjz000388.html 重点介绍下商业授权,站长们都知道phpwind是开

阿里云学生优惠服务器购买方法和代金券使用

阿里云学生服务器优惠活动,是阿里云对在校学生的一项优惠活动.只需要9.5元就可以买到阿里云学生优惠服务器.云计算普惠校园计划,助力学生的辉煌明天! 阿里云的云翼计划,只要完成学生认证,就可以9.5元购买阿里云服务器.下面和博主一起来学习如何购买阿里云学生优惠服务器. 阿里云学生认证步骤: 1.首先登录阿里云官网,注册阿里云账号. 2.完成阿里云实名认证(可以通过淘宝或支付宝进行实名认证.因为阿里云和淘宝,支付宝都是阿里巴巴的,账号是相通的) 3.完成阿里云学生认证.认证之后就可以购买阿里云学生优

阿里云CentOS6.8云服务器配置安全组规则

前提:已经购买阿里云服务器,域名解析也完成了 需要对安全组规则进行配置,才能进行访问 1.进入阿里云首页https://www.aliyun.com/,如下图 2.进入控制台首页,如下图 3.在上图页面,点击云服务器ECS,进入下图 4.进入实例列表页面,选择实例,对实例进行如下操作 5.点击配置规则 6.添加安全组配置规则,具体规则配置请参考https://help.aliyun.com/document_detail/25475.html?spm=5176.2020520101.0.0.53