因此说,你的问题有一定的歧义的。
css3还有一种方法可以实现滚动。就是使用过度效果(transition),他也可以实现滚动的效果。而且,个人感觉比较符合你的意思。
其具体的做法是,给超链接滑过状态一个图片属性,如:
li a img {margin-top:0px}
li a:hover img {margin-top:-20px}
li a img {-webkit-transition: margin-top 0.5s}/*注意这里的hack,照顾多个浏览器*/
这样,鼠标滑上图片,图片就会动画向上滑动20像素,鼠标离开,又滑下来。
再扯下严格意义的【动态滚动的图片】,一般的解释是一组图片可以在某个区域内动画滑动。注意是一组。css通常不具有处理多组图片(也有css模拟动画帧的效果的)的效果。动态滚动图片常见的有2种,一种是可控制的滚动列表,一种是自动无限循环滚动。通常用来作为滚动新闻、组图或相册(风采)使用。
<div class="container"><div class="light"></div>
</div>
<style>
.container{
border-radius: 50%
background: #49b0fd
width: 100px
height: 100px
}
.light{
width: 100px
height: 100px
box-shadow: 0 0 2px 2px rgba(0,0,0,1)
border-radius: 50%
transform-origin: center center
position: relative
animation: linear mymove 5s infinite
}
.light:after {
position: absolute
left: -5px
top: 50%
margin-top: -5px
content: ""
width: 10px
height: 10px
background: red
border-radius: 20px
}
@keyframes mymove{
from {transform:rotate(0deg)}
to {transform:rotate(360deg)}
}
</style>
老铁,看看这段,核心的样式写出来了,具体大小就由老铁自己去试着改啦。
几个注意点:1.两个容器最好一样大。2. 光点大小变了对应的 left和margin-top也要改。3.动画时间、动画缓动也可以改
引入jquery
然后给你要设置动画的对象增加或者删除css3动画的类就可以了。
如我这里用colorchange这个渐变类在css里面写好动画效果以后在js里面给对象添加上就可以实现动画了
<!DOCTYPE html><html>
<head lang="en">
<meta charset="UTF-8">
<title>Test</title>
<style type="text/css">
body{
padding: 20px
background-color:#FFF
}
.colorchange
{
animation:myfirst 5s
-moz-animation:myfirst 5s /* Firefox */
-webkit-animation:myfirst 5s /* Safari and Chrome */
-o-animation:myfirst 5s /* Opera */
}
@keyframes myfirst
{
from {background:red}
to {background:yellow}
}
@-moz-keyframes myfirst /* Firefox */
{
from {background:red}
to {background:yellow}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
from {background:red}
to {background:yellow}
}
@-o-keyframes myfirst /* Opera */
{
from {background:red}
to {background:yellow}
}
#main{
width:100px
height:100px
background:red
}
#cgbt{
width: 100px
margin: 20px 0 0 0
text-align: center
cursor: pointer
}
#cgbt:hover{
background-color: #2D93CA
}
</style>
</head>
<body>
<div id="main">
我会变么?
</div>
<div id="cgbt">
点我让上面的变颜色
</div>
<script src="jquery-3.2.1.min.js" type="application/javascript"></script>
<script>
$(document).ready(function(){
$("#cgbt").click(function(){
$("#main").attr("class","colorchange")
})
})
</script>
</body>
</html>