码迷，mamicode.com
首页 > 其他好文 > 详细

阿里云首页特效

时间：2016-11-14 19:55:28      阅读：558      评论：0      收藏：0      [点我收藏+]

标签：visible   地理位置   rgb   name   16px   1.3   webkit   indicator   c51   

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

 

阿里云首页特效

标签：visible   地理位置   rgb   name   16px   1.3   webkit   indicator   c51   

原文地址：http://www.cnblogs.com/dongxiaolei/p/6062875.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！