Heim > Web-Frontend > CSS-Tutorial > Hauptteil

css3怎样实现旋转加位移动画

WBOY
Freigeben: 2021-12-16 15:25:37
Original
4035 人浏览过

方法:1、用animation属性给元素绑定动画;2、用“@keyframes 名称{100%{transform:rotate(旋转角度)translate(位移距离);}}”语句设置元素的旋转和位移的动作关键帧,实现旋转加位移动画效果。

css3怎样实现旋转加位移动画

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

css3怎样实现旋转加位移动画

在css中,可以利用animation属性给元素绑定旋转位移动画。

利用@keyframes规则设置元素的动画动作关键帧,利用transform属性配合rotate()函数设置元素旋转动作,利用transform属性配合translate()函数设置元素位移动作。

示例如下:




    
    
    
    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!