css3如何让图片自动移动

html-css020

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>

line-height。

1、通过设置line-height例如line-height:120%。

2、可以font-size:140%，设置字体的大小。

3、letter-spacing:10px，字与字之间的间距是10px距离。以上是css在图片右侧加文字变化宽度，图片会移动的教程。

如果你想只向一移的话，你需要修改translate

-webkit-transform:translateY(100px)

-moz-transform:translateY(100px)

这样才是向下移动100px，

因为translate

默认是移动XY轴的，意思就是说，移动左右以及上下一起，但是默认平移而已，

如果你想单独操作Y的话，就要translateY，单独操作X用translateX，当然默认translate

(100px)相当于translateX(100px)

如果你想向右移的同时又向下移

-webkit-transform:translate(100px,100px)

-moz-transform:translate(100px,100px)

这样你应该能理解translate的用法 了。。。