• 最新HTML设计搜索表单

    设计搜索表单

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

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

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

    1. html>
    2. <html>
    3.  
    4. <head>
    5.     <meta charset="utf-8">
    6.     <title>title>
    7.     <style>
    8.         * {
    9.             margin: 0;
    10.             padding: 0;
    11.         }
    12.  
    13.         header {
    14.             font-family: Arial, Helvetica, sans-serif;
    15.             background-color: #ddd;
    16.             display: block;
    17.             overflow: hidden;
    18.             width: 500px;
    19.             margin: 30px;
    20.             border-radius: 6px;
    21.         }
    22.  
    23.         .stylin_form_search1 {
    24.             float: right;
    25.             width: 200px;
    26.             margin: 5px;
    27.             padding: 5px;
    28.         }
    29.  
    30.         .stylin_form_search1 input {
    31.             float: right;
    32.             width: 70px;
    33.             padding: 2px 0 3px 5px;
    34.             /* 去掉默认的突显轮廓线 */
    35.             outline: none;
    36.             font-size: 0.8em;
    37.             border-color: #eee #ccc #ccc #eee;
    38.             /* 针对其他浏览器厂商前缀*/
    39.             border-radius: 10px;
    40.             -webkit-transition: 2s width;
    41.             /* 获取焦点时，宽度为200px */
    42.         }
    43.  
    44.         .stylin_form_search1 input:focus {
    45.             width: 200px;
    46.         }
    47.  
    48.         /* 不显示标注 */
    49.         .stylin_form_search1 label {
    50.             display: none;
    51.         }
    52.     style>
    53. head>
    54.  
    55. <body>
    56.     <header>
    57.         <form class="stylin_form_search1" action="#" method="post">
    58.             <label for="search">searchlabel>
    59.             <input type="search" id="search" name="search" placeholder="search" />
    60.         form>
    61.     header>
    62. body>
    63.  
    64. 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;

  • 相关阅读:
    软工UML画图
    【neovim 技巧系列】quickfix 与文本处理
    【uni-app从入门到实战】get请求、数据缓存、图片上传预览
    【gcc/g++】1.编译器, 编译过程和基本参数
    数据加密标准DES安全性
    每天5分钟复习OpenStack（六）CPU虚拟化<2>
    PyTorch实现MNIST数据集手写数字识别
    【C/C++】哈希
    高数定理集合啦
    YOLO家族再度升级——阿里达摩院DAMO-YOLO重磅来袭
  • 原文地址：https://blog.csdn.net/qq_36324341/article/details/141094682