##萌购 点击搜索框 页面向下位移旋转3D动画效果实现方式
最重要的就是布局思路清晰
默认样式
触发事件后
html
<div class="top-search">
<div class="search-box">
<button type="button" class="search-close">✖</button>
<div class="search-input">
<input type="text" class="zhuanyi">
<button type="submit" class="search-button">→</button>
</div>
</div>
css
body{
background-color: #353558;
}
body.active{
overflow: hidden;
}
.top-search{
width: 100%;
height: 0;
display: flex;
align-items: center;
justify-content: center;
transition: 0.5s;
opacity: 0;
}
.top-search.active{
height: 100%;
opacity: 1;
}
.top-search .search-box{
width: 1180px;
height: 340px;
margin-top: -80px;
}
.top-search .search-box.active{
opacity: 1;
}
.top-search .search-box .search-close{
width: 24px;
height: 24px;
position: absolute;
top: 24px;
right: 40px;
border: none;
outline: none;
background: none;
color: #ffffff;
cursor: pointer;
font-size: 24px;
}
.top-search .search-box .search-input{
height: 80px;
width: 100%;
margin-bottom: 40px;
display: flex;
box-shadow: inset 0 -1px 0 0 #ffffff;
align-items: center;
}
.top-search .search-box .search-input input{
height: 80px;
background: none;
flex-grow: 1;
outline: none;
border: none;
font-size: 40px;
line-height: 1;
text-align: left;
color: #ffffff;
}
.top-search .search-box .search-input .search-button{
display: block;
padding: 0;
height: 24px;
width: 24px;
margin-top: 15px;
background: none;
outline: none;
border: none;
color: #ffffff;
cursor: pointer;
font-size: 24px;
}
.top-search .search-box .search-buttons .advertisement{
width: 380px;
height: 90px;
margin-right: 12px;
margin-bottom: 20px;
float: left;
display: flex;
}
.top-search .search-box .search-buttons .advertisement a{
display: inline-block;
width: 80px;
height: 90px;
margin-right: 10px;
}
.top-search .search-box .search-buttons .advertisement a img{
width: 100%;
height: 100%;
}
.top-search .search-box .search-buttons .advertisement .text{
display: flex;
flex-direction: column;
}
.top-search .search-box .search-buttons .advertisement .text .title{
margin-bottom: 4px;
font-size: 14px;
text-align: left;
color: #ffffff;
}
.top-search .search-box .search-buttons .advertisement .text .subtitle{
margin-bottom: 4px;
font-size: 12px;
line-height: 1.33;
text-align: left;
color: #ffffff;
}
.top-search .search-box .search-buttons .advertisement .text .content{
width: 264px;
word-break: break-all;
font-size: 12px;
line-height: 1.33;
color: rgba(255, 255, 255, 0.5);
}
.wrap{
background: #fff7f7;
height: 100%;
transform-style: preserve-3d;
transition: .5s;
}
.wrap.active{
transform: perspective(600px) translate3d(0,-166px,-6px) rotateX(8deg);
opacity: 0.3;
}
js
面向对象
选择元素
this.ipt = $(".moe-search-input")[0];
this.search_close = $(".search-close")[0];
绑定事件
$(this.ipt).on("focus", this.inputanimate.bind(this));
$(this.search_close).on("click", this.closeanimate.bind(this));
//搜索框聚焦动画
Index.prototype.inputanimate = function () {
$(this.topsearch).addClass(" active");
$(this.search_box).addClass("active");
$(this.body).addClass(" active");
$(this.wrap).addClass(" active");
$(".search-box input")[0].focus();
}
//关闭搜索框动画
Index.prototype.closeanimate = function () {
$(this.topsearch).removeClass(" active");
$(this.search_box).removeClass("active");
$(this.body).removeClass(" active");
$(this.wrap).removeClass(" active");
}
总结
主要还是要看 对布局的掌握 css3 3D