css3 实现动画效果,怎样使他无限循环动下去?

html-css011

css3 实现动画效果,怎样使他无限循环动下去?,第1张

鼠标悬停,图标会一直不停旋转。 

如果实现图标一直不停旋转,则需要使用animation动画。先制作动画的各个关键帧,然后在图标中运用这一动画。

具体操作如下:

变色:使css的动画animate可以实现。

放大:使用css的过渡效果translate就可以了实现

如果你要同时实现,那就都用animate,样式代码写在一起

首先是必须要有js跟CSS配合起来的,当然两者都不一定,例如js也可以实现动画效果,只是麻烦,要简单点直接用JQ里面的animate()方法配合css控制动画,又或者直接一点使用CSS3实现动画,注意是css3,但就你的代码写的是走马灯这种早就没人用的写法,目测你是个初学者,所以我的回答你并不会采纳,因为你看不懂,现在一般都用脚本写轮播图,没人用走马灯的了。

CSS3的悬停我可以写给你,JQ目测写出来对你也没多大用处,到时还得绑定什么的你一搞不出觉得我瞎说不采纳我那更悲剧

给img标签加上class或者给marquee加上class,否则怎么搞,我这里就以直接给img加上class="animate"写给你了

.animate:hover{-webkit-transform:scale(1.25,1.25)transform:scale(1.25,1.25)box-shadow: 5px 5px 6px rgba(0, 0, 0, 0.4)-webkit-transition:all .4s-moz-transition:all .4s-o-transition:all .4s-ms-transition:all .4stransition:all .4s}

里面的大小什么都是可以控制的,包括时间,这些就拜托您上W3C看看,我已经打了很多东西了,你要有良心就采纳,采纳后可以追问,否则别追问我问题了哈,我是web前端,语气有点叼,因为我被迫来问答里混,原谅我一个技术人员被叫来干这些鸟不拉屎的工作,所以带点脾气