如果您是资深前端er,经验丰富、富有创意,也有可能面对新项目一时踌躇;如果您是前端初学者,可能胸中沟壑,无从下手。多多赏析优秀网站,开阔视野、寻求灵感、解析技术,很有必要。我们从国内外网页欣赏站(Awwwards\CSS Winner\Best CSS等)的收录作品中,选择一些有代表性的作品进行解析,欣赏、研读、提高,开始一个全新的系列博客《跟名站学前端》,希望对大家有所帮助。
今天早上闲逛的时候发现了《Trippeo》-一个管理商业旅行软件产品的官方网站,网站简洁而又大方,值得我们学习,我们重点研读它的文字遮罩链接效果。
欣赏
《Trippeo》网站简洁而又大方,值得我们学习,界面效果如下图所示。
首页的加载效果很酷,数字动画代表加载过程,加载完成之后可以向下滚动。
我们重点研读它的文字链接效果,使用webkit浏览器获得最佳效果,如下所示。
原理解析
使用: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,关注前端开发,分享相关资源,欢迎点赞,欢迎拍砖。
---------------------------------------------------------------------------------------------------------