index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3 实现摇晃的桃子动画特性</title>
<link rel="stylesheet" type="text/css"
href="css/peach.css">
</head>
<body>
<div class="act_wrapper">
<div class="act_content">
<div class="mod_style">
<p>摇晃的桃子</p>
<span class="peach peach1 shake1"></span>
<span class="peach peach2 shake2"></span>
<span class="peach peach3 shake3"></span>
<span class="peach peach4 shake4"></span>
<span class="peach peach5 shake5"></span>
<span class="peach peach6 shake6"></span>
</div>
</div>
<dic class="act_bg"></dic>
</div>
</body>
</html>
peach.css
.act_wrapper {
position: relative;
z-index: 1;/*元素堆叠顺序,正数表示离用户近*/
/*元素最小宽度为1000px*/
min-width: 1000px;
margin: 0 auto;
overflow: hidden;
}
.act_wrapper .act_content {
position: relative;
z-index: 2;
width: 1000px;
height: 1200px;
margin: 0 auto;
margin-top: -569px;
}
.mod_style {
position: absolute;
top: 716px;
left: 200px;
width: 870px;
height: 560px;
}
/*背景图片*/
.act_wrapper .act_bg {
position: absolute;
left: 50%;
top: 0;
z-index: 1;
width: 1920px;
margin-left: -1350px;
background: url(../images/bg.jpg) 100% 0 no-repeat;
height: 750px;
}
p {
font-family: "微软雅黑";
font-size: 40px;
position: absolute;
top: -100px;
left: 0px;
}
.peach {
position: absolute;
top: 0;
left: 0;
width: 90px;
height: 100px;
/*设置背景图片*/
background: url(../images/peach.png) no-repeat 0 0;
}
.peach1 {
background-position: 0 0;
top: 100px;
left: 72px;
}
.peach2 {
background-position: 0 -115px;/*取peach.png中第几个桃子*/
top: 39px;
left: 242px;
}
.peach3 {
background-position: 0 -215px;
top: 71px;
left: 452px;
}
.peach4 {
background-position: 0 -328px;
top: 156px;
left: 261px;
}
.peach5 {
background-position: 0 -435px;
top: 256px;
left: 412px;
}
.peach6 {
background-position: 0 -545px;
top: 247px;
left: 575px;
}
.shake1 {
animation-duration: 2.5s;
}
.shake2 {
animation-duration: 3.5s;
}
.shake3 {
animation-duration: 1.5s;
}
.shake4 {
animation-duration: 4s;
}
.shake5 {
animation-duration: 3s;
}
.shake6 {
animation-duration: 4s;
}
.shake1,.shake2,.shake3,.shake4,.shake5,.shake6 {
/*播放次数:无限*/
animation-iteration-count: infinite;
/*播放动画名称:shake*/
animation-name: shake;
/*设置动画速度曲线:以低速度开始和结束*/
animation-timing-function: ease-in-out;
}
/*定义动画名称:shake*/
@keyframes shake {
0% {
transform: rotate(2deg);
transform-origin: 50% 0;
}
20% {
transform: rotate(10deg);
transform-origin: 50% 0;
}
40% {
transform: rotate(0deg);
transform-origin: 50% 0;
}
60% {
transform: rotate(-2deg);
transform-origin: 50% 0;
}
80% {
transform: rotate(-10deg);
transform-origin: 50% 0;
}
100% {
transform: rotate(0deg);
transform-origin: 50% 0;
}
}
运行效果