css3怎样实现翻转2次效果
发布时间:2023-12-26 00:47:47 所属栏目:语言 来源:DaWei
导读: 在css中,想要实现元素翻转2次的效果,可以利用“@keyframes”规则、animation和transform属性设置元素翻转的动画效果。
此时元素的翻转动画,如果不设置的话智慧翻转一次,我
此时元素的翻转动画,如果不设置的话智慧翻转一次,我
在css中,想要实现元素翻转2次的效果,可以利用“@keyframes”规则、animation和transform属性设置元素翻转的动画效果。 此时元素的翻转动画,如果不设置的话智慧翻转一次,我们可以利用animation-iteration-count属性设置元素动画的次数。 animation-iteration-count 属性定义动画的播放次数。 语法如下: animation-iteration-count: n|infinite; 示例如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> img{ animation:fadenum 5s ; animation-iteration-count:2; } @keyframes fadenum{ 100%{transform:rotateY(360deg);} } </style> </head> <body> <img src="1115.08.png"> </body> </html> 以上就是CSS中控制播放动画次数的方法,上述示例具有一定的参考价值,有需要的朋友可以了解看看,希望对大家学习CSS有帮助。 (编辑:大连站长网) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
推荐文章
站长推荐