初接触CSS,在学习基础CSS知识的同时试着接触CSS3的有关知识。
今天首先学习到CSS3的 animation属性,将图片实现上下滑动:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Starbuzz Coffee</title>
<style>
#award {
position: absolute;
top: 30px;
left: 365px;
-webkit-animation: move 10s infinite alternate;
animation: move 10s infinite alternate;
}
@-webkit-keyframes move {
0% {top: 30px;}
100% {top:60px;}
}
@keyframes move {
0% {top: 30px;}
100% {top:60px;}
}
</style>
</head>
<body>
<div id="award">
<img src="images/award.gif" alt="Roaster of the Year award">
</div>
</body>
</html>
然后实现左右摆动,样式为:
#award {
position: absolute;
top: 30px;
left: 365px;
-webkit-animation: shake 10s infinite;
animation: shake 10s infinite;
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
}
@-webkit-keyframes shake{50% { -webkit-transform: rotate(-10deg); }
100% { -webkit-transform: rotate(10deg); }
}
@keyframes shake{
50% { -webkit-transform: rotate(-10deg); }
100% { -webkit-transform: rotate(10deg); }
}