HTML&CSS：你绝对没见过的input输入框，确定不看看吗

前端Hardy2025-04-03 14:03

这个页面实现了一个带有动画效果的输入框组件，用户可以在输入框中输入内容，并通过清除按钮清除内容。

大家复制代码时，可能会因格式转换出现错乱，导致样式失效。建议先少量复制代码进行测试，若未能解决问题，私信回复源码两字，我会发送完整的压缩包给你。

演示效果

HTML&CSS

html 复制代码 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.1/gsap.min.js"></script>
    <title>公众号关注：前端Hardy</title>
    <style>
        .url-input {
            --background: #fff;
            --border-default: #E1E6F9;
            --border-active: #275EFE;
            --text-color: #646B8C;
            --placeholder-color: #BBC1E1;
            --icon: #275EFE;
            --close: #646B8C;
            --close-light: #A6ACCD;
            --close-background: #EFF2FB;
            width: 100%;
            max-width: 240px;
            display: flex;
            align-items: center;
            position: relative;
            border-radius: 8px;
            background: var(--background);
            box-shadow: inset 0 0 0 var(--border-width, 1px) var(--border, var(--border-default));
            transition: box-shadow 0.2s;
            --favicon-scale: 0;
            --icon-offset: 0px;
            --clear-x: 0px;
            --clear-swipe-left: 0px;
            --clear-swipe-x: 0;
            --clear-swipe: 0px;
            --clear-scale: 0;
            --clear-rotate: 0deg;
            --clear-opacity: 0;
            --clear-arrow-o: 1;
            --clear-arrow-x: 0px;
            --clear-arrow-y: 0px;
            --clear-arrow-offset: 4px;
            --clear-arrow-offset-second: 4px;
            --clear-line-array: 8.5px;
            --clear-line-offset: 27px;
            --clear-long-array: 8.5px;
            --clear-long-offset: 24px;
        }

        .url-input.clearing,
        .url-input:focus-within {
            --border-width: 1.5px;
            --border: var(--border-active);
        }

        .url-input.clearing {
            --close-background: transparent;
            --clear-arrow-stroke: var(--close-light);
        }

        .url-input .icon {
            position: absolute;
            left: 15px;
            top: 15px;
            pointer-events: none;
        }

        .url-input .icon svg,
        .url-input .icon img {
            display: block;
            width: 18px;
            height: 18px;
        }

        .url-input .icon svg {
            fill: none;
            stroke-width: 1.5;
            stroke-linecap: round;
            stroke-linejoin: round;
            stroke: var(--icon);
        }

        .url-input .icon svg path {
            stroke-dasharray: 24px;
            stroke-dashoffset: var(--icon-offset);
        }

        .url-input .icon .favicon {
            position: absolute;
            left: 0;
            top: 0;
            transform: scale(var(--favicon-scale)) translateZ(0);
        }

        .url-input .text {
            flex-grow: 1;
        }

        .url-input .text input {
            -webkit-appearance: none;
            line-height: 24px;
            background: none;
            border: none;
            outline: none;
            display: block;
            width: 100%;
            margin: 0;
            padding: 12px 12px 12px 44px;
            font-family: inherit;
            font-size: 14px;
            font-weight: 500;
            color: var(--text-color);
        }

        .url-input .text input::-moz-placeholder {
            color: var(--placeholder-color);
        }

        .url-input .text input:-ms-input-placeholder {
            color: var(--placeholder-color);
        }

        .url-input .text input::placeholder {
            color: var(--placeholder-color);
        }

        .url-input .clear {
            -webkit-appearance: none;
            position: relative;
            z-index: 1;
            padding: 0;
            margin: 12px 12px 12px 0;
            border: none;
            outline: none;
            background: var(--b, transparent);
            transition: background 0.2s;
            border-radius: 6px;
            opacity: var(--clear-opacity);
            transform: scale(var(--clear-scale)) translateZ(0);
        }

        .url-input .clear:before {
            content: "";
            position: absolute;
            top: 0;
            bottom: 0;
            right: 12px;
            left: var(--clear-swipe-left);
            background: var(--background);
            transform-origin: 100% 50%;
            transform: translateX(var(--clear-swipe)) scaleX(var(--clear-swipe-x)) translateZ(0);
        }

        .url-input .clear svg {
            display: block;
            position: relative;
            z-index: 1;
            width: 24px;
            height: 24px;
            outline: none;
            cursor: pointer;
            fill: none;
            stroke-width: 1.5;
            stroke-linecap: round;
            stroke-linejoin: round;
            stroke: var(--close);
            transform: translateX(var(--clear-x)) rotate(var(--clear-rotate)) translateZ(0);
        }

        .url-input .clear svg path {
            transition: stroke 0.2s;
        }

        .url-input .clear svg path.arrow {
            stroke: var(--clear-arrow-stroke, var(--close));
            stroke-dasharray: 4px;
            stroke-dashoffset: var(--clear-arrow-offset);
            opacity: var(--clear-arrow-o);
            transform: translate(var(--clear-arrow-x), var(--clear-arrow-y)) translateZ(0);
        }

        .url-input .clear svg path.arrow:last-child {
            stroke-dashoffset: var(--clear-arrow-offset-second);
        }

        .url-input .clear svg path.line {
            stroke-dasharray: var(--clear-line-array) 28.5px;
            stroke-dashoffset: var(--clear-line-offset);
        }

        .url-input .clear svg path.long {
            stroke: var(--clear-arrow-stroke, var(--close));
            stroke-dasharray: var(--clear-long-array) 15.5px;
            stroke-dashoffset: var(--clear-long-offset);
            opacity: var(--clear-arrow-o);
            transform: translate(var(--clear-arrow-x), var(--clear-arrow-y)) translateZ(0);
        }

        .url-input .clear:hover {
            --b: var(--close-background);
        }

        html {
            box-sizing: border-box;
            -webkit-font-smoothing: antialiased;
        }

        * {
            box-sizing: inherit;
        }

        *:before,
        *:after {
            box-sizing: inherit;
        }

        body {
            min-height: 100vh;
            display: flex;
            font-family: "Inter", Arial;
            justify-content: center;
            align-items: center;
            background: #F6F8FF;
        }
    </style>
