学号后四位:(0207)
邀请人ID:(非必填)
知识点
margin: 0 auto; /*居中*/
min-width: ; /*不能少于多少像素*/
overflow: hidden; /*超出部分隐藏*/background:url(img/bg.jpg) no-repeat; /*no-repeat不重复*/
position: relative; /*相对定位*/
font-size: ; /*字体大小*/
position: absolute; /*绝对定位*/
left: 180px; /*离左边的距离*/
top: ; /*里顶部距离*/transform: rotate(2deg); /*转动角度*/
transform-origin: 50% 0; /*旋转基点位置*/animation: tao 1s ease-in-out infinite; /*摇晃速度且持续*/
让桃子在选好的位置上摇晃起来
项目代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>摇晃的桃子</title>
<style>
.shu{
margin: 0 auto; /*居中*/
min-width: 1000px; /*不能少于1000像素*/
overflow: hidden; /*超出部分隐藏*/
}
.bg{
height: 631px;
width: 1146px;
background:url(img/bg.jpg) no-repeat; /*no-repeat不重复*/
margin: 0 auto;
position: relative; /*相对定位*/
}
p{
font-size: 40px; /*字体大小*/
position: absolute; /*绝对定位*/
left: 180px; /*离左边的距离*/
top: 70px; /*里顶部距离*/
}
.peach{
width: 90px; /*宽度*/
height: 100px; /*高度*/
position: absolute; /*绝对定位*/
background: url("./img/peach.png"); /*背景图片*/
}
.peach1{
top: 250px;
left: 345px;
background-position: 0 0; /*背景位置*/
}
.peach2{
top: 310px;
left: 530px;
background-position: 0 0;
}
.peach3{
top: 298px;
left: 686px;
background-position: 0 0;
}
.peach4{
top: 288px;
left: 846px;
background-position: 0 0;
}
.peach5{
top: 188px;
left: 735px;
background-position: 0 0;
}
.peach6{
top: 448px;
left: 626px;
background-position: 0 0;
}
@keyframes tao{
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(-4deg);
transform-origin: 50% 0;
}
80%{
transform: rotate(-10deg);
transform-origin: 50% 0;
}
100%{
transform: rotate(-2deg);
transform-origin: 50% 0;
}
}
.shake1{
animation: tao 1s ease-in-out infinite; /*摇晃速度且持续*/
}
.shake2{
animation: tao 2s ease-in-out infinite;
}
.shake3{
animation: tao 2s ease-in-out infinite;
}
.shake4{
animation: tao 2s ease-in-out infinite;
}
.shake5{
animation: tao 1s ease-in-out infinite;
}
.shake6{
animation: tao 0.5s ease-in-out infinite;
}
</style>
</head>
<body>
<div class="shu">
<div class="bg">
<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>
</body>
</html>
项目完成思路
先是给图片和字体调整好,然后重头戏就是着重整理桃子,找到图片中合适位置的坐标,然后赋予每个桃子,在运用css让桃子在图片中摇晃起来。
项目实现过程中遇到的问题及解决方案
在找坐标时一开始找的桃子图片的坐标,导致怎么都显示不到树枝图片上,应该是找树枝图片的坐标然后赋予给每个桃子,在设置摇晃的时候也出现了一些小插曲,一开始总是设的摇晃一下,不能一直摇晃,后来问了同学知道要用(animation: tao 1s ease-in-out infinite; /*摇晃速度且持续*/)来保持摇晃。
笔记整理
在这次项目中我学到了很多css应用技巧,比如:transform: rotate(2deg); /*转动角度*/
transform-origin: 50% 0; /*旋转基点位置*/和animation: tao 1s ease-in-out infinite; /*摇晃速度且持续*/,这嫩滑让我在今后做类似项目的时候事半功倍。