CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSで画像を振ったり小刻みに動かしたりする方法は？

以下はCSSで画像を振るコードです-

例

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
img{
   width: 400px;
   height: 400px;
   margin:50px;
}
img:hover {
   animation: shakeImg 0.5s;
   animation-iteration-count: infinite;
}
@keyframes shakeImg {
   0% { transform: translate(1px, 1px) rotate(5deg); }
   20% { transform: translate(-3px, 0px) rotate(10deg); }
   30% { transform: translate(3px, 2px) rotate(-10deg); }
   50% { transform: translate(-1px, 2px) rotate(-20deg); }
   70% { transform: translate(3px, 1px) rotate(-25deg); }
   90% { transform: translate(1px, 2px) rotate(10deg); }
   100% { transform: translate(1px, -2px) rotate(-10deg); }
}
</style>
</head>
<body>
<h1>Hover over the image to shake it<h1>
<img src="https://i.picsum.photos/id/551/400/400.jpg">
</body>
</html>

出力

上記のコードは次の出力を生成します-

CSSで画像を振ったり小刻みに動かしたりする方法は？

下の出力に示すように、画像にカーソルを合わせると揺れます-

CSSで画像を振ったり小刻みに動かしたりする方法は？


  1. CSSを使用して画像に境界線を追加するにはどうすればよいですか？

    以下は、CSSを使用して画像に境界線を追加するコードです- 例 <!DOCTYPE html> <html> <head> <style> img {    border: 8px solid rgb(0, 238, 255);    width: 400px;    height: 400px; } </style> </head> <body> <h1>Border Around Image Example</h1> <

  2. CSSを使用して画像にボタンを追加するにはどうすればよいですか？

    以下は、CSSを使用して画像にボタンを追加するためのコードです- 例 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> img{    width: 100%; } div {    position: relative;    width: 100%;   &nb