首页 > 代码库 > 阿里云首页特效

阿里云首页特效

2024-08-20 21:52:45   223人阅读

技术分享 
<!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

 

阿里云首页特效


联系
我们