如何用css实现网页的动态效果

html-css08

如何用css实现网页的动态效果,第1张

网页的动态效果你说的这里的动态效果是让一个画面或者文字动一下吧?因为在专业里边动态是与数据库连接的后台的技术。

css是层叠样式表,是不能够实现动态效果的。但是可以让某个画面动,比如:

一个文字点击的时候,变大的css代码为:

a{font-size:12px}      /*这里文字默认大小是12像素*/

a:hover{font-size:14px}      /*这里鼠标经过大小是14像素*/

上边这个简单的代码就实现鼠标经过a的时候,文字变大,离开又恢复。

希望能帮到你

<style>

ul.list1 {list-style-type:circle} /* 圆形符号 */

ul.list2 {list-style-type:square} /* 实心方块 */

</style>

<body>

<ul class="list1">

<li>list1</li>

</ul>

<ul class="list2">

<li>list1</li>

</ul>

</body>

方法:想用不同的CSS来控制元素的样式,可以在你点击按钮的时候改变元素属性class的名字。比如:

<html>

<style>

.o1{background-color:red}

.02{background-color:blue}

</style>

<script type="text/javascript">

function btnclick(){

this.attachEvent("class","02")

}

</script>

<body>

<input type="button" value="点击改变样式" onclick="btnclick()" class="01" />

</body>

</html>

原理就是在点击按钮时候改变该元素的class属性的值就可以了。实现方法很多,原理都一样。