HTML部件之—搜索框深水炸弹第二弹

2023-05-16

大家好这里是大魔王💤💤💤，最近比较喜欢做所搜框，所以今天又来分享一个搜索框🧡，以后的分享会做的更加详细一些，如果对你有帮助，别忘了收藏噢💘💘💘

在这里插入图片描述

效果图

在这里插入图片描述

在这里插入图片描述
颜色按照自己喜欢的来就好~看过上一期的朋友应该知道这个就是比上一个多了一个关闭键

在这里插入图片描述

代码

<body>
	
	<section class="container">
		<form onsubmit="submitFn(this, event);">
            <div class="search-wrapper">
                <div class="input-holder">
                    <input type="text" class="search-input" placeholder="请输入搜索内容..." />
                    <button class="search-icon" onclick="searchToggle(this, event);"><span></span></button>
                </div>
                <span class="close" onclick="searchToggle(this, event);"></span>
                <div class="result-container">

                </div>
            </div>
        </form>
	</section>
	
	<script src="http://www.jq22.com/jquery/1.11.1/jquery.min.js"></script>
	<script>window.jQuery || document.write('<script src="js/jquery-1.11.0.min.js"><\/script>')</script>
	<script type="text/javascript">
        function searchToggle(obj, evt){
            var container = $(obj).closest('.search-wrapper');

            if(!container.hasClass('active')){
                  container.addClass('active');
                  evt.preventDefault();
            }
            else if(container.hasClass('active') && $(obj).closest('.input-holder').length == 0){
                  container.removeClass('active');
                  // clear input
                  container.find('.search-input').val('');
                  // clear and hide result container when we press close
                  container.find('.result-container').fadeOut(100, function(){$(this).empty();});
            }
        }

        function submitFn(obj, evt){
            value = $(obj).find('.search-input').val().trim();

            _html = "你输入了： ";
            if(!value.length){
                _html = "yyyyyy~~";
            }
            else{
                _html += "<b>" + value + "</b>";
            }

            $(obj).find('.result-container').html('<span>' + _html + '</span>');
            $(obj).find('.result-container').fadeIn(100);

            evt.preventDefault();
        }
    </script>
</body>

在这里插入图片描述

CSS:


.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;
    width:70px;
    background: #FF8800;
    border-radius:30px;
    position: relative;
    -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: #FFFF33;
    -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);
    <!------从开始到结束的不同速度过渡速度(贝塞尔曲线)和变换的持续时间---->
    <!-----以及展开的"长度"，也就是x轴的长度，y轴不变，以及将图案的圆曲度改一下----->
}

.search-wrapper .input-holder .search-input {
    width:100%;
    height: 50px;  <!---改变y轴--->
    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: 2;
    -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: #FF8888;
}
.search-wrapper .input-holder .search-icon span::after {
    width: 14px;
    height: 14px;
    left: 0px;
    top: 0px;
    border-radius: 16px;
    border: 4px solid #974BE0;
}

.search-wrapper .close {
    position: absolute;
    z-index: 1;
    top:24px;
    right:20px;
    width:25px;
    height:25px;
    cursor: pointer;
    -webkit-transform: rotate(-180deg);
    -moz-transform: rotate(-180deg);
    transform: rotate(-180deg);
    -webkit-transition: all .3s cubic-bezier(0.285, -0.450, 0.935, 0.110);
    -moz-transition: all .3s cubic-bezier(0.285, -0.450, 0.935, 0.110);
    transition: all .3s cubic-bezier(0.285, -0.450, 0.935, 0.110);
    -webkit-transition-delay: 0.2s;
    -moz-transition-delay: 0.2s;
    transition-delay: 0.2s;
}
.search-wrapper.active .close {
    right:-50px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transition: all .6s cubic-bezier(0.000, 0.105, 0.035, 1.570);
    -moz-transition: all .6s cubic-bezier(0.000, 0.105, 0.035, 1.570);
    transition: all .6s cubic-bezier(0.000, 0.105, 0.035, 1.570);
    -webkit-transition-delay: 0.5s;
    -moz-transition-delay: 0.5s;
    transition-delay: 0.5s;
}
.search-wrapper .close::before, .search-wrapper .close::after {
    position:absolute;
    content:'';
    background: #FF7744;
    border-radius: 2px;
}
.search-wrapper .close::before {
    width: 5px;
    height: 25px;
    left: 10px;
    top: 0px;
}
.search-wrapper .close::after {
    width: 25px;
    height: 5px;
    left: 0px;
    top: 10px;
}
.search-wrapper .result-container {
    width: 100%;
    position: absolute;
    top:80px;
    left:0px;
    text-align: center;
    font-family: "Open Sans", Arial, Verdana;
    font-size: 14px;
    display:none;
    color:#B7B7B7;
}


