css3如何让图片自动移动

html-css014

css3如何让图片自动移动,第1张

自动移动，目前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>

经测试，采用Firefox 45.0.1存在闪烁问题，并发现以下浏览器的某个版本：微信内置浏览器、QQ浏览器、Safari手机浏览器及早期的Chrome可能存在类似情况，包括载入闪动，悬停后闪动。分析：Blink对transition中，属性transform的动画渲染存在差异，而Chrome中的最新版本，已经不存在此情况。解决方法：<style>.outter { height: 375px margin: 10px auto width: 500px }.inner{}img:hover { width:110% margin-left:-5% margin-top:-5%}img{width:100% transition:0.4s ease-in-out}</style>复制代码以上CSS，在IE10、IE11、Chrome及Firefox 45.0.1中调试通过：首次载入，及Ctrl+F5刷新，均不会有闪动情况

下面是一个例子，具体的需要你自己慢慢学习。

<!DOCTYPE html>

<html>

<head>

<style> 

div

{

width:100px

height:100px

background:red

position:relative

animation:myfirst 5s linear 2s infinite alternate

/* Firefox: */

-moz-animation:myfirst 5s linear 2s infinite alternate

/* Safari and Chrome: */

-webkit-animation:myfirst 5s linear 2s infinite alternate

/* Opera: */

-o-animation:myfirst 5s linear 2s infinite alternate

}

@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>本例在 Internet Explorer 中无效。</p>

<div></div>

</body>

</html>