Toggle navigation
在线编辑器
在线代码
文本比较
jQuery下载
前端库
在线手册
登录/注册
下载代码
html
css
js
分享到微信朋友圈
X
html
css
body { background-color: #ff9800; color: #fff; margin: 0; } #content { position: absolute; height: 50px; width: 300px; margin-left: 170px; top: 50%; left: 50%; transform: translate(-50%, -50%); } #content.on { -webkit-animation-name: in-out; animation-name: in-out; -webkit-animation-duration: 0.7s; animation-duration: 0.7s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; } input { box-sizing: border-box; width: 50px; height: 50px; border: 4px solid #ffffff; border-radius: 50%; background: none; color: #fff; font-size: 16px; font-weight: 400; font-family: Roboto; outline: 0; -webkit-transition: width 0.4s ease-in-out, border-radius 0.8s ease-in-out, padding 0.2s; transition: width 0.4s ease-in-out, border-radius 0.8s ease-in-out, padding 0.2s; -webkit-transition-delay: 0.4s; transition-delay: 0.4s; -webkit-transform: translate(-100%, -50%); -ms-transform: translate(-100%, -50%); transform: translate(-100%, -50%); } .search { background: none; position: absolute; top: 0px; left: 0; height: 50px; width: 50px; padding: 0; border-radius: 100%; outline: 0; border: 0; color: inherit; cursor: pointer; -webkit-transition: 0.2s ease-in-out; transition: 0.2s ease-in-out; -webkit-transform: translate(-100%, -50%); -ms-transform: translate(-100%, -50%); transform: translate(-100%, -50%); } .search:before { content: ""; position: absolute; width: 20px; height: 4px; background-color: #fff; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); margin-top: 26px; margin-left: 17px; -webkit-transition: 0.2s ease-in-out; transition: 0.2s ease-in-out; } .close { -webkit-transition: 0.4s ease-in-out; transition: 0.4s ease-in-out; -webkit-transition-delay: 0.4s; transition-delay: 0.4s; } .close:before { content: ""; position: absolute; width: 27px; height: 4px; margin-top: -1px; margin-left: -13px; background-color: #fff; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); -webkit-transition: 0.2s ease-in-out; transition: 0.2s ease-in-out; } .close:after { content: ""; position: absolute; width: 27px; height: 4px; background-color: #fff; margin-top: -1px; margin-left: -13px; cursor: pointer; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } .square { box-sizing: border-box; padding: 0 40px 0 10px; width: 300px; height: 50px; border: 4px solid #ffffff; border-radius: 0; background: none; color: #fff; font-family: Roboto; font-size: 16px; font-weight: 400; outline: 0; -webkit-transition: width 0.4s ease-in-out, border-radius 0.4s ease-in-out, padding 0.2s; transition: width 0.4s ease-in-out, border-radius 0.4s ease-in-out, padding 0.2s; -webkit-transition-delay: 0.4s, 0s, 0.4s; transition-delay: 0.4s, 0s, 0.4s; -webkit-transform: translate(-100%, -50%); -ms-transform: translate(-100%, -50%); transform: translate(-100%, -50%); }
JavaScript
// updated 2019 const input = document.getElementById("search-input"); const searchBtn = document.getElementById("search-btn"); const expand = () => { searchBtn.classList.toggle("close"); input.classList.toggle("square"); }; searchBtn.addEventListener("click", expand); // old version / jquery // // function expand() { // $(".search").toggleClass("close"); // $(".input").toggleClass("square"); // if ($('.search').hasClass('close')) { // $('input').focus(); // } else { // $('input').blur(); // } // } // $('button').on('click', expand); //
粒子
时间
文字
hover
canvas
3d
游戏
音乐
火焰
水波
轮播图
鼠标跟随
动画
css
加载动画
导航
菜单
按钮
滑块
tab
弹出层
统计图
svg
×
Close
在线代码下载提示
开通在线代码永久免费下载,需支付20jQ币
开通后,在线代码模块中所有代码可终身免费下!
您已开通在线代码永久免费下载,关闭提示框后,点下载代码可直接下载!
您已经开通过在线代码永久免费下载
对不起,您的jQ币不足!可通过发布资源 或
直接充值获取jQ币
取消
开通下载
<!doctype html> <html> <head> <meta charset="utf-8"> <title>搜索栏动画-jq22.com</title> <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script> <style>
</style> </head> <body>
<script>
</script>
</body> </html>
2012-2021 jQuery插件库版权所有
jquery插件
|
jq22工具库
|
网页技术
|
广告合作
|
在线反馈
|
版权声明
沪ICP备13043785号-1
浙公网安备 33041102000314号