什么是HTML图片晃动?
HTML图片晃动是指通过CSS动画或者JavaScript代码,使网页上的图片产生类似摇晃的效果,这种效果可以增加页面的趣味性,吸引用户的注意力,提高用户体验。
如何在HTML中实现图片晃动?
1、使用CSS3动画实现图片晃动
在CSS3中,我们可以使用@keyframes
规则来定义一个动画,然后将这个动画应用到图片上,以下是一个简单的示例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>图片晃动示例</title> <style> .shake { animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both; transform: translate3d(0, 0, 0); backface-visibility: hidden; perspective: 1000px; } @keyframes shake { 10%, 90% {transform: translate3d(-1px, 0, 0);} 20%, 80% {transform: translate3d(2px, 0, 0);} 30%, 50%, 70% {transform: translate3d(-4px, 0, 0);} 40%, 60% {transform: translate3d(4px, 0, 0);} } </style> </head> <body> <img class="shake" src="https://via.placeholder.com/150" alt="示例图片"> </body> </html>
在这个示例中,我们首先为图片添加了一个名为shake
的CSS类,然后在@keyframes
规则中定义了晃动的动画,我们将这个动画应用到了图片上,你可以根据需要调整动画的持续时间、缓动函数等参数。
2、使用JavaScript实现图片晃动
除了使用CSS3动画之外,我们还可以使用JavaScript来实现图片晃动,以下是一个简单的示例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>图片晃动示例</title> <style> .shake img { animation: shakeEffect 1s infinite; } @keyframes shakeEffect { 0% { transform: translateX(1px); } 8% { transform: translateX(-1px) rotate(-1deg); } 16% { transform: translateY(-1px) rotate(-2deg); } 24% { transform: translateY(1px) rotate(-3deg); } 32% { transform: translateX(-1px) rotate(-4deg); } 40% { transform: translateY(-1px) rotate(-5deg); } 48% { transform: translateY(1px) rotate(-6deg); } 56% { transform: translateX(1px) rotate(-7deg); } 64% { transform: translateY(-1px) rotate(-8deg); } 72% { transform: translateY(1px) rotate(-9deg); } 80% { transform: translateX(-1px) rotate(-10deg); } 88% { transform: translateY(-1px) rotate(-11deg); } 96% { transform: translateY(1px) rotate(-12deg); } 100% {} } </style> </head> <body> <img class="shake" src="https://via.placeholder.com/150" alt="示例图片"> </body> </html>
在这个示例中,我们为图片添加了一个名为shake
的CSS类,并在样式表中定义了一个名为shakeEffect
的动画,我们使用JavaScript监听鼠标滚轮事件,当用户滚动鼠标时,触发图片的晃动效果,你可以根据需要调整动画的持续时间、缓动函数等参数。
原创文章,作者:K-seo,如若转载,请注明出处:https://www.kdun.cn/ask/162948.html