跟名站学前端之Brian Hoff Design

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

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

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

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

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

欣赏

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

解析

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

立体背景的按钮

效果切换的导航按钮

书架样式的图片响应

箭头遮罩图片响应

实现

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

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

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

在线研究点击这里，下载收藏点击这里。

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

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

立体背景按钮

立体背景的按钮主要使用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显示清晰的部分。

<div class="picContainer">
  <div class="bg"></div>
  <svg class="svg" x="0px" y="0px" viewBox="0 0 420 420" >
    <defs>
      <mask id="mask">
        <circle class="circle" cx="-100" cy="200" r="100" fill="white"></circle>
      </mask>
    </defs>
    <image xlink:href="http://brianhoffdesign.com/assets/thumbnail-prizerebel.jpg" mask="url(#mask)" width="420" height="420" x="0" y="0"></image>
  </svg>
</div>

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;
}

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

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

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