·设为首页收藏本站📧邮箱修改🎁免费下载专区💎积分✅卡密📒收藏夹👽聊天室
返回列表 发布新帖

为discuz定做的特效搜索

335 0
发表于 2020-8-5 14:37:57 | 查看全部 阅读模式

马上注册,免费下载更多dz插件网资源。

您需要 登录 才可以下载或查看,没有账号?立即注册

×
特效并非原创,出处暂时不公布。以免三只手盗窃后恬不知耻的说是自己原创。

html部分
  1. <form id="sd_scbar_form" method="{if $_G[fid] && !empty($searchparams[url])}get{else}post{/if}" autocomplete="off" onsubmit="searchFocus($('scbar_txt'))" action="{if $_G[fid] && !empty($searchparams[url])}$searchparams[url]{else}search.php?searchsubmit=yes{/if}" target="_blank">        <input type="hidden" name="formhash" value="{FORMHASH}" />        <input type="text" name="srchtxt" id="sd_scbar_txt" autocomplete="off" x-webkit-speech speech required/>        <span id="sd_scbar_caret"></span></form>
复制代码

css部分(盒子模型大小自行调整)
  1. #sd_scbar_form{width: 218px;height:56px;padding: 40px;border: 1px solid rgba(133,153,171,0.2);border-radius: 4px;position: relative;}#sd_scbar_txt, #sd_scbar_caret{display: block;transition: all .5s linear;margin: 0 auto;}#sd_scbar_txt{background: transparent;border: 0;border-radius: 50%;box-shadow: 0 0 0 3px inset;caret-color: #FFF;width: 24px;height: 24px;position: relative;top: 16px;cursor: pointer;-webkit-appearance: none;-moz-appearance: none;appearance: none;}#sd_scbar_txt:focus, #sd_scbar_txt:valid{background: rgb(55, 150, 246);border-radius: 4px;color: #FFF;box-shadow: none;padding: 10px;transition-duration: .25s;transition-delay: .25s;width: 198px;height: 36px;cursor: text !important;top: 0 !important;}#sd_scbar_txt:focus{animation: showCaret 1s steps(1);outline: transparent;}#sd_scbar_txt:focus + #sd_scbar_caret, #sd_scbar_txt:valid + #sd_scbar_caret {background: transparent;width: 1px;height: 18px;transform: translate(0,-12px) rotate(-180deg) translate(90px,-3px);}#sd_scbar_txt::-webkit-search-decoration {-webkit-appearance: none;}#sd_scbar_caret{background: currentColor;border-radius: 0 0 1.5px 1.5px;margin-bottom: 7.2px;width: 3px;height: 12px;transform: translate(0,-12px) rotate(-45deg) translate(0,10.5px);transform-origin: 50% 0;position: relative;top: 16px;}@keyframes showCaret {from {caret-color: transparent;}to {caret-color: #5583f6;}}
复制代码

演示效果:
为discuz定做的特效搜索 discuz,定做,特效,搜索
我要说一句 收起回复
一花一世界,一叶一追寻。一曲一场叹,一生为一人。

回复

 懒得打字嘛,点击右侧快捷回复【查看最新发布】   【应用商城享更多资源】
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

创宇盾启航版免费网站防御网站加速服务
投诉/建议联系

discuzaddons@vip.qq.com

未经授权禁止转载,复制和建立镜像,
如有违反,按照公告处理!!!
  • 联系QQ客服
  • 添加微信客服

联系DZ插件网微信客服|最近更新|Archiver|手机版|小黑屋|DZ插件网! ( 鄂ICP备20010621号-1 )|网站地图 知道创宇云防御

您的IP:3.144.9.152,GMT+8, 2024-12-19 23:47 , Processed in 0.266866 second(s), 87 queries , Gzip On, Redis On.

Powered by Discuz! X5.0 Licensed

© 2001-2024 Discuz! Team.

关灯 在本版发帖
扫一扫添加微信客服
QQ客服返回顶部
快速回复 返回顶部 返回列表