跟名站学前端之Trippeo

前端开发whqet,csdn,王海庆,whqet,前端开发专家

如果您是资深前端er，经验丰富、富有创意，也有可能面对新项目一时踌躇；如果您是前端初学者，可能胸中沟壑，无从下手。多多赏析优秀网站，开阔视野、寻求灵感、解析技术，很有必要。我们从国内外网页欣赏站(Awwwards\CSS Winner\Best CSS等)的收录作品中，选择一些有代表性的作品进行解析，欣赏、研读、提高，开始一个全新的系列博客《跟名站学前端》，希望对大家有所帮助。

今天早上闲逛的时候发现了《Trippeo》-一个管理商业旅行软件产品的官方网站，网站简洁而又大方，值得我们学习，我们重点研读它的文字遮罩链接效果。

欣赏

《Trippeo》网站简洁而又大方，值得我们学习，界面效果如下图所示。

首页的加载效果很酷，数字动画代表加载过程，加载完成之后可以向下滚动。

我们重点研读它的文字链接效果，使用webkit浏览器获得最佳效果，如下所示。

        --------------------------------------------------------------------------------------------------------------------------------------------------------------------------

                                             ==== 文字遮罩动画====    == 全屏预览==   == 在线编辑==    == 下载收藏== 

        --------------------------------------------------------------------------------------------------------------------------------------------------------------------------

        --------------------------------------------------------------------------------------------------------------------------------------------------------------------------

                      ==== svg圆形动画导航(高手作品，非原创)====    == 全屏预览==   == 在线编辑==    == 下载收藏== 

        --------------------------------------------------------------------------------------------------------------------------------------------------------------------------

原理解析

使用: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，关注前端开发，分享相关资源，欢迎点赞，欢迎拍砖。

---------------------------------------------------------------------------------------------------------