);
background-size: .05em .05em;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-text-stroke: 2px #111;
}
效果五-文字条纹动画
html文件
<div data-text="前端开发whqet" class="text effect05">前端开发whqet</div>
css文件，利用:before伪对象来显示条纹，并对之添加动画。
.effect05{
color:#DC554F;
background-color:#27ae60;
z-index: 3;
}
.effect05:before{
content:attr(data-text);
width:100%;
line-height:200px;
opacity: .5;
position: absolute;
top:2px;
left:5px;
background-image:
linear-gradient(
45deg,
transparent 45%,
hsla(48,20%,90%,1) 45%,
hsla(48,20%,90%,1) 55%,
transparent 0
);
z-index:-1;
background-size: .05em .05em;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: shadowGo 20s linear infinite;
}
@keyframes shadowGo{
0% {background-position: 0 0}
0% {background-position: -100% 100%}};
效果六-描边文字
html文件
<div contenteditable="true" class="text effect06">前端开发whqet</div>
css文件
.effect06 {
-webkit-text-fill-color: transparent;
-webkit-text-stroke: 2px #d6d6d6;
background: url(http://www.pencilscoop.com/demos/CSS_Text_Effects/images/galaxy.jpg);
background-size: cover;
}
效果七-遮罩文字
html文件
<div contenteditable="true" class="text effect07">前端开发whqet</div>
css文件
.effect07 {
background: url(http://www.pencilscoop.com/demos/CSS_Text_Effects/images/galaxy.jpg) #333;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-size: cover;
animation: 10s infinite linear animate;
}
.effect07:before {
content:"";
width:100%;
height:100%;
position: absolute;
left:0;
top:0;
background-color: #999;
z-index: -1;
}
@keyframes animate {
0% {
background-position:0;
}
100% {
background-position:-1000px 0;
}
}
效果八-3D炫光效果
html文件
<div class="text effect08">
<h1>前端开发whqet</h1>
<h1>前端开发whqet</h1>
<h1>前端开发whqet</h1>
<h1>前端开发whqet</h1>
<h1>前端开发whqet</h1>
<h1>前端开发whqet</h1>
<h1>前端开发whqet</h1>
<h1>前端开发whqet</h1>
</div>
css文件
.effect08 {
color:#fff;
transform-origin:center bottom;
transform-style:preserve-3d;
transition:all 1s;
cursor: pointer;
}
.effect08:hover {
transform:rotate3d(1, 0, 0, 40deg);
}
.effect08 h1 {
position: absolute;
left:0;
right:0;
margin:auto;
text-shadow:0 0 10px rgba(0, 0, 100, .5);
}
/*
sass 循环给每一个h1设置不同的translateZ
*/
@for $n from 1 to 8 {
.effect08 h1:nth-child(#{$n}) {
transform:translateZ(4px*$n);
}
}