body
{
background-image:url(img_flower.gif),url(img_tree.gif)
}
@keyframes bg1icon8_move{
0%{transform:scale(3) rotateX(0deg)}
50%{transform:scale(2) rotateX(180deg)}
100%{transform:scale(1) rotateX(360deg)}
}
中间用空格隔开就行了, 下面是完整的例子
<!DOCTYPE HTML><html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<style type="text/css">
div{
margin:120px auto
width:60px
height:30px
background-color:#999999
transform-origin:center top
animation:bg1icon8_move 3s infinite
}
@keyframes bg1icon8_move{
0%{transform:scale(3) rotateX(0deg)}
50%{transform:scale(2) rotateX(180deg)}
100%{transform:scale(1) rotateX(360deg)}
}
</style>
<div></div>
</body>
</html>
1.效果分析纯CSS3实现进度条的制作，效果如下图所示，详见----demo----
2.难点分析
圆角边框，内阴影，
渐变填充实现斜纹效果
斜纹动画
3.实现步骤
a.html架构
<div class="progressBar blue stripes">
<span></span>
</div>
<div class="progressBar orange stripes">
<span></span>
</div>
b.进度条母条.progressBar的实现
.progressBar{
margin: 50px auto
padding: 5px
width: 360px
height: 20px
background-color: #1a1a1a
border-radius: 4px
box-shadow: 0 1px 5px #000 inset
}
c.进度条字条span的实现
.progressBar span{
display: inline-block
height: 100%
width: 60%
background-color: #777
border-radius: 3px
box-shadow: 0 1px 0 rgba(255,255,255,.5) inset
transition:all .5s ease
position: relative
z-index: 1
}
.progressBar:hover span{
width: 100%
cursor: pointer
}
d.不同颜色的变化
.blue span{
background-color: #34c2e3
}
.orange span{
background-color: #fecf23
background-image: linear-gradient(top, #fecf23, #fd9215)
}
e.斜条纹实现
.stripes span{
background-size: 30px 30px
background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%,transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,transparent 75%, transparent)
animation: stripesAnimate 1s linear infinite
}
@keyframes stripesAnimate{
0%{background-position:0 0}
100%{background-position: 60px 0}
}
.stripes:hover span{
background-image: linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,transparent 75%, transparent)
}
