[分享]css3摇晃的桃子怎么插文字

最近，我在学习CSS3动画时发现了一个很有趣的效果：摇晃的桃子。我尝试着用这个特效来设计一个营销页面，让用户在点击摇晃的桃子时出现提示信息。下面是我的实现方法。 / 创建一个动画效果 / keyfra...

最近，我在学习CSS3动画时发现了一个很有趣的效果：摇晃的桃子。我尝试着用这个特效来设计一个营销页面，让用户在点击摇晃的桃子时出现提示信息。下面是我的实现方法。

/* 创建一个动画效果 */
@keyframes shake {
    0% { transform: translateX(0); }
    25% { transform: translateX(-10px); }
    50% { transform: translateX(0); }
    75% { transform: translateX(10px); }
    100% { transform: translateX(0); }
}
 
/* 将动画效果应用到桃子图片上 */
img {
    animation: shake 0.8s cubic-bezier(.36,.07,.19,.97) infinite;
    cursor: pointer;
    margin-top: 30px;
} 

这段CSS3代码用到了“@keyframes”和“animation”两个属性。其中，“@keyframes”用来定义一个动画效果，而“animation”属性用来将动画应用到指定的DOM元素上。

具体来说，代码中的“shake”动画是一个5个关键帧的动画，用来让桃子在40毫秒内左、右摇摆10像素，再回到原来的位置。我们再用“animation”属性将这个动画应用到桃子图片上，并将动画持续时间设为0.8秒，采用贝塞尔曲线作为动画的缓动函数。最后，用“cursor”属性将鼠标手型设置为手指形状，用“margin-top”属性将桃子往下移动一些。

接下来，我就可以将这张摇晃的桃子图片插入到我的HTML页面中，并为其添加一个点击事件监听器，实现点击桃子时弹出提示信息的效果。

// 获取桃子图片元素
var peachImg = document.querySelector("#peach-img");
 
// 添加点击事件监听器
peachImg.addEventListener("click", function() {
    alert("你好啊，欢迎来到我的营销页面！");
}); 

以上就是我的实现方法了。通过这个例子，我们可以看到，借助CSS3的动画效果，我们不仅可以为网页增添趣味，还可以实现一些非常有趣的交互效果。