摘自:
http://www.css88.com/archives/4381
第一个例子是滚动条:(简化版chrome & safari)
第二个例子是旋转:
第一个例子是滚动条:(简化版chrome & safari)
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
.progress-bar {
background-color: #1A1A1A;
height: 25px;
padding: 5px;
width: 350px;
margin: 50px 0;
-webkit-border-radius: 5px;
-webkit-box-shadow: 0 1px 5px #000 inset, 0 1px 0 #444;
}
.progress-bar span {
display:inline-block;
height:100%;
background-color:#34C2E3;
border-radius : 3px;
/**定义宽度变化的动画效果**/
-webkit-transition: width .4s ease-in-out;
-webkit-background-size: 30px 30px;
/**定义边框的质感**/
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
background-size: 30px 30px;
background-image: -webkit-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);
-webkit-animation: animate-stripes 3s linear infinite;
}
@-webkit-keyframes animate-stripes {
0% {background-position: 0 0;} 100% {background-position: 60px 0;}
}
</style>
</head>
<body>
<div class="progress-bar blue">
<span style="width: 40%"></span>
</div>
</body>
</html>
第二个例子是旋转:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
div {
position: absolute;
left: 100px;
top: 100px;
width: 100px;
height: 100px;
background: red;
/* 定义动画的过程 */
-webkit-transition: -webkit-transform .5s ease-in, background .5s ease-in;
-moz-transition: -moz-transform .5s ease-in, background .5s ease-in;
-o-transition: -o-transform .5s ease-in, background .5s ease-in;
transition: transform .5s ease-in, background .5s ease-in;
}
div:hover {
/* 定义动画的状态 */
-webkit-transform: rotate(180deg) scale(2);
-moz-transform: rotate(180deg) scale(2);
-o-transform: rotate(180deg) scale(2);
-transform: rotate(180deg) scale(2);
background: blue;
}
</style>
</head>
<body>
<div></div>
</body>
</html>