当前位置:编程学习 > html/css >>

Invert属性、Glow属性和FlipH、FlipV属性

答案:

     Invert属性


  Invert属性可以把对象的可视化属性全部翻转,包括色彩、饱和度和亮度值。
  它的表达式也很简单:


  Filter:Invert


  我们再来看一下加上Invert属性前后的图片效果变化(如下图):


原图     Invert属性效果图


  我们看到Invert属性实际上达到的是一种“底片”的效果。
  自己拿别的图来试试吧。

    Glow属性


  当对一个对象使用“Glow”属性后,这个对象的边缘就会产生类似发光的效果。它的表达式如下:
  Filter:Glow(Color=color,Strength=strength)
  Glow属性的参数只有两个:Color是指定发光的颜色,Strength指定发光的强度,参数值从1到255。 让我们先来看一下加上Glow属性的效果图:



  怎么样,是不是有一种燃烧的火焰的感觉。实现这种效果的代码如下:
      <html>
    <head>
    <title>filter glow</title>
    <style>//*开始设置CSS样式*//
    <!--
    .leaf{position:absolute; top:20; width:400;
       filter:glow(color=#FF3399,strength=15);}
    file://*设置类leaf,绝对定位,Glow滤镜属性,发光颜色值为#FF3399,强度为
    15*//
    .weny{position:absolute; top:70; left:50; width:300;
       filter:glow(color=#9966CC,strength=10);}
    file://*设置类weny,绝对定位,glow滤镜属性,发光颜色值为#9966CC,强度为
    15*//
    -->
    </style>
    </head>
    <body>
    <div class=“leaf”>//*leaf类样式*//
    <p style=“font-family:lucida handwriting;
         font-size:54pt;font-weight:bold;color:#003366;”>
    Leaf Mylove</p>//*设置字体名称、大小、粗细、颜色*//
    </div>
    <div class=“weny”>//*weny类样式*//
    <p style=“font-family:bailey; font-size:48pt;
         font-weight:bold;color:#99CC66;”>
    file://设置字体名称、大小、粗细、颜色*//
    Weny Good!</p>
    </div>
    </body>
  </html>


  您还可以随意修改颜色值,看看其他的发光效果是怎样的。

   FlipH、FlipV属性
  Flip是CSS滤镜的翻转属性,FlipH代表水平翻转,FlipV代表垂直翻转。它们的表达式很简单,分别是:
  Filter:FlipH
  Filter:FlipV
  我们先来看一幅图:



  下面我们分别对它实现水平翻转和垂直翻转,并且在图片上方的一段文字,也发生翻转。代码如下:
  <html>
   <head>
   <title>flip css</title>
   <style>//*设置CSS样式开始*//
   <!--
   div{position:absolute;top:20;width:300;
     filter:fliph(flipv);}
   file://*定义DIV范围内的样式,绝对定位,翻转为水平翻转或垂直翻转。
    注意:在这里fliph和flipv只取其中的一个*//
   img{position:absolute;top:70;left:40;
     filter:fliph(flipv);}
   file://*定义图片的样式,绝对定位,翻转属性和DIV一样。*//
    -->
   </style>
   </head>
   <body>
   <div>
   <p style=“font-family:bailey;font-size:36pt;
         font-weight:bold; color:rgb(10,128,156);”>
    Leaf Village </p>
   file://*定义字体名称、大小、粗细、颜色*//
   </div>
   <p><img src=http://www.jscode.cn/arthtml/“ss05058.jpg”></p>
   file://*导入一张图片*//
   </body>
  </html>
  代码产生的两个效果分别如下图:             


水平翻转      垂直翻转


  翻转的属性应用是不是很简单。

上一个:CSS滤镜应用技巧
下一个:巧用CSS制作可控闪烁效果

CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
部份技术文章来自网络,