js+css 圆形环形 排列

html-css026

js+css 圆形环形 排列,第1张

项目需要做个环形的导航排列,网上找到一篇详细介绍原理的文章 javascript-按圆形排列DIV元素(一)---- 分析 ,然后尝试着把它实现了,效果图如下:

源码分享给大家哦,拿走不谢O(∩_∩)O

vue版本的根据项目需求做了些略微的修改

纯css实现。这个小圆点应该是一个a标签:

a{

width: 6px

height: 6px

float: right

margin-right: 6px

background-color: black

border-radius: 50%

}

a:hover{

width: 12px

height: 12px

}

这个是背景图片

然后可以用

连接样式来实现

如果用div做圆角只能是三个div一个比一个长

比如最上面的可以用996

*1

填充颜色

第二个是998

*

第三个是1000

就是放导航的地方了

让他们都剧中就可以了