CSS网页制作动态效果二则

css|动态|网页

  鼠标变换

  想不想在主页上实现这样的效果呢?鼠标移到“站点帮助”等字样上时,形状就变成求助的样子,当移到可能需要较长时间等待的超链接时,鼠标形状就变成等待的样子。你要是不信的话,就先将下面这段代码拷到一个文本编辑器中,存成网页文件,然后我再给你解释代码的含义。

 <html>

  <head>

  <title>cursor</title>

  </head>

  <body>

  <p style=cursor:hand>手形</p>

  <p style=cursor:move>移动标志</p>

  <p style=cursor:wait>等待状态</p>

  <p style=cursor:crosshair>定位指示</p>

  <p style=cursor:help>寻求帮助</p>

  </body>

  </html>

  这段代码很简单,只用到了CSS中的“cursor”属性,利用“style=cursor:值”这样的语句形式分别设置它的值就可以了。例如:值为“hand”时,当鼠标移到相应的文字或图片上时,就会变成超链接的手形;值为“move”时,当鼠标移到相应的文字或图片上时,就会变成上下左右带方向箭头的形状,鼠标的其他形状及“cursor”值。

  阴影效果

  这个带阴影的文字,它不是插入的图形,而是用“层叠式样式表单——CSS”用几行代码写出来的,这比插入图片可省空间多了。这个页面的源代码是这样的:

  <html>

  <head>

  <title>shadow</title>

  <style type=text/css>

  <!--

  p {position:absolute;

  top:130;

  left:50;

  filter:DropShadow(Color=pink,OffX=4,OffY=4,positive=1);}

  -->

  </style>

  </head>

  <body>

  <p style=font-size:48;font-weight:bold;color:red;>阴影效果</p>

  </body>

  </html>

  这个效果用到了CSS滤镜中的“DropShadow”属性,代码是:{ filter:DropShadow(Color=pink,OffX=4,OffY=4,positive=1)},其中,“color”参数表示的是阴影的颜色,“OffX”和“OffY”表示的是阴影在X方向和Y方向上的偏移量,“positive”参数可以取值为“0”或“1”,取值为“0”时,表示为透明像素设置阴影,为“1”时,表示为不透明像素设置阴影。

  使用“DropShadow”属性时,要特别注意的是,“position”属性的值一定要是“absolute”,否则阴影不能判断偏移的方向。为图形添加阴影的代码与为文字设置阴影的代码完全相同。

时间: 2024-08-23 03:11:48

CSS网页制作动态效果二则的相关文章

CSS网页制作技巧:IE浏览器下li的默认高度问题

文章简介:CSS网页制作技巧:IE浏览器下li的默认高度问题. 昨天,在家打开IE7浏览器看"视频导航网"的时候,发现居然有排版错误. 用F12开发者工具看了下,发现 li 的默认高度既然不统一? 用工具看了下,发现火狐高度解析统一为33px,而IE7解析高度根据字的不一样,默认解析的高度为30px,纯数字的解析高度为31px;中英文组合的解析高度为32px; 解决方法一:给LI设置高度后,IE7正常了,但IE6问题依然存在.原来,LI里面还嵌套着A标签,给A也设置一个高度后问题解决.

CSS网页制作技巧:兼容主流浏览器的背景颜色透明

文章简介:CSS网页制作技巧:兼容主流浏览器的背景颜色透明. 以前都是用jquery来写背景透明,方法简单,但是有缺点,脚本没加载完时,背景颜色是不透明的.如果换成在css里写好的话,效果就很好了..transparent_class { filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5; } 上面的几个属性分别是: opacity: 0.5; 这是最重要的,因为它是CSS标准.该属性支持f

HTML+CSS网页制作实例:制作左上角卷角效果的网页

文章简介:HTML+CSS网页制作实例:制作左上角卷角效果的网页. 英文原文 http://designshack.net/articles/css/code-a-simple-folded-corner-effect-with-css/ 这篇文章中我们将介绍如何制做paper左上角的卷角效果. 我想让我的几句文字以一张有卷角折叠效果的纸为背景,如果直接用一张图片,很容易实现,但是这里我要用css来实现. 我的这种实现方法并不是非常具有创新意义,但是还是值得拿出来分享的,简单的来说,除了一个矩形

CSS网页制作实例代码:模拟新浪微博的三角图像

文章简介:CSS网页制作实例代码:新浪微博的三角图像. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta

CSS网页制作技巧:隐藏网页元素的方法汇总

文章简介:CSS网页制作技巧:隐藏网页元素的方法汇总. 在CSS中,让元素隐藏(指屏幕范围内肉眼不可见)的方法很多,有的占据空间,有的不占据空间:有的可以响应点击,有的不能响应点击.下面一个个列出,选一个适合你的 { display: none; /* 不占据空间,无法点击 */ }{ visibility: hidden; /* 占据空间,无法点击 */ }{ position: absolute; top: -999em; /* 不占据空间,无法点击 */ }{ position: rela

CSS网页制作:各式各样的按钮制作方式

文章简介:CSS网页制作:各式各样的按钮制作方式. 按钮整理网页中通过链接来实现页面的跳转,链接的重要表现形式就是按钮将各式各样的按钮制作方式整理一下. 1,网页中默认的按钮(如表单中的按钮,下拉框,单选按钮,多选按钮,上传按钮等) 2,css基本样式制作的按钮(如添加边框,背景色等) 3,图片制作的按钮a,按钮形状+文字一起的图片按钮b,只有按钮形状,通过html加文字c,各种图标按钮(不是按钮的形状,但有按钮功能)d,两张图片拼接的按钮(一般处理圆角) 4,纯css3样式按钮(圆角,阴影(内

CSS网页制作实例:有条件的添加hover样式

文章简介:CSS网页制作实例:有条件的添加hover样式. 给元素添加一个hover样式,很简单,我们来看一个透明度的例子吧: 1 2 3 4 5 6 div { opacity: 1.0; } div:hover { opacity: 0.5; } 但是如果我们只是想让当前真正hover了的div显示,而让其他的div模糊呢?假设我们的HTML结构如下: 1 2 3 4 5 <section> <div></div> <div></div> &

CSS网页制作:CSS的面试题和练习

文章简介:如果你处在一个需要面试别人有关于CSS方面技巧和知识,一时想起来还真有点难.我把我能想出来的整理在一起,提供给大家参考. 如果你处在一个需要面试别人有关于CSS方面技巧和知识,一时想起来还真有点难.我把我能想出来的整理在一起,提供给大家参考. 练习要做 正如他们说的,大家实际工作很重要.当然,大家通过工作练习更为重要.这些都是一些练习,并不特别困难,任何人或有没有CSS经验都应该做得到.只看或只听,这样做是没有任何意义的.在CodePen中做练习就挺完美的.   CodePen如何使用

CSS网页制作教程:CSS文字单位PX、EM、PT

文章简介:但是12px汉字例外,就是由以上方法得到的12px(1.2em)大小的汉字在IE中并不等于直接用12px定义的字体大小,而是稍大一点.这个问题 Jorux已经解决,只需在body选择器中把62.5%换成63%就能正常显示了.原因可能是IE处理汉字时,对于浮点的取值精确度有限.不知道有没有 其 这里引用的是Jorux的"95%的中国网站需要重写CSS"的文章, 题目有点吓人,但是确实是现在国内网页制作方面的一些缺陷.我一直也搞不清楚px与em之间的关系和特点,看过以后确实收获很