码迷,mamicode.com
首页 > 其他好文 > 详细

跟名站学前端之Trippeo

时间:2015-01-29 09:24:50      阅读:256      评论:0      收藏:0      [点我收藏+]

标签:跟名站学前端   web前端开发   

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

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

跟名站学前端之Trippeo

标签:跟名站学前端   web前端开发   

原文地址:http://blog.csdn.net/whqet/article/details/43265769

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!