一款可展开收缩的联系我吧动画特效,点击“联系我吧”按钮,可展联系方式列表,里面的联系方式可以自由添加或删除,点击向上的箭头,可以收缩起联系方式,整体的效果还是相当漂亮大气的,喜欢的童鞋请收下吧。
页面的head部分,需要设置好页面元素的样式,部分代码如下:
@media (min-width: 414px) {
.contact nav a {
padding: 18px 30px;
}
}
.contact nav a .arrow {
position: absolute;
right: 15px;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}
.contact nav a .arrow path {
fill: #e6e6e6;
}
.contact nav a.gmail .icon svg {
background-color: #d14836;
}
.contact nav a.gmail .content h1 {
color: #d14836;
}
.contact nav a.facebook .icon svg {
background-color: #3b5998;
}
.contact nav a.facebook .content h1 {
color: #3b5998;
}
.contact nav a.twitter .icon svg {
background-color: #1da1f2;
}
.contact nav a.twitter .content h1 {
color: #1da1f2;
}
.contact nav a .icon {
float: left;
width: 50px;
height: 50px;
border-radius: 50%;
overflow: hidden;
margin-right: 20px;
}
.contact nav a .icon svg {
width: 100%;
height: 100%;
padding: 14px;
}
.contact nav a .icon svg path {
fill: #ffffff;
}
.contact nav a .content h1 {
font-size: 20px;
font-weight: 400;
line-height: 160%;
letter-spacing: .4px;
}
.contact nav a .content span {
font-size: 14px;
color: #b3b3b3;
display: block;
letter-spacing: .4px;
}
页面的body部分,main标签里面放入个人简介的内容,nav标签里面则放入联系方式的列表,代码如下:
<div class="contact-area">
<div class="contact">
<main>
<section>
<div class="content">
<img src="http://www.sucaihuo.com/other/avatar/dir/905.jpg" alt="Profile Image">
<aside>
<h1>richer</h1>
<p>嗨,各位亲爱的小伙伴们,大家好!我是richer!</p>
</aside>
<button>
<span>联系我吧</span>
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"> <g class="nc-icon-wrapper" fill="#444444"> <path d="M14.83 30.83L24 21.66l9.17 9.17L36 28 24 16 12 28z"></path> </g> </svg>
</button>
</div>
<div class="title"><p>联系方式</p></div>
</section>
</main>
<nav>
<a href="#" class="gmail">
<div class="icon">
<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M16 3v10c0 .567-.433 1-1 1h-1V4.925L8 9.233 2 4.925V14H1c-.567 0-1-.433-1-1V3c0-.283.108-.533.287-.712C.467 2.107.718 2 1 2h.333L8 6.833 14.667 2H15c.283 0 .533.108.713.288.179.179.287.429.287.712z" fill-rule="evenodd"/></svg>
</div>
<div class="content">
<h1>邮箱</h1>
<span>Richer@sucaihuo.com</span>
</div>
<svg class="arrow" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"> <g class="nc-icon-wrapper" fill="#444444"> <path d="M17.17 32.92l9.17-9.17-9.17-9.17L20 11.75l12 12-12 12z"></path> </g> </svg>
</a>
<a href="#" class="facebook">
<div class="icon">
<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M15.117 0H.883C.395 0 0 .395 0 .883v14.234c0 .488.395.883.883.883h7.663V9.804H6.46V7.39h2.086V5.607c0-2.066 1.262-3.19 3.106-3.19.883 0 1.642.064 1.863.094v2.16h-1.28c-1 0-1.195.48-1.195 1.18v1.54h2.39l-.31 2.42h-2.08V16h4.077c.488 0 .883-.395.883-.883V.883C16 .395 15.605 0 15.117 0" fill-rule="nonzero"/></svg>
</div>
<div class="content">
<h1>脸书</h1>
<span>Richer</span>
</div>
<svg class="arrow" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"> <g class="nc-icon-wrapper" fill="#444444"> <path d="M17.17 32.92l9.17-9.17-9.17-9.17L20 11.75l12 12-12 12z"></path> </g> </svg>
</a>
<a href="#" class="twitter">
<div class="icon">
<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M16 3.038c-.59.26-1.22.437-1.885.517.677-.407 1.198-1.05 1.443-1.816-.634.37-1.337.64-2.085.79-.598-.64-1.45-1.04-2.396-1.04-1.812 0-3.282 1.47-3.282 3.28 0 .26.03.51.085.75-2.728-.13-5.147-1.44-6.766-3.42C.83 2.58.67 3.14.67 3.75c0 1.14.58 2.143 1.46 2.732-.538-.017-1.045-.165-1.487-.41v.04c0 1.59 1.13 2.918 2.633 3.22-.276.074-.566.114-.865.114-.21 0-.41-.02-.61-.058.42 1.304 1.63 2.253 3.07 2.28-1.12.88-2.54 1.404-4.07 1.404-.26 0-.52-.015-.78-.045 1.46.93 3.18 1.474 5.04 1.474 6.04 0 9.34-5 9.34-9.33 0-.14 0-.28-.01-.42.64-.46 1.2-1.04 1.64-1.7z" fill-rule="nonzero"/></svg>
</div>
<div class="content">
<h1>推特</h1>
<span>@Richer</span>
</div>
<svg class="arrow" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"> <g class="nc-icon-wrapper" fill="#444444"> <path d="M17.17 32.92l9.17-9.17-9.17-9.17L20 11.75l12 12-12 12z"></path> </g> </svg>
</a>
</nav>
</div>
</div>
页面的底部,需要设置好点击事件的响应和样式变化,代码如下:
<script type="text/javascript">
$('button').click(function(){
$('button').toggleClass('active');
$('.title').toggleClass('active');
$('nav').toggleClass('active');
});
</script>
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791