首页 > 其他分享 >无涯教程-CSS - 文字效果

无涯教程-CSS - 文字效果

时间：2024-01-23 23:31:36浏览次数：30  
标签：Remark Parameter Image 无涯 文字效果 Learnfk Example CSS

您可以使用CSS过滤器将特殊效果添加到文本，图像和网页的其他方面，而无需使用图像或其他图形。

Alpha Channel

Alpha通道滤镜会更改对象的透明度，从而使其融合到背景中， 以下参数可以在此过滤器中使用-

Sr.No. Parameter & Remark
1

opacity

透明度。 0是完全透明的，100是完全不透明的。
2

finishopacity

对象另一端的不透明度级别。
3

style

不透明度渐变的形状。

0 = uniform

1  = linear

2  = radial

3  = rectangular
4

startX

X坐标开始出现不透明度渐变。
5

startY

透明度开始的Y坐标。
6

finishX

不透明度渐变结束的X坐标。
7

finishY

Y轴的不透明度渐变结束。

 
<html>
   <head>
   </head>
   
   <body>
      <p>Image Example:</p>
      
      <img src="/css/images/logo.png" alt="CSS Logo" 
         style="Filter: Alpha(Opacity=100, 
         FinishOpacity=0, 
         Style=2, 
         StartX=20, 
         StartY=40, 
         FinishX=0, 
         FinishY=0)" />
      <p>Text Example:</p>
      
      <div style="width: 357; 
         height: 50; 
         font-size: 30pt; 
         font-family: Arial Black; 
         color: blue;
         Filter: Alpha(Opacity=100, FinishOpacity=0, Style=1, StartX=0, StartY=0, FinishX=580, FinishY=0)">CSS Learnfk</div>
   </body>
</html>

它将产生以下输出-

Motion Blur

Motion 模糊用于创建具有方向和强度的模糊图片或文本。 以下参数可以在此过滤器中使用-

Sr.No. Parameter & Remark
1

add

True或False。如果为true，则将图像添加到模糊图像；否则为false。如果为false，则不会将图像添加到模糊图像中。
2

direction

模糊的方向(顺时针方向)四舍五入为45度增量。默认值为270(左)。

0    =Top

45  =Top right

90  =Right

135 =Bottom right

180 =Bottom

225 =Bottom left

270 =Left

315 =Top left
3

strength

模糊将扩展的像素数。默认值为5像素。

 
<html>
   <head>
   </head>
   
   <body>
      <p>Image Example:</p>
      
      <img src="/css/images/logo.png" alt="CSS Logo" 
         style="Filter: Blur(Add=0, Direction=225, Strength=10)">
      
      <p>Text Example:</p>
      
      <div style="width: 357; 
         height: 50; 
         font-size: 30pt; 
         font-family: Arial Black; 
         color: blue; 
         Filter: Blur(Add=1, Direction=225, Strength=10)">CSS Learnfk
      </div>
   </body>
</html>

它将产生以下输出-

Chroma Filter

色度滤镜(Chroma Filter)用于使任何特定颜色透明，通常与图像一起使用，您也可以将其与滚动条一起使用。 以下参数可以在此过滤器中使用-

Sr.No. Parameter & Remark
1

color

