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總結
以上是生活随笔為你收集整理的html5圆圈图标,html5移动端环形图标菜单代码的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 乐视手机android流量,乐视手机流量
- 下一篇： 华为驳斥鸿蒙六月上线,终于来了！华为鸿蒙