跟名站学前端之Trippeo

今天药忘吃喽~ 2022-08-06 13:25 138阅读 0赞

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

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

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

## 欣赏 ##

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

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

![Center][]

![Center 1][]

![Center 2][]

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

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

==== 文字遮罩动画====    == [全屏预览][Link 2]==   == [在线编辑][Link 3]==    == [下载收藏][Link 4]==

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

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

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

## 原理解析 ##

使用:before伪对象实现变色之后的字、下划线、描边字等；

对:before伪对象进行clip裁切；

利用transition实现动画。

## 实现过程 ##

html

css，首先设置链接，去下划线、设置字体、大小、颜色、位置；然后设置:before对象，大小、位置、颜色、content、transition等，设置hover前后的clip属性。

然后变体，扩展出一些其他效果。

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

\---------------------------------------------------------------------------------------------------------

[Awwwards]: http://www.awwwards.com/
[CSS Winner]: http://www.csswinner.com/
[Best CSS]: http://www.bestcss.in/
[Link 1]: http://blog.csdn.net/column/details/learnfed.html
[Trippeo]: https://www.trippeo.com/
[Center]: /images/20220806/620a6d37c5144ac394abfc9f67df3bc8.png
[Center 1]: /images/20220806/1d4dd1b018c648f08c308f54e0b19762.png
[Center 2]: /images/20220806/97955715bddd49a39cf8ea5dd03d3c98.png
[Link 2]: http://codepen.io/whqet/full/MYvvmM/
[Link 3]: http://codepen.io/whqet/pen/MYvvmM
[Link 4]: http://codepen.io/whqet/share/zip/MYvvmM/
[Link 5]: http://codepen.io/whqet/full/razZKV/
[Link 6]: http://codepen.io/whqet/pen/razZKV
[Link 7]: http://codepen.io/whqet/share/zip/razZKV/
[whqet]: http://blog.csdn.net/whqet