p{text-indent:2em;}
.gra{
text-decoration: none;
font-size:3em;
font-family:‘simhei‘;
color: #a5cdff;
position: relative;
}
/*渐变效果*/
.gra::before{
left: 0;
position: absolute;
top: 0;
content: attr(data-content);
color: #4b58cc;
transition: clip .4s cubic-bezier(0.645,.045,.355,1);
width: 100%;
clip: rect(0,0,50px,0);
}
.gra:hover::before{
clip: rect(0,240px,50px,0);
}前端开发whqet,csdn,王海庆,whqet,前端开发专家
如果您是资深前端er，经验丰富、富有创意，也有可能面对新项目一时踌躇；如果您是前端初学者，可能胸中沟壑，无从下手。多多赏析优秀网站，开阔视野、寻求灵感、解析技术，很有必要。我们从国内外网页欣赏站(Awwwards\CSS Winner\Best CSS等)的收录作品中，选择一些有代表性的作品进行解析，欣赏、研读、提高，开始一个全新的系列博客《跟名站学前端》，希望对大家有所帮助。
今天早上闲逛的时候发现了《Trippeo》-一个管理商业旅行软件产品的官方网站，网站简洁而又大方，值得我们学习，我们重点研读它的文字遮罩链接效果。
欣赏
《Trippeo》网站简洁而又大方，值得我们学习，界面效果如下图所示。
首页的加载效果很酷，数字动画代表加载过程，加载完成之后可以向下滚动。
我们重点研读它的文字链接效果，如下图所示。
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------
==== 文字遮罩动画==== ==全屏预览== ==在线编辑== ==下载收藏==
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------
原理解析
使用:before伪对象实现变色之后的字、下划线、描边字等；
对:before伪对象进行clip裁切；
利用transition实现动画。
实现过程
html
<a class="gra gra1" href="#" data-content="渐变效果">渐变效果</a>
css，首先设置链接，去下划线、设置字体、大小、颜色、位置；然后设置:before对象，大小、位置、颜色、content、transition等，设置hover前后的clip属性。
.gra{
text-decoration: none;
font-size:3em;
font-family:‘simhei‘;
color: #a5cdff;
position: relative;
float: left;
margin: 20px;
}
.gra::before{
left: 0;
position: absolute;
top: 0;
content: attr(data-content);
color: #4b58cc;
display: inline-block;
zoom: 1;
transition: clip .4s cubic-bezier(0.645,.045,.355,1);
width: 100%;
}
.gra:hover::before{
clip: rect(0,240px,50px,0);
}
.gra1::before{
clip: rect(0,0,50px,0);
}
然后变体，扩展出一些其他效果。
<a class="gra gra1" href="#" data-content="渐变效果">渐变效果</a> <a class="gra gra2" href="#" data-content="渐变效果">渐变效果</a> <a class="gra gra3" href="#" data-content="渐变效果">渐变效果</a> <a class="gra gra4" href="#" data-content="渐变效果">渐变效果</a> <a class="gra gra5" href="#" data-content="渐变效果">渐变效果</a> <a class="gra gra6" href="#" data-content="渐变效果">渐变效果</a> <a class="gra graphic" href="#" data-content="描边字效果">描边字效果</a> <a class="gra underline" href="#" data-content="下划线效果">下划线效果</a>
.gra{
text-decoration: none;
font-size:3em;
font-family:‘simhei‘;
color: #a5cdff;
position: relative;
float: left;
margin: 20px;
}
.gra::before{
left: 0;
position: absolute;
top: 0;
content: attr(data-content);
color: #4b58cc;
display: inline-block;
zoom: 1;
transition: clip .4s cubic-bezier(0.645,.045,.355,1);
width: 100%;
}
.gra:hover::before{
clip: rect(0,240px,50px,0);
}
/*渐变字效果*/
.gra1::before{
clip: rect(0,0,50px,0);
}
.gra2::before{
clip: rect(0,220px,0,0);
}
.gra3::before{
clip: rect(0,220px,50px,220px);
}
.gra4::before{
clip: rect(50px,220px,50px,0);
}
.gra5::before{
clip: rect(25px,220px,50px,0);
}
.gra6::before{
clip: rect(0,100px,50px,0);
}
/*描边字效果*/
.graphic::before{
-webkit-text-fill-color: transparent;
-webkit-text-stroke: 1px #00f;
background-size: cover;
clip: rect(0,0,50px,0);
}
.graphic：hover::before{
clip: rect(0,240px,50px,0);
}
/*下划线效果*/
.underline::before{
top:50px;
content:"";
height:2px;
clip: rect(0,0,50px,0);
background: linear-gradient(left , rgb(37, 208, 243) 11% , rgb(15, 42, 145) 93%);
background: -o-linear-gradient(left , rgb(37, 208, 243) 11% , rgb(15, 42, 145) 93%);
background: -ms-linear-gradient(left , rgb(37, 208, 243) 11% , rgb(15, 42, 145) 93%);
background: -moz-linear-gradient(left , rgb(37, 208, 243) 11% , rgb(15, 42, 145) 93%);
background: -webkit-linear-gradient(left , rgb(37, 208, 243) 11% , rgb(15, 42, 145) 93%);
}
.underline:hover::before{
clip: rect(0,240px,50px,0);
}
----------------------------------------------------------
前端开发whqet，关注前端开发，分享相关资源，欢迎点赞，欢迎拍砖。
---------------------------------------------------------------------------------------------------------