当前位置：首页 > 网页特效 > 文字效果

css3 文字特效_惊人CSS3文字效果

分类：文字效果日期：2024-05-14 点击(7) 评论(0)

简介

令人惊讶CSS3文本效果在今天的教程中，我将向您展示6种令人惊叹CSS3文本效果：使用文本阴影的3D效果，具有渐变和蒙版图像的效果，具有过渡和背景剪辑的效果等等。 它们无疑对您有用，因为CSS3使我们获得了真正令人印象深刻的结果。 所描述的效果的一部分在大多数支持CSS3的浏览器中都有效，但是，一些示例仅在Webkit中有效。 因此，为了获得更多的印象，建议您在Webkit浏览器中浏览我们的演示：Chrome或Safari。

首先，让我们为所有进一步的实验添加一个通用样式：
```html
#main div {
    font-size: 120px;
    font-weight:bold;
    position: relative;
}
```
在这里，我们仅指定了字体大小和粗细。 现在，让我们开始
##### 效果1 –带阴影CSS3 3D文本 
谁知道使用传统的“文本阴影”样式会带来这种机会。 在CSS3中，text-shadow属性将阴影应用于文本。 您指定水平阴影，垂直阴影，模糊距离和阴影颜色：
```html
text-shadow: h-shadow v-shadow blur color;
/* example: */
text-shadow: 2px 2px 5px #FF7777;
```
为了增加更多的文字深度，我们只需要增加一些阴影，例如：
```html
#eff1 {
    color: #00b506;
    text-shadow:
        0px 0px 0 rgb(-28,153,-22),
        1px 1px 0 rgb(-55,126,-49),
        2px 2px 0 rgb(-83,98,-77),
        3px 3px 0 rgb(-111,70,-105),
        4px 4px 0 rgb(-139,42,-133),
        5px 5px 0 rgb(-166,15,-160),
        6px 6px 0 rgb(-194,-13,-188),
        7px 7px 0 rgb(-222,-41,-216),
        8px 8px 7px rgba(0,0,0,0.75),
        8px 8px 1px rgba(0,0,0,0.5),
        0px 0px 7px rgba(0,0,0,.2);
}
```
##### 效果2 –带-webkit-mask-imageCSS3渐变文本(Webkit) 
此效果使用css3蒙版(-webkit-mask-image)。 当前，其他浏览器不支持此属性(但希望将来会支持该属性)：
```html
#eff2 {
    color: #00b506;
    text-shadow: 1px 1px 1px #000000;
    -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), color-stop(50%, rgba(0,0,0,.3)), to(rgba(0,0,0,1)));
}
```
##### 效果3 –具有-webkit-text-fill-color(Webkit)CSS3彩虹文本背景 
为了达到这种效果，我们需要将“ background-clip”属性与非标准值“ text”一起使用(此值仅受Webkit支持)：
```html
#eff3 {
    background-image: -webkit-linear-gradient(left, #ff0000, #ff7f00, #ffff00, #00ff00, #00ffff, #0000ff, #8b00ff);
    background-image:    -moz-linear-gradient(left, #ff0000, #ff7f00, #ffff00, #00ff00, #00ffff, #0000ff, #8b00ff);
    background-image:     -ms-linear-gradient(left, #ff0000, #ff7f00, #ffff00, #00ff00, #00ffff, #0000ff, #8b00ff);
    background-image:      -o-linear-gradient(left, #ff0000, #ff7f00, #ffff00, #00ff00, #00ffff, #0000ff, #8b00ff);
    background-image:         linear-gradient(to right, #ff0000, #ff7f00, #ffff00, #00ff00, #00ffff, #0000ff, #8b00ff);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
}
```
##### 效果4 –具有过渡效果和-webkit-background-clip(Webkit)CSS3闪亮文本
如果在Webkit浏览器中查看它，则会看到一个长条形灯条定期在文本上运行。 为了达到这种效果，我们使用了相同的“ background-clip”属性和非标准值“ text”：
```html
#eff4 {
    background: #00b506 -webkit-gradient(linear, left top, right top, from(#00b506), to(#00b506), color-stop(0.5, #ffffff)) 0 0 no-repeat;
    color: rgba(255, 255, 255, 0.1);
    font-size: 120px;
    font-weight: bold;
    position: relative;
    -webkit-animation: shine 2s infinite;
    -webkit-background-clip: text;
    -webkit-background-size: 300px;
}
@-webkit-keyframes shine {
    0% {
        background-position: top left;
    }
    100% {
        background-position: top right;
    }
}
```
##### 效果5 – CSS3带有文本笔划的轮廓文字(Webkit)
您可以使用-webkit-text-stroke轻松地将漂亮的平面轮廓添加到文本中：
```html
#eff5 {
    color: #00b506;
    -webkit-text-stroke: 1px #000;
}
```
##### 效果6 –具有转换功能CSS3 3D翻转文本(rotateY)
您可以使用转场+变换(rotateY)翻转文本：
```html
#eff6 {
    color: #00b506;
}
#eff6 p {
    color: #8A2BE2;
    cursor: pointer;
    display: inline-block;
    -webkit-transition: .5s;
    -moz-transition: .5s;
    -o-transition: .5s;
    transition: .5s;
}
#eff6 p:hover {
    -webkit-transform: rotateY(-180deg);
    -moz-transform: rotateY(-180deg);
    -0-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2)
}
```

web299.com

css3 文字特效_惊人CSS3文字效果

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果