为discuz定做的特效搜索
2020/08/05 14:37:57
特效并非原创，出处暂时不公布。以免三只手盗窃后恬不知耻的说是自己原创。
html部分
css部分（盒子模型大小自行调整）
演示效果：
html部分
- <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部分（盒子模型大小自行调整）
- #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;}}
演示效果：