一键复制HTML+CSS动画 打造炫酷的搜索框

<div class="search-container">
        <input type="search" class="search-input" placeholder="搜索..." aria-label="搜索">
        <button type="submit" class="search-button" aria-label="搜索按钮">
            <svg class="search-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
            </svg>
        </button>
    </div>

body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        .search-container {
            position: relative;
            width: 300px;
        }
        .search-input {
            width: 100%;
            padding: 10px 40px 10px 15px;
            border: 2px solid #4CAF50;
            border-radius: 25px;
            outline: none;
            font-size: 16px;
            transition: all 0.3s ease;
        }
        .search-input:focus {
            box-shadow: 0 0 10px rgba(76, 175, 80, 0.5);
        }
        .search-button {
            position: absolute;
            right: 5px;
            top: 50%;
            transform: translateY(-50%);
            background: none;
            border: none;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        .search-icon {
            width: 20px;
            height: 20px;
            fill: #4CAF50;
            transition: all 0.3s ease;
        }
        .search-button:hover .search-icon {
            transform: scale(1.1);
        }
        .search-button:active .search-icon {
            transform: scale(0.9);
        }