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