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前端，语气有点叼，因为我被迫来问答里混，原谅我一个技术人员被叫来干这些鸟不拉屎的工作，所以带点脾气
应用css实现走马灯置顶显示超出显示
用到命令 text-overflow ： clip | ellipsis 文本超出：截断|省略
但这一条命令是看不到效果的，需要另外两条命令配合使用，让文本能够溢出，第一个是强制一行内显示，white-space:nowrap；第二个是溢出内容隐藏,overflow:hidden
超出跑马等效果
老的前端开发人员对于marquee标签肯定不陌生，一个被淘汰的标签，被刚入门的新手所喜爱，因为能通过一个简单的标签做出动态的效果。但是在实际应用上的局限性和效果的过时，使这个标签退出历史舞台，大家纷纷改用js来实现无间断滚动等效果。
新的CSS3 marquee设置，可以说功能强大了很多，更加易操作，用简单的代码解决了js中比较纠结的字符长度判断等难题。强烈推荐大家使用。
对于这个属性的定义，W3C标准用法和webkit内核浏览器的支持用法并不相同，由于我们立足实战实用，所以这里只介绍好用的。可用的。
我们需要四句常用命令
overflow:-webkit-marquee//指定溢出时滚动。
-webkit-marquee-style:scroll | slide | alternate//跑马灯样式，分三种。
scroll，从一端滚动到另一端，内容完全滚入（消失）时重新开始。slide，从一端滚到另一端，内容接触到另一端后，立马重新开始。alternate，内容不跑到显示区域外，在里面来回碰壁反弹。这里主要用第一种。
-webkit-marquee-repetition:infinite | number// 跑马灯跑的次数，infinite 为无限多次，不结束。或者可以用正整数设置滚动的次数。
-webkit-marquee-direction:up | down | left | right//跑动的方向，这个要注意结合实际情况，即实际你操作的标签文本流溢出在哪个方向溢出。
-webkit-marquee-speed:slow | normal | fast//跑动的速度设置。
这个完全是我本人自己真实项目当中的代码
http://1.xifan00520.applinzi.com/weixin/index.html
其实不用js 用css3就能完成
代码如下
标签：{
background: -webkit-gradient(linear,left top,right top,color-stop(0, #3CAF5A),color-stop(0.3, #3CAF5A),color-stop(0.5, white),color-stop(0.7, #3CAF5A),color-stop(1, #3CAF5A))
background-clip: text//文字背景区域
-webkit-background-clip: text
-webkit-text-fill-color: transparent
text-fill-color: transparent
-webkit-animation: slidetounlock 2s linear infinite//动画执行的参数 第一是 动画执行的名字 第二是所需时间 第三是执行动画的快慢infinite是均速 第四个参数是循环
animation: slidetounlock 2s linear infinite
}
为了兼容建议把写全 百分比是指动画执行到多少以后执行里面的动画
@keyframes slidetounlock{
0% {
background-position: -2rem 0
}
80% {
background-position: 1rem 0
}
100% {
background-position: 2rem 0
}
}
@-webkit-keyframes slidetounlock{
0% {
background-position: -2rem 0
}
80% {
background-position: 1rem 0
}
100% {
background-position: 2rem 0
}
}
@-moz-keyframes slidetounlock{
0% {
background-position: -1.1rem 0
}
80% {
background-position: 1rem 0
}
100% {
background-position: 1.1rem 0
}
}
@-ms-keyframes slidetounlock{
0% {
background-position: -1.1rem 0
}
80% {
background-position: 1rem 0
}
100% {
background-position: 1.1rem 0
}
}
@-o-keyframes slidetounlock{
0% {
background-position: -1.1rem 0
}
80% {
background-position: 1rem 0
}
100% {
background-position: 1.1rem 0
}
}
之后你只需要设置文字所在容器的宽度就行，用px可以代替rem；可根据自己的需求来修改
最后效果就是
白色会一直从左到右 有点像早期苹果滑动解锁的那种动画，这个可以根据实际需求来修改