</head>

<body>
    <div class="url-input">
        <div class="icon">
            <svg viewBox="0 0 18 18">
                <path
                    d="M10.05 7.95001C11.55 9.45001 11.55 11.775 10.05 13.275L7.95 15.375C6.45 16.875 4.125 16.875 2.625 15.375C1.125 13.875 1.125 11.55 2.625 10.05L4.5 8.25001" />
                <path
                    d="M7.9502 10.05C6.4502 8.55 6.4502 6.225 7.9502 4.725L10.0502 2.625C11.5502 1.125 13.8752 1.125 15.3752 2.625C16.8752 4.125 16.8752 6.45 15.3752 7.95L13.5002 9.75" />
            </svg>
            <div class="favicon"></div>
        </div>
        <div class="text">
            <input type="text" placeholder="Your URL" />
        </div>
        <button class="clear">
            <svg viewBox="0 0 24 24">
                <path class="line" d="M2 2L22 22" />
                <path class="long" d="M9 15L20 4" />
                <path class="arrow" d="M13 11V7" />
                <path class="arrow" d="M17 11H13" />
            </svg>
        </button>
    </div>
    <script>
        const { to, set, timeline } = gsap

        function validURL(str) {
            let pattern = new RegExp('^(https?:\\/\\/)?' +
                '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|' +
                '((\\d{1,3}\\.){3}\\d{1,3}))' +
                '(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*' +
                '(\\?[;&a-z\\d%_.~+=-]*)?' +
                '(\\#[-a-z\\d_]*)?$', 'i')
            return !!pattern.test(str)
        }

        function delay(fn, ms) {
            let timer = 0
            return function (...args) {
                clearTimeout(timer)
                timer = setTimeout(fn.bind(this, ...args), ms || 0)
            }
        }

        document.querySelectorAll('.url-input').forEach(elem => {
            let icon = elem.querySelector('.icon'),
                favicon = icon.querySelector('.favicon'),
                clear = elem.querySelector('.clear'),
                input = elem.querySelector('input'),
                { classList } = elem,
                svgLine = clear.querySelector('.line'),
                svgLineProxy = new Proxy({
                    x: null
                }, {
                    set(target, key, value) {
                        target[key] = value
                        if (target.x !== null) {
                            svgLine.setAttribute('d', getPath(target.x, .1925))
                        }
                        return true
                    },
                    get(target, key) {
                        return target[key]
                    }
                })

            svgLineProxy.x = 0

            input.addEventListener('input', delay(e => {
                let bool = input.value.length,
                    valid = validURL(input.value)
                to(elem, {
                    '--clear-scale': bool ? 1 : 0,
                    duration: bool ? .5 : .15,
                    ease: bool ? 'elastic.out(1, .7)' : 'none'
                })
                to(elem, {
                    '--clear-opacity': bool ? 1 : 0,
                    duration: .15
                })
                to(elem, {
                    '--icon-offset': valid ? '24px' : '0px',
                    duration: .15,
                    delay: valid ? 0 : .2
                })
                if (valid) {
                    if (favicon.querySelector('img')) {
                        favicon.querySelector('img').src = 'https://f1.allesedv.com/64/' + input.value
                        return
                    }
                    let img = new Image()
                    img.onload = () => {
                        favicon.appendChild(img)
                        to(elem, {
                            '--favicon-scale': 1,
                            duration: .5,
                            delay: .2,
                            ease: 'elastic.out(1, .7)'
                        })
                    }
                    img.src = 'https://f1.allesedv.com/64/' + input.value
                } else {
                    if (favicon.querySelector('img')) {
                        to(elem, {
                            '--favicon-scale': 0,
                            duration: .15,
                            onComplete() {
                                favicon.querySelector('img').remove()
                            }
                        })
                    }
                }
            }, 250))

            clear.addEventListener('click', e => {
                classList.add('clearing')
                set(elem, {
                    '--clear-swipe-left': (input.offsetWidth - 44) * -1 + 'px'
                })
                to(elem, {
                    keyframes: [{
                        '--clear-rotate': '45deg',
                        duration: .25
                    }, {
                        '--clear-arrow-x': '2px',
                        '--clear-arrow-y': '-2px',
                        duration: .15
                    }, {
                        '--clear-arrow-x': '-3px',
                        '--clear-arrow-y': '3px',
                        '--clear-swipe': '-3px',
                        duration: .15,
                        onStart() {
                            to(svgLineProxy, {
                                x: 3,
                                duration: .1,
                                delay: .05
                            })
                        }
                    }, {
                        '--clear-swipe-x': 1,
                        '--clear-x': (input.offsetWidth - 32) * -1 + 'px',
                        duration: .45,
                        onComplete() {
                            input.value = ''
                            input.focus()
                            if (favicon.querySelector('img')) {
                                to(elem, {
                                    '--favicon-scale': 0,
                                    duration: .15,
                                    onComplete() {
                                        favicon.querySelector('img').remove()
                                    }
                                })
                                to(elem, {
                                    '--icon-offset': '0px',
                                    '--icon-offset-line': '0px',
                                    duration: .15,
                                    delay: .2
                                })
                            }
                            to(elem, {
                                '--clear-arrow-offset': '4px',
                                '--clear-arrow-offset-second': '4px',
                                '--clear-line-array': '8.5px',
                                '--clear-line-offset': '27px',
                                '--clear-long-offset': '24px',
                                '--clear-rotate': '0deg',
                                '--clear-arrow-o': 1,
                                duration: 0,
                                delay: .7,
                                onStart() {
                                    classList.remove('clearing')
                                }
                            })
                            to(elem, {
                                '--clear-opacity': 0,
                                duration: .2,
                                delay: .55
                            })
                            to(elem, {
                                '--clear-arrow-o': 0,
                                '--clear-arrow-x': '0px',
                                '--clear-arrow-y': '0px',
                                '--clear-swipe': '0px',
                                duration: .15
                            })
                            to(svgLineProxy, {
                                x: 0,
                                duration: .45,
                                ease: 'elastic.out(1, .75)'
                            })
                        }
                    }, {
                        '--clear-swipe-x': 0,
                        '--clear-x': '0px',
                        duration: .4,
                        delay: .35
                    }]
                })
                to(elem, {
                    '--clear-arrow-offset': '0px',
                    '--clear-arrow-offset-second': '8px',
                    '--clear-line-array': '28.5px',
                    '--clear-line-offset': '57px',
                    '--clear-long-offset': '17px',
                    duration: .2
                })
            })
        })

        function getPoint(point, i, a, smoothing) {
            let cp = (current, previous, next, reverse) => {
                let p = previous || current,
                    n = next || current,
                    o = {
                        length: Math.sqrt(Math.pow(n[0] - p[0], 2) + Math.pow(n[1] - p[1], 2)),
                        angle: Math.atan2(n[1] - p[1], n[0] - p[0])
                    },
                    angle = o.angle + (reverse ? Math.PI : 0),
                    length = o.length * smoothing;
                return [current[0] + Math.cos(angle) * length, current[1] + Math.sin(angle) * length];
            },
                cps = cp(a[i - 1], a[i - 2], point, false),
                cpe = cp(point, a[i - 1], a[i + 1], true);
            return `C ${cps[0]},${cps[1]} ${cpe[0]},${cpe[1]} ${point[0]},${point[1]}`;
        }

        function getPath(x, smoothing) {
            return [
                [2, 2],
                [12 - x, 12 + x],
                [22, 22]
            ].reduce((acc, point, i, a) => i === 0 ? `M ${point[0]},${point[1]}` : `${acc} ${getPoint(point, i, a, smoothing)}`, '')
        }

    </script>
