day09

A：今天学到的内容

一、动画（animation）

<style>
        .box{
           width: 100px;
            height: 100px;
            background-color: red;
            animation: mf 5s infinite;
            transition: all 5s;
        }
        @keyframes mf {
            from{
                width: 100px;
                height: 100px;
                background-color: pink;
                transform: rotate(360deg);
            }
            to{
                width: 500px;
                height: 500px;
                background-color: #ffdb3d;
            }
        }
    </style>

二、搜索框

input type="submit"给它边框不会影响其高度

<form>
    <input class="search-text" type="text"/>
    <button class="search-btn" type="submit"><i  class=" icon-sousuo iconfont"></i></button>
</form>

<style>
        *{margin:0;padding:0}
        .icon-sousuo {
            font-size: 24px;
        }
        /*
        input type="submit"给它边框不会影响其高度
        */
        .search-btn{
            position: absolute;
            right: 0;
            top: 0;
            z-index: 2;
            width: 52px;
            height: 52px;
            border: 1px solid #e0e0e0;
            font-size: 24px;
            line-height: 24px;
            background: #fff;
            color: #616161;
            outline: 0;
        }
        form{
            margin: 50px;
            height:54px;
            position: relative;
            width:272px;
        }
        .search-text{
            outline: none;
            position: absolute;
            top: 0;
            right: 49px;
            padding:0 10px;
            width: 223px;
            height: 50px;
            border: 1px solid #e0e0e0;
            font-size: 14px;
        }
</style>

B：学会了什么

一、动画（animation）

二、搜索框