css3动态进度条有数字代码怎么写

html-css08

css3动态进度条有数字代码怎么写,第1张

这样写吧:

<div class="meter">

<span style="width: 25%"></span>

</div>

.meter {

height: 20px /* Can be anything */

position: relative

background: #555

-moz-border-radius: 25px

-webkit-border-radius: 25px

border-radius: 25px

padding: 10px

box-shadow: inset 0 -1px 1px rgba(255,255,255,0.3)

}

.meter >span {

display: block

height: 100%

border-top-right-radius: 8px

border-bottom-right-radius: 8px

border-top-left-radius: 20px

border-bottom-left-radius: 20px

background-color: rgb(43,194,83)

background-image: linear-gradient(

center bottom,

rgb(43,194,83) 37%,

rgb(84,240,84) 69%

)

box-shadow:

inset 0 2px 9px rgba(255,255,255,0.3),

inset 0 -2px 6px rgba(0,0,0,0.4)

position: relative

overflow: hidden

}

.orange >span {

background-color: #f1a165

background-image: linear-gradient(to bottom, #f1a165, #f36d0a)

}

.red >span {

background-color: #f0a3a3

background-image: linear-gradient(to bottom, #f0a3a3, #f42323)

}

.meter >span:after {

content: ""

position: absolute

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

background-image: linear-gradient(

-45deg,

rgba(255, 255, 255, .2) 25%,

transparent 25%,

transparent 50%,

rgba(255, 255, 255, .2) 50%,

rgba(255, 255, 255, .2) 75%,

transparent 75%,

transparent

)

z-index: 1

background-size: 50px 50px

animation: move 2s linear infinite

border-top-right-radius: 8px

border-bottom-right-radius: 8px

border-top-left-radius: 20px

border-bottom-left-radius: 20px

overflow: hidden

}

<div class="div" id="0" style="position: fixedz-index: 2147483646left: 0pxwidth: 100%text-align: centerbottom: -5px background:red">

</div>

//上面的样式,修改了一下,加了一个class和设置了一个背景图。

<script type="text/javascript">

var div = document.getElementsByClassName('div')[0]

//在它的后面加上''转换成字符串

var oid = oRandom(1,99999) + '' 

//设置新的id值

div.setAttribute('id',oid)

//设置样式

div.style.height = '100px'

//用下面的函数,产生一个n-m的随机整数

function oRandom(n,m){

  var c=m-n+1

  return Math.floor(Math.random()*c+n)

}

</script>

//我不知道你有什么用,但是无论id值怎么变,div的高度都是恒定的。

给你个思路:${functon(){

$("*").hover(function(){

function () {

$(this).addClass("你css的class名称")

},

function () {

$(this).removeClass("你css的class名称")

}

})

}}

但是首先你要定义一个给对象添加圆圈背景的css,然后响应的改下值就行了