html5圆圈图标,html5移动端环形图标菜单代码

特效描述：html5移动端 环形图标菜单。html5移动端环形图标菜单代码

代码结构

1. 引入JS

2. HTML代码



html5移动端环形图标菜单代码

window.οnlοad=function(){

$(".one").on("tap",function(){

$(".box-listp").css({width:15,height:15,opacity:0,top:0,left:0,right:0,bottom:0,margin:"auto"})

})

$(".box-list1").on('tap',function(){

$(".box-list2").css({top:-120,left:-120});

$(".box-list3").css({top:140,left:-20});

$(".box-list4").css({top:90,right:-90});

$(".box-list5").css({top:-100,right:-80});

$(".box-list6").css({bottom:-60,left:-150});

$(".box-listp").css({width:45,height:45,opacity:1});

})

}

.box{

width:400px;

height:400px;

background:url(img/bj1.jpg) no-repeat;

background-size:contain;

margin:100px auto;

}

.box-con{

width:380px;

height:40px;

float:left;

position:relative;

margin-left:10px;

}

.one{

width:60px;

height:25px;

line-height:25px;

background:red;

font-family:"eras medium itc";

text-align:center;

color:#fff;

position:absolute;bottom:0;right:0;

transition:all 2s;

cursor:pointer;

}

.box-con2{

width:100%;

height:100px;

margin:20px auto;

float:left;

}

.box-list{

width:200px;

height:240px;

overflow:hidden;

margin:0 auto;

position:relative;

}

.box-list1{

border-radius:50%;

width:46px;

height:50px;

background:url(img/2.png);

background-size:contain;

position:absolute;

left:0;right:0;bottom:0;top:0;

margin:auto;

z-index:5;

}

.box-listp{

width:10px;

height:10px;

border-radius:50%;

position:absolute;

opacity:0;

transition:all 1s cubic-bezier(.61,1.81,.56,-0.33);

top:0;right:0;left:0;

bottom:0;margin:auto;

}

.box-list2{

background:url(img/6.jpg);

background-size:contain;

}

.box-list3{

background:url(img/1.jpg);

background-size:contain;

}

.box-list4{

background:url(img/4.jpg);

background-size:contain;

}

.box-list5{

background:url(img/7.jpg);

background-size:contain;

}

.box-list6{

background:url(img/5.jpg);

background-size:contain;

}

close