一款有趣的搜索输入界面动画：LOOK的O字母展开为输入框

animated search input，带字符串翻转垂落动画。

svg, gsap, search, input

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 2883
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

var intro = true

function expand() {
    if (intro) return
    TweenMax.to('#right', 1, {
        ease: Elastic.easeOut.config(1, 0.3),
        x: 0
    })
    TweenMax.to('#left', 1, {
        ease: Elastic.easeOut.config(1, 0.3),
        x: -100
    })
    TweenMax.to('rect', 1, {
        ease: Elastic.easeOut.config(1, 0.3),
        width: 217.2,
        x: 100
    })
    TweenMax.to('input', 1, {
        scaleX: 1
    })
    TweenMax.to('.fade', 1, {
        opacity: .3
    })
}

编译

CSS

HTML

<form action="#">
    <svg width="100%" height="100%" viewBox="0 0 936 364" version="1.1" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="https://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
        <title id="inputlabel">What are you looking for?</title>
        <g id="left">
            <path id="you" class="fade" d="M458.271,154.025c-1.03,11.679 -4.522,20.094 -10.476,25.246c-5.954,5.153 -14.14,7.729 -24.56,7.729c-4.236,0 -8.157,-0.544 -11.764,-1.632c-3.607,-1.087 -6.727,-2.805 -9.36,-5.152c-2.634,-2.347 -4.695,-5.295 -6.183,-8.845c-1.488,-3.549 -2.233,-7.786 -2.233,-12.709c0,-0.916 0.029,-2.004 0.086,-3.263c0.057,-1.26 0.143,-2.29 0.258,-3.092l7.557,-86.731l14.941,0l-7.728,88.105c-0.115,1.374 -0.201,2.605 -0.258,3.693c-0.057,1.088 -0.086,1.861 -0.086,2.319c0,5.152 1.432,8.902 4.294,11.249c2.862,2.347 6.698,3.521 11.507,3.521c5.152,0 9.417,-1.346 12.795,-4.036c3.378,-2.691 5.353,-7.071 5.925,-13.139l8.072,-91.712l14.942,0l-7.729,88.449Zm-86.731,-29.712c-0.916,10.534 -2.233,19.722 -3.95,27.565c-1.717,7.843 -4.122,14.369 -7.213,19.579c-3.092,5.21 -7.07,9.103 -11.937,11.679c-4.866,2.576 -10.963,3.864 -18.29,3.864c-5.954,0 -10.935,-0.945 -14.942,-2.834c-4.008,-1.889 -7.214,-4.751 -9.618,-8.587c-2.404,-3.836 -4.122,-8.645 -5.152,-14.427c-1.031,-5.782 -1.546,-12.508 -1.546,-20.18c0,-0.572 0.029,-1.631 0.086,-3.177c0.057,-1.546 0.143,-3.235 0.257,-5.066c0.115,-1.832 0.229,-3.55 0.344,-5.153c0.114,-1.603 0.172,-2.69 0.172,-3.263c0.916,-10.076 2.175,-18.863 3.778,-26.363c1.603,-7.499 3.95,-13.739 7.042,-18.72c3.091,-4.981 7.07,-8.702 11.936,-11.164c4.866,-2.461 10.963,-3.692 18.291,-3.692c11.678,0 19.865,3.492 24.559,10.476c4.695,6.985 7.042,17.576 7.042,31.773c0,2.748 -0.086,5.582 -0.258,8.502c-0.171,2.919 -0.372,5.982 -0.601,9.188Zm-117.817,61.485l-15.457,0l4.809,-55.817l-25.075,-64.405l16.144,0l18.205,49.978l27.136,-49.978l15.972,0l-36.925,64.405l-4.809,55.817Zm102.36,-60.626c0.344,-4.008 0.63,-7.7 0.859,-11.078c0.229,-3.377 0.343,-6.555 0.343,-9.532c0,-5.267 -0.343,-9.675 -1.03,-13.224c-0.687,-3.549 -1.746,-6.383 -3.177,-8.501c-1.432,-2.119 -3.235,-3.636 -5.41,-4.552c-2.176,-0.916 -4.809,-1.374 -7.901,-1.374c-3.778,0 -7.041,0.745 -9.789,2.233c-2.748,1.489 -5.095,4.065 -7.042,7.729c-1.946,3.663 -3.549,8.587 -4.809,14.77c-1.259,6.182 -2.347,14.026 -3.263,23.529c0,0.687 -0.057,2.003 -0.171,3.95c-0.115,1.946 -0.229,4.007 -0.344,6.183c-0.114,2.175 -0.229,4.179 -0.343,6.011c-0.115,1.832 -0.172,3.034 -0.172,3.606c0,10.763 1.374,18.377 4.122,22.843c2.748,4.465 7.156,6.698 13.224,6.698c3.893,0 7.213,-0.83 9.961,-2.491c2.748,-1.66 5.124,-4.436 7.128,-8.329c2.003,-3.893 3.606,-8.96 4.809,-15.2c1.202,-6.24 2.204,-13.997 3.005,-23.271Z"
            style="fill:#4ed3b2;fill-rule:nonzero;" />
            <path id="what" class="fade" d="M146.099,237.426l0,16.151l-36.103,7.957l36.103,8.67l0,15.438l-83.131,4.038l0,-9.144l76.599,-3.563l-41.566,-10.689l0,-9.738l41.566,-10.807l-76.599,-3.681l0,-8.67l83.131,4.038Zm0,-20.07l-83.131,0l0,-10.332l36.102,0l0,-24.465l-36.102,0l0,-10.332l83.131,0l0,10.332l-38.241,0l0,24.465l38.241,0l0,10.332Zm0,-101.064l-21.02,4.513l0,23.158l21.02,4.631l0,10.57l-83.131,-20.07l0,-13.658l83.131,-19.714l0,10.57Zm-75.293,16.151l45.366,9.62l0,-19.358l-45.366,9.738Zm1.187,-25.533l-9.025,0l0,-46.91l9.025,0l0,18.289l74.106,0l0,10.332l-74.106,0l0,18.289Z"
            style="fill-rule:nonzero;" />
            <g id="lo">
                <path id="L" class="fade" d="M168.299,287.84l0,-84l10.44,0l0,74.88l26.76,0l0,9.12l-37.2,0Z" style="fill-rule:nonzero;" />
                <path id="left_cap" d="M237.779,211.76c-2.72,0 -5,0.52 -6.84,1.56c-1.84,1.04 -3.32,2.84 -4.44,5.4c-1.12,2.56 -1.92,6 -2.4,10.32c-0.48,4.32 -0.72,9.8 -0.72,16.44c0,6.48 0.24,11.9 0.72,16.26c0.48,4.36 1.28,7.9 2.4,10.62c1.12,2.72 2.6,4.66 4.44,5.82c1.84,1.16 4.12,1.74 6.84,1.74l0,8.76c-4.96,0 -9.06,-0.9 -12.3,-2.7c-3.24,-1.8 -5.8,-4.52 -7.68,-8.16c-1.88,-3.64 -3.2,-8.2 -3.96,-13.68c-0.76,-5.48 -1.14,-11.9 -1.14,-19.26c0,-7.04 0.38,-13.18 1.14,-18.42c0.76,-5.24 2.08,-9.6 3.96,-13.08c1.88,-3.48 4.44,-6.08 7.68,-7.8c3.24,-1.72 7.34,-2.58 12.3,-2.58l0,8.76Z"
                style="fill-rule:nonzero;" />
            </g>
            <path id="are" class="fade" d="M192.887,187.968l-10.444,0l-2.371,-12.074l-12.37,0l-2.371,12.074l-10.592,0l11.852,-51.852l14.963,0l11.333,51.852Zm72.297,-43.852l-16.371,0l0,13.111l14.519,0l0,7.926l-14.519,0l0,14.815l16.371,0l0,8l-26.519,0l0,-51.852l26.519,0l0,8Zm-55.852,43.852l-10.149,0l0,-51.852c1.433,-0.099 2.939,-0.222 4.519,-0.37c1.333,-0.099 2.802,-0.186 4.407,-0.26c1.605,-0.074 3.173,-0.111 4.704,-0.111c3.21,0 5.877,0.334 8,1c2.124,0.667 3.827,1.692 5.111,3.074c1.284,1.383 2.186,3.099 2.704,5.148c0.519,2.05 0.778,4.457 0.778,7.223c0,4.098 -0.617,7.321 -1.852,9.666c-1.235,2.346 -2.963,4.087 -5.185,5.223l9.259,21.259l-11.481,0l-7.852,-19.556l-2.963,0l0,19.556Zm-35.482,-45.334l-4.444,24.519l9.037,0l-4.593,-24.519Zm45.259,9.704c0,-2.913 -0.345,-4.987 -1.037,-6.222c-0.691,-1.235 -2.098,-1.852 -4.222,-1.852c-1.185,0 -2.222,0.074 -3.111,0.222c-0.543,0.099 -1.012,0.173 -1.407,0.223l0,14.963l4.666,0c1.531,0 2.766,-0.618 3.704,-1.852c0.938,-1.235 1.407,-3.062 1.407,-5.482Z"
            style="fill-rule:nonzero;" />
        </g>
        <g id="right">
            <path id="right-cap" d="M555,211.76c2.72,0 5,0.52 6.84,1.56c1.84,1.04 3.32,2.84 4.44,5.4c1.12,2.56 1.92,6 2.4,10.32c0.48,4.32 0.72,9.8 0.72,16.44c0,6.48 -0.24,11.9 -0.72,16.26c-0.48,4.36 -1.28,7.9 -2.4,10.62c-1.12,2.72 -2.6,4.66 -4.44,5.82c-1.84,1.16 -4.12,1.74 -6.84,1.74l0,8.76c4.96,0 9.06,-0.9 12.3,-2.7c3.24,-1.8 5.8,-4.52 7.68,-8.16c1.88,-3.64 3.2,-8.2 3.96,-13.68c0.76,-5.48 1.14,-11.9 1.14,-19.26c0,-7.04 -0.38,-13.18 -1.14,-18.42c-0.76,-5.24 -2.08,-9.6 -3.96,-13.08c-1.88,-3.48 -4.44,-6.08 -7.68,-7.8c-3.24,-1.72 -7.34,-2.58 -12.3,-2.58l0,8.76Z"
            style="fill-rule:nonzero;" />
            <g id="ok" aria-role="button">
                <path d="M636.48,245.48c0,-6.64 -0.24,-12.12 -0.72,-16.44c-0.48,-4.32 -1.28,-7.76 -2.4,-10.32c-1.12,-2.56 -2.6,-4.36 -4.44,-5.4c-1.84,-1.04 -4.12,-1.56 -6.84,-1.56c-2.72,0 -5,0.52 -6.84,1.56c-1.84,1.04 -3.32,2.84 -4.44,5.4c-1.12,2.56 -1.92,6 -2.4,10.32c-0.48,4.32 -0.72,9.8 -0.72,16.44c0,6.48 0.24,11.9 0.72,16.26c0.48,4.36 1.28,7.9 2.4,10.62c1.12,2.72 2.6,4.66 4.44,5.82c1.84,1.16 4.12,1.74 6.84,1.74c2.72,0 5,-0.58 6.84,-1.74c1.84,-1.16 3.32,-3.1 4.44,-5.82c1.12,-2.72 1.92,-6.26 2.4,-10.62c0.48,-4.36 0.72,-9.78 0.72,-16.26Zm10.68,-0.6c0,7.36 -0.38,13.78 -1.14,19.26c-0.76,5.48 -2.08,10.04 -3.96,13.68c-1.88,3.64 -4.44,6.36 -7.68,8.16c-3.24,1.8 -7.34,2.7 -12.3,2.7c-4.96,0 -9.06,-0.9 -12.3,-2.7c-3.24,-1.8 -5.8,-4.52 -7.68,-8.16c-1.88,-3.64 -3.2,-8.2 -3.96,-13.68c-0.76,-5.48 -1.14,-11.9 -1.14,-19.26c0,-7.04 0.38,-13.18 1.14,-18.42c0.76,-5.24 2.08,-9.6 3.96,-13.08c1.88,-3.48 4.44,-6.08 7.68,-7.8c3.24,-1.72 7.34,-2.58 12.3,-2.58c4.96,0 9.06,0.86 12.3,2.58c3.24,1.72 5.8,4.32 7.68,7.8c1.88,3.48 3.2,7.84 3.96,13.08c0.76,5.24 1.14,11.38 1.14,18.42Z"
                style="fill-rule:nonzero;" />
                <path d="M698.64,287.84l-18.72,-38.52l-4.32,7.2l0,31.32l-10.44,0l0,-84l10.44,0l0,36.84l22.44,-36.84l11.16,0l-22.8,36.72l24,47.28l-11.76,0Z" style="fill-rule:nonzero;" />
            </g>
            <path id="for" class="fade" d="M732.288,288.529l-3.739,42.851c-0.121,1.702 -0.44,3.283 -0.957,4.741c-0.517,1.459 -1.261,2.736 -2.234,3.83c-0.972,1.094 -2.203,1.945 -3.692,2.553c-1.489,0.607 -3.328,0.911 -5.516,0.911c-1.459,0 -2.811,-0.045 -4.057,-0.136c-1.246,-0.092 -2.477,-0.198 -3.693,-0.319l0.547,-6.474c0.973,0.122 2.127,0.213 3.465,0.274c1.337,0.06 2.37,0.091 3.1,0.091c3.16,0 4.893,-1.672 5.196,-5.015l3.83,-43.307l-5.927,0l0.548,-6.656l5.926,0l0.638,-7.112c0.729,-7.841 4.923,-11.761 12.582,-11.761c1.945,0 3.632,0.122 5.06,0.365c1.429,0.243 2.568,0.456 3.419,0.638l-0.547,6.564c-0.912,-0.243 -1.945,-0.471 -3.1,-0.683c-1.155,-0.213 -2.553,-0.319 -4.194,-0.319c-1.641,0 -2.917,0.425 -3.829,1.276c-0.912,0.851 -1.428,1.945 -1.55,3.282l-0.729,7.75l11.032,0l-0.547,6.656l-11.032,0Zm51.33,10.12c0,10.09 -1.549,17.521 -4.649,22.292c-3.1,4.771 -8.084,7.157 -14.953,7.157c-2.431,0 -4.604,-0.289 -6.519,-0.866c-1.915,-0.577 -3.54,-1.58 -4.878,-3.009c-1.337,-1.428 -2.355,-3.328 -3.054,-5.698c-0.699,-2.371 -1.048,-5.349 -1.048,-8.935c0,-9.847 1.534,-17.034 4.604,-21.563c3.069,-4.528 8.069,-6.792 14.998,-6.792c10.333,0 15.499,5.805 15.499,17.414Zm18.782,28.811l-7.749,0l3.92,-45.587l6.382,0l0.183,5.653c1.215,-1.824 2.628,-3.328 4.239,-4.513c1.611,-1.186 3.51,-1.778 5.698,-1.778c1.095,0 1.991,0.061 2.69,0.182c0.699,0.122 1.383,0.243 2.052,0.365l-0.639,7.932c-0.79,-0.182 -1.686,-0.35 -2.689,-0.502c-1.003,-0.151 -1.93,-0.227 -2.781,-0.227c-1.52,0 -2.827,0.41 -3.921,1.23c-1.094,0.821 -2.005,1.869 -2.735,3.146c-0.729,1.276 -1.291,2.705 -1.687,4.285c-0.395,1.58 -0.653,3.13 -0.775,4.65l-2.188,25.164Zm-26.987,-22.338c0.182,-2.37 0.273,-4.467 0.273,-6.291c0,-4.133 -0.607,-7.035 -1.823,-8.707c-1.216,-1.671 -3.313,-2.507 -6.291,-2.507c-1.824,0 -3.374,0.304 -4.65,0.912c-1.276,0.608 -2.325,1.595 -3.146,2.963c-0.82,1.367 -1.473,3.176 -1.96,5.425c-0.486,2.249 -0.881,4.984 -1.185,8.205c-0.182,1.824 -0.274,3.495 -0.274,5.015c0,4.133 0.639,7.096 1.915,8.889c1.277,1.793 3.374,2.69 6.291,2.69c3.404,0 5.942,-1.292 7.613,-3.875c1.672,-2.583 2.751,-6.823 3.237,-12.719Z"
            style="fill:#4ed3b1;fill-rule:nonzero;" />
            <path id="question_mark" class="fade" d="M831.051,288.68l1.726,-21.577l21.578,0l-1.727,21.577l-21.577,0Zm57.612,-114.36c-0.288,3.452 -0.72,6.437 -1.295,8.955c-0.575,2.517 -1.51,5.07 -2.805,7.66c-1.295,2.589 -3.129,5.394 -5.502,8.415c-2.374,3.021 -5.574,6.617 -9.602,10.788l-13.162,13.81l-1.511,19.851l-18.341,0l2.158,-26.109l14.241,-15.319c3.884,-4.316 7.013,-7.804 9.386,-10.466c2.374,-2.661 4.208,-5.142 5.503,-7.444c1.294,-2.301 2.157,-4.711 2.589,-7.228c0.431,-2.517 0.647,-5.79 0.647,-9.818c0,-6.041 -1.51,-10.141 -4.531,-12.299c-3.021,-2.158 -7.049,-3.237 -12.083,-3.237c-4.46,0 -9.171,0.396 -14.133,1.187c-4.963,0.791 -9.099,1.547 -12.407,2.266l1.294,-15.967c1.439,-0.288 3.129,-0.648 5.071,-1.079c1.942,-0.432 4.028,-0.791 6.257,-1.079c2.23,-0.288 4.496,-0.54 6.797,-0.755c2.302,-0.216 4.388,-0.324 6.258,-0.324c5.466,0 10.393,0.468 14.78,1.403c4.387,0.935 8.128,2.589 11.22,4.962c3.093,2.374 5.467,5.467 7.121,9.279c1.654,3.812 2.481,8.667 2.481,14.564c0,0.863 -0.036,2.122 -0.108,3.776c-0.072,1.655 -0.179,3.057 -0.323,4.208Z"
            style="fill-rule:nonzero;" />
            <path id="ing" class="fade" d="M779.62,213.746c0,3.168 -0.986,5.464 -2.957,6.89c-1.971,1.425 -4.963,2.138 -8.975,2.138c-1.127,0 -2.165,-0.053 -3.115,-0.158c-0.211,0.422 -0.317,0.932 -0.317,1.531c0,0.211 0.035,0.493 0.106,0.845c1.126,-0.106 2.27,-0.185 3.431,-0.238c1.162,-0.053 2.095,-0.079 2.799,-0.079c1.584,0 2.991,0.141 4.223,0.422c1.232,0.282 2.279,0.748 3.142,1.399c0.862,0.651 1.513,1.523 1.953,2.614c0.44,1.091 0.66,2.446 0.66,4.065c0,1.76 -0.334,3.159 -1.003,4.197c-0.669,1.039 -1.566,1.839 -2.693,2.403c-1.126,0.563 -2.419,0.924 -3.88,1.082c-1.461,0.158 -3.001,0.238 -4.62,0.238c-0.669,0 -1.487,-0.027 -2.455,-0.08c-0.968,-0.052 -1.945,-0.123 -2.93,-0.211c-0.986,-0.088 -1.918,-0.185 -2.798,-0.29c-0.88,-0.106 -1.567,-0.211 -2.059,-0.317l0,-5.702c0.668,0.106 1.434,0.22 2.296,0.343c0.863,0.123 1.769,0.22 2.719,0.29c0.951,0.071 1.901,0.132 2.851,0.185c0.951,0.053 1.848,0.079 2.693,0.079c1.795,0 3.018,-0.193 3.669,-0.58c0.651,-0.387 0.977,-0.986 0.977,-1.795c0,-0.669 -0.202,-1.232 -0.607,-1.69c-0.405,-0.457 -1.276,-0.686 -2.614,-0.686c-0.492,0 -1.17,0.017 -2.032,0.053c-0.863,0.035 -1.76,0.079 -2.693,0.132c-0.933,0.052 -1.839,0.114 -2.719,0.184c-0.88,0.071 -1.584,0.141 -2.112,0.212c-0.528,-0.493 -1.073,-1.259 -1.636,-2.297c-0.564,-1.038 -0.845,-2.262 -0.845,-3.669c0,-1.831 0.457,-3.362 1.373,-4.594c-0.916,-0.774 -1.593,-1.751 -2.033,-2.93c-0.44,-1.179 -0.66,-2.649 -0.66,-4.408c0,-2.042 0.352,-3.67 1.056,-4.884c0.704,-1.214 1.637,-2.147 2.798,-2.798c1.162,-0.652 2.473,-1.074 3.933,-1.267c1.461,-0.194 2.948,-0.291 4.462,-0.291c1.76,0 3.291,0.211 4.593,0.634l8.659,-0.37l0,5.385l-3.379,-0.211c0.492,1.267 0.739,2.675 0.739,4.224Zm-56.334,17.212l-7.022,0l0,-26.399l7.022,0l0,26.399Zm13.885,0l-7.022,0l0,-26.399l5.702,0l0.476,2.059c0.809,-0.774 1.742,-1.39 2.798,-1.848c1.056,-0.457 2.235,-0.686 3.537,-0.686c1.831,0 3.3,0.211 4.409,0.634c1.108,0.422 1.971,1.073 2.587,1.953c0.616,0.88 1.029,1.971 1.241,3.274c0.211,1.302 0.316,2.851 0.316,4.646l0,16.367l-7.022,0l0,-16.526c0,-1.76 -0.255,-2.912 -0.765,-3.458c-0.511,-0.545 -1.241,-0.818 -2.191,-0.818c-1.338,0 -2.332,0.387 -2.983,1.161c-0.651,0.775 -1.012,1.619 -1.083,2.534l0,17.107Zm35.427,-17.634c0,-1.338 -0.299,-2.262 -0.898,-2.772c-0.598,-0.511 -1.672,-0.766 -3.22,-0.766c-1.901,0 -3.159,0.299 -3.775,0.898c-0.616,0.598 -0.924,1.619 -0.924,3.062c0,2.288 1.302,3.432 3.907,3.432c0.774,0 1.469,-0.044 2.085,-0.132c0.616,-0.088 1.135,-0.273 1.558,-0.555c0.422,-0.281 0.739,-0.677 0.95,-1.188c0.211,-0.51 0.317,-1.17 0.317,-1.979Zm-49.048,-13.252l-7.55,0l0,-6.072l7.55,0l0,6.072Z"
            style="fill-rule:nonzero;" />
        </g>
        <rect id="bottom-bar" x="237.779" y="279.92" width="317.221" height="8.76" />
        <rect id="top-bar" x="237.779" y="203" width="317.221" height="8.76" />

</svg>
    <input type="text" aria-labelledby="inputlabel">
</form>

animated search input，带字符串翻转垂落动画。

svg, gsap, search, input

编辑器支持Emmet

快捷键

animated search input，带字符串翻转垂落动画。

svg, gsap, search, input

HTML5 SVG一款有趣的电商快递界面动画设计

HTML5一款带马赛克粒子化特效的搜索框界面控件

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：