文字特效

文字双描边

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    p {
    -webkit-text-stroke: 1px #fff;
    font-size: 40px;
    position: relative;
    z-index: 0;
}
p::before,
p::after {
    content: attr(data-text);
    position: absolute; left: 0;
    z-index: -1;
}
p::before {
    -webkit-text-stroke: 7px yellow;
}
p::after {
    -webkit-text-stroke: 4px red;
}
</style>
<body>
    <p data-text="多重描边">多重描边</p>
</body>
</html>

一行文字两种颜色

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.antzone{
  display:inline-block;
  font-size:80px;
  line-height:80px;
  color:#000;
  position:relative;
  overflow:hidden;
  white-space:pre;
}
.antzone:before{
  position:absolute;
  left:0;
  top:0;
  color:#f00;
  display:block;
  width: 100%;
  height: 50%;
  content:attr(data-content);
  overflow:hidden;
}
</style>
</head>
<body>
<span class="antzone" data-content="测">测</span>
<span class="antzone" data-content="试">试</span>
<span class="antzone" data-content="效">效</span>
<span class="antzone" data-content="果">果</span>
</body>
</html>

文字颜色渐变

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<style>
  .text-gradient {  
    display: inline-block;
    font-family: '微软雅黑';
    font-size: 10em;
    position: relative; 
}  
  
.text-gradient-left-right[data-text]::after {  
    content: attr(data-text);  
    color: rgb(201, 9, 82);  
    position: absolute;  
    left: 0;  
    z-index: 2;
    -webkit-mask-image: -webkit-gradient(linear, right top, 0 0, from(#ff0015), to(rgba(2, 2, 26, 0)));
}
.text-gradient-top-bottom[data-text]::after {  
    content: attr(data-text);  
    color: rgb(201, 9, 82);  
    position: absolute;  
    left: 0;  
    z-index: 2;
    -webkit-mask-image: -webkit-gradient(linear, 0 0, 0 bottom, from(#ff0015), to(rgba(2, 2, 26, 0)));
}
</style>
</head>
<body>
  <h2 class="text-gradient text-gradient-left-right" data-text="左右渐变">左右渐变</h2> 
  <br/>
  <h2 class="text-gradient text-gradient-top-bottom" data-text="上下渐变">上下渐变</h2> 
</body>
</html>

文字双描边

一行文字两种颜色

文字颜色渐变

fashen007

引用和评论

vue-cli3+babel7项目兼容IE