</body>

</html>

HTML 结构

  • body：定义了页面的主体内容。
  • url-input：定义了一个输入框组件，包含图标、输入框和清除按钮。
  • icon：包含一个 SVG 图标和一个用于显示网站图标（favicon）的 div。
  • text：包含一个输入框（input），用户可以输入 URL。
  • clear：清除按钮，包含一个 SVG 图标，用于清除输入框内容。

CSS 样式

全局样式

  • html：设置全局盒模型为 border-box，并启用字体平滑。
  • body：设置页面的最小高度为视口高度，居中显示内容，背景颜色为#F6F8FF。

输入框组件样式

  • .url-input：定义了输入框组件的样式，使用 Flexbox 布局，背景颜色为#fff，带有圆角和阴影效果。
  • .url-input.clearing, .url-input:focus-within：当输入框聚焦或清除时，改变边框颜色和宽度。
  • .url-input .icon：定义了图标的样式，使用绝对定位，图标颜色为#275EFE。
  • .url-input .icon svg：定义了 SVG 图标的样式，包括填充颜色、边框宽度等。
  • .url-input .icon .favicon：定义了网站图标（favicon）的样式，使用 transform 动态缩放。
  • .url-input .text input：定义了输入框的样式，无边框、无背景，字体颜色为#646B8C。
  • .url-input .text input::-moz-placeholder, .url-input .text input:-ms-input-placeholder, .url-input .text input::placeholder：定义了输入框占位符的样式，颜色为#BBC1E1。
  • .url-input .clear：定义了清除按钮的样式，使用相对定位，背景颜色为透明。
  • .url-input .clear:before：定义了清除按钮的背景样式，使用绝对定位，背景颜色为#fff。
  • .url-input .clear svg：定义了清除按钮的 SVG 图标的样式，包括填充颜色、边框宽度等。
  • .url-input .clear svg path：定义了 SVG 路径的样式，包括动画效果。
  • .url-input .clear:hover：定义了清除按钮悬停时的背景颜色。

