如何用css3动画做list滑动条

html-css017

如何用css3动画做list滑动条,第1张

您好，我来为您解答：

利用CSS3的一些动画属性，我们可以让一些平凡的按钮变得生动有趣，提高用户体验。网上直接有代码可以下载。

如果我的回答没能帮助您，请继续追问。

像这种效果，你要想知道，

已经下载下来，你拆开看一下就知道了。

说说原理，这里并不是纯css3，，只是用css3定义好动画，

@-moz-keyframes tips {

0% {box-shadow: 0px 0px 0px #f00}

25% {box-shadow: 0px 0px 8px #f00}

50% {box-shadow: 0px 0px 0px #f00}

100% {box-shadow: 0px 0px 8px #f00}

}

然后，js在切屏后，用Js来触发这一个样式，这个样式调用了刚才定义的动画。

.tips {

-webkit-animation:tips 1s

-moz-animation:tips 1s

}

当然css3是可以做的，只是用纯css3，就没办法像这样可以拖动切屏，这个是需要js或者jq来完成。。。

这样写吧：

<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

}