|
|
CSS特效赏析
CSS特效赏析
1.动态改变样式
2.动态可视化效果
3.动态滤镜显示
4.Blentrans属性
5.Revealtrans属性
6.动态Glow属性
7.显示和隐藏
8.兼容两种浏览器
9.移动对象
10.对象的滑动
11.键盘控制对象
12.鼠标控制对象
13.Clip属性的应用
14.动态文字变换
15.动态改变页面样式
16.动态时钟控制
17.倒计时
18.动态刷新
|
CSS特效赏析
上一实例 下一实例
2、动态可视化效果
这一节我们讲一个动态显示的例子， 。
实现这种显示/隐藏效果的代码如下：
<html>
<head>
<title> dtksh </title>
<script>
<!--
function caption() {
if(bobo.style.visibility=="hidden")
{ bobo.style.visibility="" sway.style.visibility="" }
else{ bobo.style.visibility="hidden"
sway.style.visibility="hidden" }
}
-->//*定义一个函数，使bobo、sway两个类隐藏*//
</script>
</head>
<body>
<div id="bobo" style="visibility:hidden;position:absolute;
top:20;left:15; width:190;height:35;
background-color:rgb(62,174,128);
filter:alpha(opacity=60)"> </div>//*定义一个类bobo*//
div id="sway" style="visibility:hidden;color:rgb(177,63,174);
position:absolute;top:20; width:190;height:100;
margin-top:5;margin-left:5;">//*定义一个类sway*//
<p style="font-family:bailey;font-size:14pt;
font-weight:bold;text-align:center"> Sports is wonderful! </p>
</div> <p>//*写一行字，在sway类定义下*///
<img src="ss07049.jpg" onmouseover="caption()"
onmouseout="caption()"> </p>//*导入一张图片*//
<p class="p2" style="color:red">
请把您的鼠标移动到图片上，然后再把鼠标从图片上挪开。
</p> </body>
</html>
下一节将向您介绍一个动态滤镜转换的例子。
上一实例 下一实例
|
|