css旋转动画为什么会往左面飘

html-css037

css旋转动画为什么会往左面飘,第1张

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Title</title>

<style type="text/css">

#img{

width:200px

height:200px

border:100px solid green

border-left-color: red

margin:100px

border-radius:50%

-webkit-animation:circle 1s infinite linear

-moz-animation:circle 1s infinite linear

}

@-webkit-keyframes circle{

0%{ transform:rotate(0deg)}

100%{ transform:rotate(360deg)}

}

@-moz-keyframes circle{

0%{ transform:rotate(0deg)}

100%{ transform:rotate(-360deg)} /* 正负控制方向 */

}

</style>

</head>

<body>

<div id="img"></div>

</body>

</html>

1、新建html文件。

2、创建两个div，并赋予id。

3、为两个div设置宽高和背景，并设置左右浮动。

4、预览效果如图。

5、创建第三个div。

6、为第三个div设置宽高和背景。

7、预览效果如图。

注意事项：

随着HTML的成长，为了满足页面设计者的要求，HTML添加了很多显示功能。但是随着这些功能的增加，HTML变的越来越杂乱，而且HTML页面也越来越臃肿。于是CSS便诞生了。