用css制作一个会动的球体

html-css017

用css制作一个会动的球体,第1张

您好,可以先画一个有立体感的球体,或者直接网上找个图片,然后给这个球体添加动画,选择强调里的陀螺旋,在效果选项里将重复次数自行设定,就可以实现让球体在地上滚动的效果。同时还可借助在图片上覆盖诸如半透明灰色和半透明白色的圆形形状来实现球体高光的视觉错觉,让滚动显得更加真实。当然,如果像前面的人所说的地球自转,我没想到实现办法。不过说回来,PPT本身只是个平面软件,所以只能靠一系列平面的视觉错觉来营造一种立体感。

上面的例子中,我们可以看到CSS的语句是内嵌在HTML文档内的。所以,编写CSS的方法和编写HTML文档的方法是一样的。

您可以用任何一种文本编辑工具来编写。比如Windows下的记事本和写字板、专门的HTML文本编辑工具(Frontpage、Ultraedit等),都可以用来编辑CSS文档。

一种是把CSS文档放到<head文档中:<style type=“text/css” …… </style

其中<style中的“type=‘text/css’”的意思是<style中的代码是定义样式表单的。

另一种方法是把CSS样式表写在HTML的行内,比如下面的代码:<p style=“font-size:14pt;color:blue”蓝色14号文字</p

这是采用<Style=“ ”的格式把样式写在html中的任意行内,这样比较方便灵活。 还有一种方法是:把您编辑好的CSS文档保存成“.CSS”文件,然后在<head中定义。定义的格式是这样的:<head <link rel=stylesheet href=“style.css” …… </head

我们看到这里应用了一个<Link,“rel=stylesheet”指连接的元素是一个样式表(stylesheet)文档。一般这里是不需要您改动的。

而后面的“href=‘style.css’”指的是需要连接的文件地址。您只需把编辑好的“.CSS”文件的详细路径名写进去就可以了。这种方法非常适宜同时定义多个文档。它能使多个文档同时使用相同的样式,从而减少了大量的冗余代码。

下一章我们将进入CSS的具体知识的学习,我们将先从最基本的属性开始讲起。

下面就是一个简单的css定义:

<html>

<head>

<meta http-equiv="Content-Type" content="text/html charset=gb2312" />

<title></title>

<style>

.abc{width:500pxheight:30pxline-height:30pxtext-align:centerborder:1px solid #cccfont-size:13pxcolor:redmargin:auto}

</style>

</head>

<body>

<div class="abc">文字文字</div>

</body>

</html>

<style></style>之间写css代码。

.abc{这里面是定义abc的css}

<div class="abc">文字文字</div>这个class="abc"  就代表这个div的class是abc。css中定义abc就可以了。