CSS搖晃的桃子代碼示例：通過使用CSS的動畫效果，我們可以創建出一個逼真的桃子形狀，并在頁面上來回搖晃。本教程將介紹如何使用CSS3中的動畫效果來創建這個效果。

HTML代碼：

```html

CSS代碼：

```css

.pop-up {

position: relative;

width: 300px;

height: 200px;

.container {

position: absolute;

top: 0;

left: 0;

width: 300px;

height: 200px;

background-color: rgba(0, 0, 0, 0.5);

border-radius: 50%;

.apple,

.orange,

.yellow {

position: absolute;

top: 50%;

left: 25%;

transform: translate(-50%, -25%);

width: 100px;

height: 100px;

background-color: #f00;

.apple {

top: 0;

left: 25%;

transform: translateX(25%);

.orange {

top: 50%;

left: 0;

transform: translateX(-50%);

.yellow {

top: 0;

left: 50%;

transform: translateX(-50%);

.pop-up:before,

.pop-up:after {

content: "";

position: absolute;

top: 0;

left: 50%;

width: 100px;

height: 100px;

background-color: #f00;

transform: translateX(-50%);

.pop-up:before {

top: -50px;

.pop-up:after {

top: 0;

.pop-up:hover:before,

.pop-up:hover:after {

animation: pop-up 1s linear infinite;

@keyframes pop-up {

0% {

transform: translateX(0);

100% {

transform: translateX(300px);

這個代碼使用了一個浮動容器來包含三個桃子形狀。每個桃子形狀使用一個絕對定位，并在其中心添加一個顏色。容器使用 rgba顏色填充，并在桃子周圍設置一個border-radiusradius。桃子形狀的寬度和高度為100像素，并在其中心添加一個背景顏色。當鼠標懸停在桃子上時，使用動畫效果使桃子來回搖晃。

這個教程展示了如何使用CSS3中的動畫效果來創建出一個逼真的桃子形狀，并在頁面上來回搖晃。通過使用不同的CSS屬性和動畫效果，我們可以創建出各種形狀的桃子，例如圓形、橢圓形、桃核形等等。