代码如下：
<! DOCTYPE html >
< html lang ="zh" >
< head >
< meta charset ="UTF-8" >
< meta http-equiv ="X-UA-Compatible" content ="IE=edge,chrome=1" >
< meta name ="viewport" content ="width=device-width, initial-scale=1.0" >
< title > 纯CSS3圆形主菜单展开特效 - 何问起 </ title >< base target ="_blank" />
< link href ="http://hovertree测试数据/texiao/css3/44/css/bootstrap.min.css" rel ="stylesheet" >
< link href ="http://hovertree测试数据/texiao/css3/44/css/font-awesome.min.css" rel ="stylesheet" >
< link rel ="stylesheet" type ="text/css" href ="http://hovertree测试数据/texiao/css3/44/css/hewenqi.css" >
< style type ="text/css" >
.demo {
padding : 2em 0 ;
transform : translate3d(0, 0, 0) ;
}
.navbar {
width : 150px ;
height : 150px ;
line-height : 150px ;
border-radius : 50% ;
background : #fff ;
margin : 70px auto ;
position : relative ;
cursor : pointer ;
text-align : center ;
font-size : 1.75em ;
font-weight : bold ;
color : #99b977 ;
transition : 0.24s 0.2s ;
}
.navbar:hover {
background : rgba(255, 255, 255, 0.75) ;
}
.navbar .menu {
list-style : none ;
padding : 0 ;
margin : 0 ;
position : absolute ;
top : -75px ;
left : -75px ;
border : 150px solid transparent ;
cursor : default ;
border-radius : 50% ;
transform : scale(0) ;
transition : transform 1.4s 0.07s ;
z-index : -1 ;
}
.navbar:hover .menu {
transition : transform 0.4s 0.08s, z-index 0s 0.5s ;
transform : scale(1) ;
z-index : 1 ;
}
.navbar .menu li {
position : absolute ;
top : -100px ;
left : -100px ;
transform-origin : 100px 100px ;
transition : all 0.5s 0.1s ;
}
.navbar:hover .menu li {
transition : all 0.6s ;
}
.navbar .menu li a {
width : 45px ;
height : 45px ;
line-height : 45px ;
border-radius : 50% ;
background : #fff ;
position : absolute ;
font-size : 60% ;
color : #99b977 ;
transition : 0.6s ;
}
.navbar:hover .menu li:nth-child(1) {
transition-delay : 0.02s ;
transform : rotate(85deg) ;
}
.navbar:hover .menu li:nth-child(1) a {
transition-delay : 0.04s ;
transform : rotate(635deg) ;
}
.navbar:hover .menu li:nth-child(2) {
transition-delay : 0.04s ;
transform : rotate(125deg) ;
}
.navbar:hover .menu li:nth-child(2) a {
transition-delay : 0.08s ;
transform : rotate(595deg) ;
}
.navbar:hover .menu li:nth-child(3) {
transition-delay : 0.06s ;
transform : rotate(165deg) ;
}
.navbar:hover .menu li:nth-child(3) a {
transition-delay : 0.12s ;
transform : rotate(555deg) ;
}
.navbar:hover .menu li:nth-child(4) {
transition-delay : 0.08s ;
transform : rotate(205deg) ;
}
.navbar:hover .menu li:nth-child(4) a {
transition-delay : 0.16s ;
transform : rotate(515deg) ;
}
.navbar:hover .menu li:nth-child(5) {
transition-delay : 0.1s ;
transform : rotate(245deg) ;
}
.navbar:hover .menu li:nth-child(5) a {
transition-delay : 0.2s ;
transform : rotate(475deg) ;
}
.navbar:hover .menu li:nth-child(6) {
transition-delay : 0.12s ;
transform : rotate(285deg) ;
}
.navbar:hover .menu li:nth-child(6) a {
transition-delay : 0.24s ;
transform : rotate(435deg) ;
}
.navbar:hover .menu li:nth-child(7) {
transition-delay : 0.14s ;
transform : rotate(325deg) ;
}
.navbar:hover .menu li:nth-child(7) a {
transition-delay : 0.28s ;
transform : rotate(395deg) ;
}
.navbar:hover .menu li:nth-child(8) {
transition-delay : 0.16s ;
transform : rotate(365deg) ;
}
.navbar:hover .menu li:nth-child(8) a {
transition-delay : 0.32s ;
transform : rotate(355deg) ;
}
.navbar:hover .menu li:nth-child(9) {
transition-delay : 0.18s ;
transform : rotate(405deg) ;
}
.navbar:hover .menu li:nth-child(9) a {
transition-delay : 0.36s ;
transform : rotate(315deg) ;
}
</ style >
</ head >
< body >
< div class ="demo" >
< div class ="container" >
< div class ="row" >
< div class ="col-md-12" >
< div class ="navbar" > 主菜单
< ul class ="menu" >
< li >< a href ="http://hovertree测试数据/h/bjaf/hpv2kwl1.htm" class ="fa fa-facebook" ></ a ></ li >
< li >< a href ="http://hovertree测试数据/h/bjag/mej790la.htm" class ="fa fa-google-plus" ></ a ></ li >
< li >< a href ="http://hovertree测试数据/h/bjaf/28bhvmmu.htm" class ="fa fa-twitter" ></ a ></ li >
< li >< a href ="http://hovertree测试数据/h/bjag/ajaxmvc.htm" class ="fa fa-linkedin" ></ a ></ li >
< li >< a href ="http://hovertree测试数据/h/bjag/o46xlsnm.htm" class ="fa fa-pinterest" ></ a ></ li >
< li >< a href ="http://hovertree测试数据/h/bjag/toiq32dh.htm" class ="fa fa-rss" ></ a ></ li >
< li >< a href ="http://hovertree测试数据/h/bjaf/aqm3qaed.htm" class ="fa fa-instagram" ></ a ></ li >
< li >< a href ="http://hovertree测试数据/h/bjaf/c2c0k0tf.htm" class ="fa fa-skype" ></ a ></ li >
< li >< a href ="http://hovertree测试数据/h/bjaf/ati6k7yk.htm" class ="fa fa-github" ></ a ></ li >
</ ul >
</ div >
</ div >
</ div >
</ div >
</ div >
< div style ="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';" >
< p > 适用浏览器：支持CSS3的浏览器 </ p >
< p > 来源： < a href ="http://hovertree测试数据/" target ="_blank" > 何问起 </ a ></ p >
</ div >
</ body >
</ html >
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did72774