代码目录
- Primer CSS Rotation Animation
- HTML实现
- HTML实现
Primer CSS Rotation Animation
Primer CSS 动画通常用于吸引用户对动画元素的注意并获得更好的用户体验。
在本文中，我们将看到 Primer CSS 旋转动画。要将旋转动画应用于元素，我们必须将 anim-rotate 类添加到元素。具有旋转动画的元素将围绕其变换原点坐标无限旋转，在大多数情况下，该坐标是元素的中心。
Primer CSS 旋转动画类：
- anim-rotate：该类用于对元素应用旋转动画。
语法：
<element class="anim-rotate">
Content...
</element>
示例 1：此示例展示了使用 anim-rotate 类来旋转一个简单的 Primer CSS 按钮。
HTML实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>Rotation Animation - Primer CSS</title>
<link href=
" https://unpkg.com/@primer/css@^16.0.0/dist/primer.css"
rel="stylesheet" />
</head>
<body>
<div class="text-center">
<h2>GeeksforGeeks</h2>
<h4>Primer CSS - Rotation Animation</h4>
</div>
<div class="d-flex flex-justify-center mt-10">
<button type="button" class=
"anim-rotate btn-mktg btn-signup-mktg">
Rotating Button
</button>
</div>
</body>
</html>
输出：
示例 2：此示例通过向图像添加 anim-rotate 类来显示图像的旋转。
HTML实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>Rotation Animation - Primer CSS</title>
<link href=
" https://unpkg.com/@primer/css@^16.0.0/dist/primer.css" rel="stylesheet" />
</head>
<body>
<div class="text-center">
<h2 style="color:green;">
GeeksforGeeks
</h2>
<h4>Primer CSS - Image Rotation Animation</h4>
</div>
<div class="d-flex flex-justify-center mt-6">
<img class="anim-rotate" src=
" https://media.geeksforgeeks.org/wp-content/uploads/20220408213837/gfg200x200min.png" />
</div>
</body>
</html>
输出：
参考： https://primer .style/css/utilities/animations#rotation
注：本文由VeryToolz翻译自 Primer CSS Rotation Animation ，非经特殊声明，文中代码和图片版权归原作者 prakhara306所有，本译文的传播和使用请遵循“署名-相同方式共享 4.0 国际 (CC BY-SA 4.0)”协议。