摇晃的桃子

顾宇桀

已于 2022-10-22 20:06:22 修改

阅读量644

点赞数 1

文章标签： html 前端 css3

于 2022-10-22 20:04:03 首次发布

本文链接：https://blog.csdn.net/weixin_73054186/article/details/127465910

版权

学号后四位：（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; /*摇晃速度且持续*/，这嫩滑让我在今后做类似项目的时候事半功倍。