@media screen and (max-width: 560px) {
    .search-wrapper.active .input-holder {width:200px;}
}

好啦今天的分享就到这里啦，下期见，别忘了点赞、关注噢
在这里插入图片描述

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

html

搜索框深水炸弹第二弹

HTML部件之—搜索框深水炸弹第二弹的相关文章

如何使用 iText 将 HTML 转换为 PDF [重复]

这个问题在这里已经有答案了 import java io File import java io FileOutputStream import java io OutputStream import com itextpdf text D
如何在mvc 4中使用多重选择？

我想使用多重选择Chosen http harvesthq github com chosen 我有类似的技能模型 public class Skill public int Id get set public string Name ge
如何设计一个在 Firefox、Chrome 和 IE11 中看起来相同的单选按钮

我想设计一组单选按钮它们在 Chrome Firefox 和 IE 11 中看起来应该相同我的解决方案在 Firefox 中看起来相当不错在 Chrome 中按钮周围有一个蓝色框而在 IE 11 中颜色和边框似乎无法识别它应该
如何从对象 URL 获取文件或 blob？

我允许用户通过拖放和其他方法将图像加载到页面中当图像被删除时我正在使用URL createObjectURL转换为对象 URL 以显示图像我不会撤销该网址因为我会重复使用它所以当需要创建一个FormData对象以便我可以允许他
Bootstrap 4.1.1 form-check form-check-inline 单选按钮

我正在尝试将单选按钮显示为内联选项在 Bootstrap 4 1 1 文档中示例代码是 div class form check form check inline div
脚本和链接标签的简写 http:// 为 // ？有人以前看过/用过这个吗？

问题如下如果您使用 addthis 共享按钮查看任何网站一旦您浮动在 addthis 按钮上并且加载了所有必需的资源请使用 firebug 或 chrome 检查器查看文档的正文不是源代码而是屏幕上的实际文档对象检查器你会
我的引导页面页脚下方的空白

虽然我之前在身体下方确定了 50 像素的填充但我仍然遇到页面页脚下方有一堆空白的问题我是否只需要延长内容即可填充垂直空间我第一次使用 bootstrap 来创建我的新网站但我陷入了这个恼人的困境这是一个有问题的页面的链接 http
使用 Azure Bot Framework Web 聊天无法单击电话号码

Setup 我使用以下命令创建了一个 Azure QnA Web 聊天机器人QnAMaker https www qnamaker ai Azure 机器人服务 https azure microsoft com en us service
WebRTC 暂停和恢复流

我正在尝试使用 WebRTC 构建一个 Web 应用程序当某些事件触发时需要暂停恢复视频音频流我已经尝试过getTracks 0 stop 但我不知道如何恢复流对此有什么建议吗谢谢 getTracks 0 stop 是永久的 U
如何防止在 CSS 中调整图像大小？

我有以下代码来创建图像库他们需要做出反应但问题是当窗口宽度发生变化时图像也会调整大小并失去纵横比我怎样才能解决这个问题我是 CSS 新手 padding 0 margin 0 HEADER STYLES header width
如何让 CSS3 渐变跨越整个页面的高度，而不仅仅是视口？

我有一个跨浏览器的 CSS 渐变如下所示 background background 1E5799 old browsers background moz linear gradient top 002c5a 0 79d6f4 100 f
搜索引擎可以读取 CSS 吗？

我用标签来表示句子的重要性然而它破坏了页面风格的一致性所以我用CSS把它改回来结果是对于访问者来说是相同的但对于搜索引擎 SE 来说显然是不同的这正是SE们所烦恼的所以我的问题是SE们能否读取CSS 并用它进一步判断整个页
使用 jQuery/JavaScript 提醒特殊字符

如何在 Javascript jQuery 警报中显示带有特殊字符例如的字符串例如我想显示一个消息框价格为 10 欧元但是当我使用下面的代码时 alert The Price is euro 10 消息框中显示的输出是 The
将标签

HTML部件之—搜索框深水炸弹第二弹

效果图

代码

HTML部件之—搜索框深水炸弹第二弹 的相关文章

HTML部件之—搜索框深水炸弹第二弹的相关文章