猿问

css3如何让图片自动移动

css3如何让图片自动移动


森林海
浏览 1753回答 1
1回答

HUH函数

自动移动,目前css3是有这样的效果的,叫做css3动画给你一个示例你要注意的一点是目前这个只能支持最低为IE10及以上版本才能够运行的哦Chrome 和 Safari 需要前缀 -webkit-。<!DOCTYPE html><html><head><style> div{width:100px;height:100px;background:red;position:relative;animation:myfirst 5s;-moz-animation:myfirst 5s; /* Firefox */-webkit-animation:myfirst 5s; /* Safari and Chrome */-o-animation:myfirst 5s; /* Opera */} @keyframes myfirst{0%   {background:red; left:0px; top:0px;}25%  {background:yellow; left:200px; top:0px;}50%  {background:blue; left:200px; top:200px;}75%  {background:green; left:0px; top:200px;}100% {background:red; left:0px; top:0px;}} @-moz-keyframes myfirst /* Firefox */{0%   {background:red; left:0px; top:0px;}25%  {background:yellow; left:200px; top:0px;}50%  {background:blue; left:200px; top:200px;}75%  {background:green; left:0px; top:200px;}100% {background:red; left:0px; top:0px;}} @-webkit-keyframes myfirst /* Safari and Chrome */{0%   {background:red; left:0px; top:0px;}25%  {background:yellow; left:200px; top:0px;}50%  {background:blue; left:200px; top:200px;}75%  {background:green; left:0px; top:200px;}100% {background:red; left:0px; top:0px;}} @-o-keyframes myfirst /* Opera */{0%   {background:red; left:0px; top:0px;}25%  {background:yellow; left:200px; top:0px;}50%  {background:blue; left:200px; top:200px;}75%  {background:green; left:0px; top:200px;}100% {background:red; left:0px; top:0px;}}</style></head><body> <p><b>注释:</b>本例在 Internet Explorer 中无效。</p> <div></div> </body></html>
随时随地看视频慕课网APP
我要回答