最新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;

相关阅读:
实验九—基本统计分析（二）
【Vue CLI】
HBase (六) --------- HBase API 操作
Apache Airflow (十三) ：Airflow分布式集群搭建及使用-原因及
互联网后端技术大全！
【m98】RtpSequenceNumberMap：记录RTP序列号与时间戳
pacman 升级软件包提示 “failed to commit transaction (invalid or corrupted package)“
这些Java基础知识，诸佬们都还记得嘛(学习，复习，面试都可)
【抽样调查】CH3 分层随机抽样
Selenium的安装以及简单使用

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