您想要透明的颜色。

 
<html>
   <head>
   </head>
   
   <body>
      <p>Image Example:</p>
      
      <img src="/images/css.gif" 
         alt="CSS Logo" style="Filter: Chroma(Color=#FFFFFF)">
      
      <p>Text Example:</p>
      
      <div style="width: 580; 
         height: 50; 
         font-size: 30pt; 
         font-family: Arial Black; 
         color: #3300FF; 
         Filter: Chroma(Color=#3300FF)">CSS Learnfk</div>
   </body>
</html>

它将产生以下输出-

Drop Shadow Effect

以下参数可以在此过滤器中使用-

Sr.No. Parameter & Remark
1

color

阴影的颜色，采用#RRGGBB格式。
2

offX

阴影沿x轴从可视对象偏移的像素数。正整数将阴影向右移动，负整数将阴影向左移动。
3

offY

阴影沿y轴从可视对象偏移的像素数。正整数将阴影向下移动，负整数将阴影向上移动。
4

positive

如果为true，则对象的所有不透明像素都具有阴影。如果为false，则所有透明像素都具有阴影。默认值为true。

 
<html>
   <head>
   </head>
   
   <body>
      <p>Image Example:</p>
      
      <img src="/css/images/logo.png" 
         alt="CSS Logo" 
         style="filter:drop-shadow(2px 2px 1px #FF0000);">
      
      <p>Text Example:</p>
      
      <div style="width: 357; 
         height: 50; 
         font-size: 30pt; 
         font-family: Arial Black; 
         color: red; 
         filter:drop-shadow(3px 3px 2px #000000);">CSS Learnfk</div>
   </body>
</html>

它将产生以下输出-

Flip Effect

翻转效果用于创建对象的镜像。 以下参数可以在此过滤器中使用-

Sr.No. Parameter & Remark
1

FlipH

创建水平镜像
2

FlipV

创建垂直镜像

 
<html>
   <head>
   </head>
   
   <body>
      <p>Image Example:</p>
      
      <img src="/css/images/logo.png" 
         alt="CSS Logo" 
         style="filter: FlipH">
      
      <img src="/css/images/logo.png" alt="CSS Logo" style="filter: FlipV">
      
      <p>Text Example:</p>
      
      <div style="width: 300; 
         height: 50; 
         font-size: 30pt; 
         font-family: Arial Black; 
         color: red; 
         filter: FlipV">CSS Learnfk</div>
   </body>
</html>

它将产生以下输出-

Glow Effect

Glow效果用于在对象周围创建发光。 如果它是透明图像，则会在其不透明像素周围创建光晕。 以下参数可以在此过滤器中使用-

Sr.No. Parameter & Remark
1

color

您想要发光的颜色。
2

strength

发光强度(从1到255)。

 
<html>
   <head>
   </head>
   
   <body>
      <p>Image Example:</p>
      
      <img src="/css/images/logo.png" 
         alt="CSS Logo" 
         style="filter: Chroma(Color=#000000) Glow(Color=#00FF00, Strength=20)">
      
      <p>Text Example:</p>
      
      <div style="width: 357; 
         height: 50; 
         font-size: 30pt; 
         font-family: Arial Black; 
         color: red; 
         filter: Glow(Color=#00FF00, Strength=20)">CSS Learnfk</div>
   </body>
</html>

它将产生以下输出-

Grayscale Effect

灰度效果用于将对象的颜色转换为256个灰度阴影。在此过滤器中使用以下参数-

Sr.No. Parameter & Remark
1

grayscale

将对象的颜色转换为256个灰色阴影。

 
<html>
   <head>
   </head>
   
   <body>
      <p>Image Example:</p>
      
      <img src="/css/images/logo.png" 
         alt="CSS Logo" 
         style="filter: grayscale(50%)">
      
      <p>Text Example:</p>
      
      <div style="width: 357; 
         height: 50; 
         font-size: 30pt; 
         font-family: Arial Black; 
         color: red; 
         filter: grayscale(50%)">CSS Learnfk</div>
   </body>
</html>

它将产生以下输出-

Invert Effect

反转效果用于将对象的颜色映射到它们的相反值。在此过滤器中使用以下参数-

Sr.No. Parameter & Remark
1

Invert

将对象的颜色映射到色谱中它们的相反值。

 
<html>
   <head>
   </head>
   
   <body>
      <p>Image Example:</p>
      
      <img src="/css/images/logo.png" 
         alt="CSS Logo" 
         style="filter: invert(100%)">
      
      <p>Text Example:</p>
      
      <div style="width: 357; 
         height: 50; 
         font-size: 30pt; 
         font-family: Arial Black; 
         color: red; 
         filter: invert(100%)">CSS Learnfk</div>
   </body>
</html>

它将产生以下输出-

Mask Effect

遮罩效果用于将透明像素变为指定的颜色，并使不透明像素透明。在此过滤器中使用以下参数-

Sr.No. Parameter & Remark
1

color

透明区域将变为的颜色。

 
<html>
   <head>
   </head>
   
   <body>
      <p>Image Example:</p>
      
      <img src="/css/images/logo.png" 
         alt="CSS Logo" 
         style="filter: Chroma(Color=#000000) Mask(Color=#00FF00)">
      
      <p>Text Example:</p>
      
      <div style="width: 357; 
         height: 50; 
         font-size: 30pt; 
         font-family: Arial Black; 
         color: red; 
         filter: Mask(Color=#00FF00)">CSS Learnfk
      </div>
   </body>
</html>

它将产生以下输出-

Shadow Filter

阴影滤镜用于在指定的方向和颜色上创建衰减的阴影。 这是位于Dropshadow和Glow之间的过滤器。 以下参数可以在此过滤器中使用-

Sr.No. Parameter & Remark
1

color

您希望阴影成为的颜色。
2

direction

模糊的方向(顺时针方向)四舍五入为45度增量。默认值为270(左)。

0=Top

45=Top right

90=Right

135=Bottom right

180=Bottom

225 =Bottom left

270 =Left

315 =Top left

 
<html>
   <head>
   </head>
   
   <body>
      <p>Image Example:</p>
      
      <img src="/css/images/logo.png" 
         alt="CSS Logo" 
         style="filter: Chroma(Color=#000000) Shadow(Color=#00FF00, Direction=225)">
      
      <p>Text Example:</p>
      
      <div style="width: 357; 
         height: 50; 
         font-size: 30pt; 
         font-family: 
         Arial Black; 
         color: red; 
         filter: Shadow(Color=#0000FF, Direction=225)">CSS Learnfk
      </div>
   </body>
</html>

它将产生以下输出-

Wave Effect

波浪效应用于使对象产生正弦波失真，使其看起来呈波浪形。 以下参数可以在此过滤器中使用-

Sr.No. Parameter & Remark
1

add

值为1会将原始图像添加到波形图像，而值为0则不会。
2

freq

波数。
3

light

波浪上的光强度(从0到100)。
4

phase

正弦波应从什么Angular开始(从0到100)。
5

strength

波浪效应的强度。

 
<html>
   <head>
   </head>
   
   <body>
      <p>Image Example:</p>
      
      <img src="/css/images/logo.png" 
         alt="CSS Logo" 
         style="filter: Chroma(Color=#000000) 
         Wave(Add=0, Freq=1, LightStrength=10, Phase=220, Strength=10)">
      
      <p>Text Example:</p>
      
      <div style="width: 357; 
         height: 50; 
         font-size: 30pt; 
         font-family: Arial Black; 
         color: red; 
         filter: Wave(Add=0, Freq=1, LightStrength=10, Phase=20, Strength=20)">CSS Learnfk
      </div>
   </body>
</html>

它将产生以下输出-

X-Ray Effect

X射线效果可灰阶并弄平颜色深度。在此过滤器中使用以下参数:

Sr.No. Parameter & Remark
1

xray

灰度并展平颜色深度。

 
<html>
   <head>
   </head>
   
   <body>
      <p>Image Example:</p>
      
      <img src="/css/images/logo.png" 
         alt="CSS Logo" 
         style="filter: Xray">
      
      <p>Text Example:</p>
      
      <div style="width: 357; 
         height: 50; 
         font-size: 30pt; 
         font-family: Arial Black; 
         color: red; 
         filter: Xray">CSS Learnfk
      </div>
   </body>
</html>

它将产生以下输出-

参考链接

https://www.learnfk.com/css/css-text-effects.html

标签：Remark,Parameter,Image,无涯,文字效果,Learnfk,Example,CSS
From： https://blog.51cto.com/u_14033984/9387394

相关文章

  • 无涯教程-CSS - @规则
    本章将涵盖以下重要的@规则-@import    : 将另一个样式导入到当前样式表中。@charset   : 样式使用的字符集。@font-face  : 用于详尽地描述文档中使用的字体。!important  : 指示用户定义的规则应优先。注意-还有其他@规则，无涯教程将在......
  • css定义方式
     在Vue.js中，可以使用所有三种CSS样式定义方式（内联样式、内部样式表和外部样式表），但通常会采用一种或多种特定的方式来适应Vue的组件架构内联样式（InlineStyles）：在Vue中，内联样式通常用于动态绑定样式属性。可以使用v-bind:style（或简写为:style）来实现。<template......
  • 无涯教程-CSS - 伪元素
    CSS伪元素用于向某些选项添加特殊效果，伪元素的简单语法如下-selector:pseudo-element{property:value}CSS类也可以与伪元素一起使用-selector.class:pseudo-element{property:value}最常用的伪元素如下-Sr.No.Value&Remark1:first-linep:first-line  选择每......
  • 无涯教程-CSS - 伪类
    CSS伪类是用来添加一些选择器的特殊效果。伪类的简单语法如下-selector:pseudo-class{property:value}CSS类也可以与伪类一起使用-selector.class:pseudo-class{property:value}最常用的伪类如下-Sr.No.Value&Remark1:linka:link 选择所有未访问链接2:visi......
  • 前端歌谣-第陆拾陆课-html+css+js实现计算器效果
    前言我是歌谣微信公众号关注前端小歌谣一起学习前端知识今天继续给大家讲解计算器的讲解index.css/*Basicreset*/*{ margin:0; padding:0; box-sizing:border-box; /*Bettertextstyling*/ font:bold14pxArial,sans-serif;}/*FinallyaddingsomeIE9......
  • 无涯教程-CSS - 图层(Layers)
     CSSlayers指的是将z-index属性应用于彼此重叠的元素。z-index属性与position属性一起使用以创建图层效果。您可以指定哪个元素应该放在顶部，哪个元素应该放在底部。<html><head></head><body><divstyle="background-color:red;width:300......
  • css布局-上下固定，中间铺满
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Document</title><styletype="text/css">body,html{height:100%;}......
  • CSS_边框相关属性
    1、border: ;    2、表格独有属性    ......
  • 无涯教程-CSS - 尺寸(Dimension)
    无涯教程具有以下属性，可让您控制盒子的尺寸。height      :属性用于设置盒子的高度。width      :属性用于设置盒子的宽度。line-height  :属性用于设置一行文本的高度。max-height :属性用于设置盒子可以达到的最大高度。min-height ......
  • 前端打包后上传至服务器，发现css样式都未生效，查看请求preview预览格式不正确问题解决
    参考：https://blog.csdn.net/wzj_110/article/details/112850811 我的问题前端打包后上传至服务器，发现css样式都未生效，查看css请求，发现preview预览格式不正确，Response-Headers里的Content-type未对应 原因服务器的nginx配置中， mime.types文件缺失。 原理 MIME：Multip......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99