动画相关样式

  • .url-input：使用 CSS 变量动态控制动画效果，如边框颜色、清除按钮的缩放、透明度等。
  • .url-input.clearing：定义了清除按钮激活时的样式，包括背景颜色和路径颜色。

各位互联网搭子，要是这篇文章成功引起了你的注意，别犹豫，关注、点赞、评论、分享走一波，让我们把这份默契延续下去，一起在知识的海洋里乘风破浪！

相关推荐
烛阴15 分钟前
JavaScript 的 8 大“阴间陷阱”，你绝对踩过！99% 程序员崩溃瞬间
前端·javascript·面试
lh_12541 小时前
ECharts 地图开发入门
前端·javascript·echarts
周之鸥1 小时前
使用 Electron 打包可执行文件和资源：完整实战教程
前端·javascript·electron
我爱吃朱肉2 小时前
HTMLCSS模板实现水滴动画效果
前端·css·css3
前端snow2 小时前
前端全栈第二课：用typeorm向数据库添加数据---一对多关系
前端·javascript
全栈老李技术面试2 小时前
【高频考点精讲】async/await原理剖析：Generator和Promise的完美结合
前端·javascript·css·vue·html·react·面试题
kadog2 小时前
PubMed PDF下载 cloudpmc-viewer-pow逆向
前端·javascript·人工智能·爬虫·pdf
我爱吃朱肉3 小时前
HTMLcss实现网站抽奖
css·html
fxshy3 小时前
ai聊天流式响应，阻塞式和流式响应 nginx遇到的坑
运维·javascript·nginx
街尾杂货店&3 小时前
HTML word属性
前端·html
热门推荐
01KGG转MP3工具|非KGM文件|解密音频02从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑03我决定放弃搞 Java 了04Coze扣子平台完整体验和实践（附国内和国际版对比）05YOLOv8入门 | 重要性能衡量指标、训练结果评价及分析及影响mAP的因素【发论文关注的指标】06DeepSeek各版本说明与优缺点分析07YOLOv5改进 | 添加CA注意力机制 + 增加预测层 + 更换损失函数之GIoU08苍穹外卖面试总结09yolov8，yolo11，yolo12 服务器训练到部署全流程 笔记10yolov8实战第五天——yolov8+ffmpg实时视频流检测并进行实时推流——（推流，保姆教学）