动态多个圈圈的css怎么实现?

html-css015

动态多个圈圈的css怎么实现?,第1张

<div class="btnCircle zeroAlfa" style="opacity: 1 -webkit-transform: scale(1.2, 1.2)"></div>

element.style {

opacity: 0

-webkit-transform: translate(0px, 0px)

}

#subSectionStick .subSection .btnCircle {

left: 0px

top: 0px

margin-left: 0px

margin-top: 0px

width: 128px

height: 128px

position: absolute

background-color: #transparent

background-color: rgba(255, 255, 255, 0)

border: 1px solid #FFF

border: 1px solid rgba(255, 255, 255, 0.7)

-webkit-border-radius: 64px

border-radius: 64px

}

.zeroAlfa {

-webkit-opacity: 0

-moz-opacity: 0

filter: alpha(opacity=0)

opacity: 0

}

这边的设置圆圈颜色,有点歧义.

1.类似圆环的形式;2.半圆填充颜色

对于第一种那就简单了:

div{

 width: 200px

 height:200px

 border-radius: 50%

 border: 10px solid #1AA1E1

display: inline-block

box-sizing: border-box

}

第二种半圆的话,那么会相对麻烦点(当然图片的方法就不说了):

div{

width: 200px

height:200px

border-radius: 50%

position: relative

display: inline-block

box-sizing: border-box

overflow: hidden

border:1px solid #e3e3e3

}

div:after{

content: ''

position: absolute

width: 50%

height: 100%

background-color: #0000FF

top:0

left:0

}