css3怎么设置鼠标滑过旋转放大

WBOY
Freigeben: 2022-06-14 16:03:06
Original
1739 Leute haben es durchsucht

方法:1、利用“元素{animation:名称 时间}”语句给元素绑定旋转放大动画;2、利用“@keyframes”规定旋转放大的关键帧,语法为“@keyframes 名称{100%{transform:rotate(旋转角度) scale(横向放大比例,纵向放大比例);}}”。

css3怎么设置鼠标滑过旋转放大

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

css3怎么设置鼠标滑过旋转放大

在css中,可以利用animation属性给元素绑定旋转放大动画效果。

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

示例如下:

      Document  
这是一个旋转缩放的效果
Nach dem Login kopieren

输出结果:

+1.gif

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

Das obige ist der detaillierte Inhalt voncss3怎么设置鼠标滑过旋转放大. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
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
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!