跟名站学前端之Brian Hoff Design

Dear 丶 2022-08-06 07:16 166阅读 0赞

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

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

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

\--[我参加了博客之星评选，如果你喜欢我的博客，求投票，您的支持是我的动力之源][Link 1]，[走起！][Link 1]

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

## 欣赏 ##

[Brain Hoff Design][]是一个面向web和移动平台的交互设计机构（美国），网站界面如下。

![Image 1][]

## 解析 ##

明快、鲜亮的动画是网站的亮点，首页采用全屏背景、大文字、侧栏菜单等各站主流设计，设计简洁、色彩明快、交互十足是一个不错的设计。网站里面用到的一些鲜活的交互动画是本博文的重点，立体背景按钮、效果切换的导航按钮、书架样式的图片响应、箭头遮罩图片响应等。

立体背景的按钮

![Image 1][]

效果切换的导航按钮

![Image 1][]

书架样式的图片响应

![Image 1][]

箭头遮罩图片响应

![Image 1][]

## 实现 ##

下面我们分别来实现一下，源码我放在了codepen，请大家移步。

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

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

**[在线研究][Link 2]点击这里，[下载收藏][Link 3]点击这里。**

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

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

### 立体背景按钮 ###

立体背景的按钮主要使用css3 3d、css3 transform实现，过程如下，html如下。

<div class="btnContainer">
      <div class="btnBg"></div> 
      <a class="btnBtn" href="#">Read our latest case study</a>
    </div>

css是关键，如下代码所示。

/*立体背景按钮*/
    .btnContainer{
      position: relative;
      width:300px;
      height:60px;
      margin:20px;
    }
    .btnContainer .btnBg{
      position: absolute;
      background-color: #000;
      width:300px;
      height:60px;
      z-index:-1;
      transform: perspective(200px) rotateY(9deg) rotateX(-3deg) translateX(6%) translateZ(-10px) scale(1.05);
      transition: all 0.25s ease-in-out;
    }
    .btnContainer:hover .btnBg{
      transform: perspective(200px) rotateY(-5deg) rotateX(-3deg) translateX(-5%) translateY(2%) translateZ(-20px) scale(1.2);
    }
    .btnContainer .btnBtn{
      display: inline-block;
      text-decoration: none;
      font-size: 1.5em;
      color: #FFF;
      text-align: center;
      line-height: 60px;
    }

### 切换效果的导航菜单 ###

切换效果的导航菜单主要由两个部分的动画，一个是外圆环，一个是内侧动画。外部的圆环容易实现，改变圆环大小即可。内侧的三条线用三个div实现（也可以用:before和:after伪对象实现，简化问题起见，直接来最简单的），相应之后中间的边长，两侧的旋转。

html如下

<a class="menuContainer" href="#">  
      <div class="line"></div>
      <div class="line"></div>
      <div class="line"></div>
    </a>

css部分实现

/*导航效果切换的导航按钮*/
    .menuContainer{
      display: inline-block;
      position: relative;
      top:0px;
      left:0px;
      padding:20px 16px;
      border: 5px solid #000;
      border-radius:100%;
      margin:20px;
      text-align: center;
      transition: all 0.25s ease-in-out;
      background-color: #fff;
    }
    .menuContainer .line{
      background-color: #000;
      margin-bottom: 1px;
      height: 3px;
      width: 20px;
      transition: all 0.25s ease-in-out;
    }
    .menuContainer:hover{
      padding:26px 22px;
      top:-8px;
      left:-8px;
    }
    .menuContainer:hover .line:nth-child(1){
      width:13px;
      transform:rotateZ(-45deg) translateX(-2px) translateY(-2px);
    }
    .menuContainer:hover .line:nth-child(2){
      width:24px;
    }
    .menuContainer:hover .line:nth-child(3){
      width:13px;
      transform:rotateZ(45deg) translateX(-2px) translateY(2px);
    }

### 书架样式图片响应 ###

书架样式图片响应的实现过程如下，先看html

<a class="bookContainer" href="#">
    	<img class="bookImg" src="http://brianhoffdesign.com/images/mags/netmag.jpg">
    	<div class="bookBtn">View</div>
    </a>

css如下。

/* 书架样式图片响应 */
    .bookContainer{
      position: relative;
      margin:50px;
      width:160px;
    }
    .bookContainer:before{
      content:"";
      width:300px;
      height:50px;
      border-bottom:8px solid #666;
      background-color: #fff;
      position: absolute;
      left:-70px;
      bottom:-5px;
    }
    .bookContainer img{
      position: relative;
      bottom:0;
      transition: all 0.25s ease-in-out;
    }
    .bookContainer .bookBtn{
      width: 100px;
      height:30px;
      line-height: 30px;
      text-align: center;
      border:5px solid #666;
      position: absolute;
      z-index:-10;
      left:20px;
      top:-30px;
      opacity: 0;
      transition: all 0.25s ease-in-out;
    }
    .bookContainer:hover .bookBtn{
      top:30px;
      opacity: 1;
    }
    .bookContainer:hover img{
      bottom:10px;
    }

### 箭头遮罩图片响应 ###

可以使用-webkit-mask-image,也可以使用svg mask来实现，相对比较复杂，我们改日再来详细教程。先看使用svg的方案，简单起见，用圆形先代替。

html文件，.picContainer作为整个容器的的同时，显示背景图片，.bg用于显示hover之后的半透明遮罩颜色，svg mask显示清晰的部分。

svg的动画我们用css实现。firefox浏览器的运动遮罩尚有问题，待研究。

.picContainer{
      margin:100px 80px;
      width: 420px;
      height: 420px;
      position: relative;
      background: url(http://brianhoffdesign.com/assets/thumbnail-prizerebel.jpg) no-repeat;
    }
    .picContainer .svg{
      width:420px;
      height: 420px;
      position: absolute;
    }
    .picContainer .circle{
      transform: translate(-100px);
      opacity: 0;
      transition: all .5s ease-in-out;
    }
    .picContainer:hover .circle{
      transform: translate(100px);
      opacity: 1;
    }
    .picContainer .bg{
      width: 420px;
      height: 420px;
      background-color: #fdfdfd;
      position: absolute;
      transition: all .5s ease-in-out;
      opacity: 0;
    }
    .picContainer:hover .bg{
      opacity: 0.9;
    }

感谢您耐心读完，如果对您有帮助，[请支持我][Link 1]！

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

[前端开发whqet][whqet]，关注web前端开发，分享相关资源，欢迎点赞，欢迎拍砖。  
\---------------------------------------------------------------------------------------------------------

[Awwwards]: http://www.awwwards.com/
[CSS Winner]: http://www.csswinner.com/
[Best CSS]: http://www.bestcss.in/
[Link 1]: http://vote.blog.csdn.net/blogstar2014/details?username=whqet#content
[Brain Hoff Design]: http://brianhoffdesign.com/
[Image 1]: 
[Link 2]: http://codepen.io/whqet/pen/pvNWxB
[Link 3]: http://codepen.io/whqet/share/zip/pvNWex/
[whqet]: http://blog.csdn.net/whqet