在css3动画中用什么定义旋转动画

WBOY
Freigeben: 2022-03-22 15:46:02
Original
1779 人浏览过

在css3中,可以利用@keyframes规则、animation和transform属性定义旋转动画;animation属性用于绑定元素动画效果,@keyframes规则用于设置元素动画动作,transform属性用于设置元素的旋转样式。

在css3动画中用什么定义旋转动画

本教程操作环境:windows10系统、CSS3&&HTML5版、Dell G3电脑。

在css3动画中用什么定义旋转动画

通过 @keyframes 规则,您能够创建动画。

创建动画的原理是,将一套 CSS 样式逐渐变化为另一套样式。

animation 属性是一个简写属性,用于设置六个动画属性:

animation: name duration timing-function delay iteration-count direction;
Nach dem Login kopieren

12.png

transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

otate(angle)定义 2D 旋转,在参数中规定角度。

示例如下:




    
    
    
    Document
    

Nach dem Login kopieren

输出结果:

+1.gif

(学习视频分享:css视频教程

以上是在css3动画中用什么定义旋转动画的详细内容。更多信息请关注PHP中文网其他相关文章!

Verwandte Etiketten:
css
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!