css实现搜索按钮点击展开搜索框动画效果代码
代码语言:html
所属分类:搜索
代码描述:css实现搜索按钮点击展开搜索框动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!doctype html> <html lang="zh"> <head> <meta charset="UTF-8"> <style> html,body {height: 100%;} body {padding: 0px; margin:0px; background:url(//repo.bfw.wiki/bfwrepo/image/5eec59613702c.png) ; background-position: center; background-size: cover; background-attachment: fixed; background-repeat: no-repeat;} .search-wrapper { position: absolute; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); transform: translate(-50%, -50%); top:50%; left:50%; } .search-wrapper.active {} .search-wrapper .input-holder { overflow: hidden; height: 70px; background: rgba(255,255,255,0); border-radius:6px; position: relative; width:70px; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .search-wrapper.active .input-holder { border-radius: 50px; width:450px; background: rgba(0,0,0,0.5); -webkit-transition: all .5s cubic-bezier(0.000, 0.105, 0.035, 1.570); -moz-transition: all .5s cubic-bezier(0.000, 0.105, 0.035, 1.570); transition: all .5s cubic-bezier(0.000, 0.105, 0.035, 1.570); } .search-wrapper .input-holder .search-input { width:100%; height: 50px; padding:0px 70px 0 20px; opacity: 0; position: absolute; top:0px; left:0px; background: transparent; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; border:none; outline:none; font-family:"Open Sans", Arial, Verdana; font-size: 16px; font-weight: 400; line-height: 20px; color:#FFF; -webkit-transform: translate(0, 60px); -moz-transform: translate(0, 60px); transform: translate(0, 60px); -webkit-transition: all .3s cubic-bezier(0.000, 0.105, 0.035, 1.570); -moz-transition: all .3s cubic-bezier(0.000, 0.105, 0.035, 1.570); transition: all .3s cubic-bezier(0.000, 0.105, 0.035, 1.570); -webkit-transition-delay: 0.3s; -moz-transition-delay: 0.3s; transition-delay: 0.3s; } .search-wrapper.active .input-holder .search-input { opacity: 1; -webkit-transform: translate(0, 10px); -moz-transform: translate(0, 10px); transform: translate(0, 10px); } .search-wrapper .input-holder .search-icon { width:70px; height:70px; border:none; border-radius:6px; background: #FFF; padding:0px; outline:none; position: relative; z-index: 2; float:right; cursor: pointer; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .search-wrapper.active .input-holder .search-icon { width: 50px; height:50px; margin: 10px; border-radius: 30px; } .search-wrapper .input-holder .search-icon span { width:22px; height:22px; display: inline-block; vertical-align: middle; position:relative; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); transform: rotate(45deg); -webkit-transition: all .4s cubic-bezier(0.650, -0.600, 0.240, 1.650); -moz-transition: all .4s cubic-bezier(0.650, -0.600, 0.240, 1.650); transition: all .4s cubic-bezier(0.650, -0.600, 0.240, 1.650); } .search-wrapper.active .input-holder .search-icon span { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); transform: rotate(-45deg); } .search-wrapper .input-holder .search-icon span::before, .search-wrapper .input-holder .search-icon span::after { position: absolute; content:''; } .search-wrapper .input-holder .search-icon span::before { width: 4px; height: 11px; left: 9px; top: 18px; border-radius: 2px; background: #974BE0; } .search-wrapper .input-holder .search.........完整代码请登录后点击上方下载按钮下载查看
网友评论0