最新HTML设计搜索表单

设计搜索表单

页眉中包含表单，表单中只需包含label和Input.

实现如下效果：文本框动态变宽效果

代码：6.2.4.设计搜索表单.html


html>
<html>
 
<head>
    <meta charset="utf-8">
    <title>title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
 
        header {
            font-family: Arial, Helvetica, sans-serif;
            background-color: #ddd;
            display: block;
            overflow: hidden;
            width: 500px;
            margin: 30px;
            border-radius: 6px;
        }
 
        .stylin_form_search1 {
            float: right;
            width: 200px;
            margin: 5px;
            padding: 5px;
        }
 
        .stylin_form_search1 input {
            float: right;
            width: 70px;
            padding: 2px 0 3px 5px;
            /* 去掉默认的突显轮廓线 */
            outline: none;
            font-size: 0.8em;
            border-color: #eee #ccc #ccc #eee;
            /* 针对其他浏览器厂商前缀*/
            border-radius: 10px;
            -webkit-transition: 2s width;
            /* 获取焦点时，宽度为200px */
        }
 
        .stylin_form_search1 input:focus {
            width: 200px;
        }
 
        /* 不显示标注 */
        .stylin_form_search1 label {
            display: none;
        }
    style>
head>
 
<body>
    <header>
        <form class="stylin_form_search1" action="#" method="post">
            <label for="search">searchlabel>
            <input type="search" id="search" name="search" placeholder="search" />
        form>
    header>
body>
 
html>

运用CSS3过渡效果

CSS3过渡可以让CSS属性产生动画效果。

过渡效果要写在原来属性中。

触发过渡效果的包括：:hover伪类悬停，:focus伪类获取焦点等。

五个过渡属性：

transition-property:过渡的CSS属性名，例如color,width.

transition-duration:过渡持续时间，例如2s,500ms

transition-timing-function:过渡的调速函数，匀速，先快后慢或者先慢后快，例如：ease-in,ease-out等等。

transition-delay:过渡开始延迟时间，1s,200ms.

transition:简写，以上属性直接写，color 2s ease-in 100ms;

相关阅读:
ATT&CK框架现有的14个战术进行了详细介绍
像闪电般击碎天空吧——快速轻量化模型之 SDXL-Lightning
数据结构与集合源码
【精选】网络安全大厂面试题 2.0
HBase导出建表语句
【vue 首屏加载优化】
盘点三款高可用的机器学习模型 web页面化的工具（一）
Linux中路由route
ElasticSearch搜索引擎：常用的存储mapping配置项与 doc_values详细介绍
设计模式 12 享元模式

原文地址：https://blog.csdn.net/qq_36324341/article/details/141094682