Question

刚刚从codepen获得了这个搜索按钮，尝试将它放在我的网站上并且热潮，没有用！我已经乱七八糟了，我无法看到问题所在，

动画很可爱！搜索栏会加载，但在键入时，您只能看到一半文本，请参见下面的图片

继承我的代码

$brand: #b3c33a;
$speed: 0.5s;

body {
    color: $brand;
    background-color: #333;
}

.search {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -300px;

    width: 600px;
}

svg {
    position: absolute;
    transform: translateX(-246px);
    width: 600px;
    height: auto;
    stroke-width: 8px;
    stroke: $brand;
    stroke-width: 1px;
    stroke-dashoffset: 0;
    stroke-dasharray: 64.6 206.305;
    transition: all 0.5s ease-in-out;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.input-search {
    position: absolute;
    width: calc(100% - 148px);
    height: 64px;
    top: 0;
    right: 20px;
    bottom: 0;
    left: 0;
    border: none;
    background-color: transparent;
    outline: none;
    padding: 20px;
    font-size: 50px;
}

.search-label {
    position: absolute;
    display: block;
    width: 108px;
    height: 108px;
    top: 0;
    left: 50%;
    margin-left: -54px;
    z-index: 100;
    transition: $speed ease-in-out;
}

.isActive {
    .search-label {
        transform: translateX(246px);
    }
    svg {
        stroke-dashoffset: -65;
        stroke-dasharray: 141.305 65;
        transform: translateX(0);
    }
    &.full svg {
        stroke-dashoffset: -65;
        stroke-dasharray: 141.305 65;
        transform: translateX(0);
    }
}

.full {
    .search-label {
        transform: translateX(246px);
    }
    svg {
        stroke-dashoffset: 0;
        stroke-dasharray: 64.6 206.305;
        transform: translateX(0);
    }
}

<div class="col-md-10">

  <div class="search">
    <svg version="1.1" viewBox="0 0 142.358 24.582">
    <path id="search-path" fill="none" d="M131.597,14.529c-1.487,1.487-3.542,2.407-5.811,2.407
        c-4.539,0-8.218-3.679-8.218-8.218s3.679-8.218,8.218-8.218c4.539,0,8.218,3.679,8.218,8.218
        C134.004,10.987,133.084,13.042,131.597,14.529c0,0,9.554,9.554,9.554,9.554H0"/>
    </svg>
    <label for="search" class="search-label"></label>
    <input type="search" id="search" autocomplete="off" class="input-search"/>
</div>
<script type="text/javascript">
/*
Inspired by Dribble "Search..."
  By: Anish Chandran
  Link: http://drbl.in/nRxe
*/

var searchField = $('.search');
var searchInput = $("input[type='search']");

var checkSearch = function(){
  var contents = searchInput.val();
  if(contents.length !== 0){
     searchField.addClass('full');
  } else {
     searchField.removeClass('full');
  }
};

$("input[type='search']").focus(function(){
  searchField.addClass('isActive');
}).blur(function(){
  searchField.removeClass('isActive');
  checkSearch();
});
</script>

</div>

仅CSS（不是scss）

body {
  color: #b3c33a;
  background-color: #333;
}

.search {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -300px;
  margin-top: -54px;
  width: 600px;
}

svg {
  position: absolute;
  transform: translateX(-246px);
  width: 600px;
  height: auto;
  stroke-width: 8px;
  stroke: #b3c33a;
  stroke-width: 1px;
  stroke-dashoffset: 0;
  stroke-dasharray: 64.6 206.305;
  transition: all 0.5s ease-in-out;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.input-search {
  position: absolute;
  width: calc(100% - 148px);
  height: 64px;
  top: 0;
  right: 20px;
  bottom: 0;
  left: 0;
  border: none;
  background-color: transparent;
  outline: none;
  padding: 20px;
  font-size: 50px;
}

.search-label {
  position: absolute;
  display: block;
  width: 108px;
  height: 108px;
  top: 0;
  left: 50%;
  margin-left: -54px;
  z-index: 100;
  transition: 0.5s ease-in-out;
}

.isActive .search-label {
  transform: translateX(246px);
}
.isActive svg {
  stroke-dashoffset: -65;
  stroke-dasharray: 141.305 65;
  transform: translateX(0);
}
.isActive.full svg {
  stroke-dashoffset: -65;
  stroke-dasharray: 141.305 65;
  transform: translateX(0);
}

.full .search-label {
  transform: translateX(246px);
}
.full svg {
  stroke-dashoffset: 0;
  stroke-dasharray: 64.6 206.305;
  transform: translateX(0);
}

Answer 1

这不是纯CSS，因此无法在浏览器中正确输出。他们使用SASS（http://sass-lang.com/），因此如果你想使用它，你需要首先将SASS编译为CSS，或者寻找纯CSS输出（如果你从Codepen复制它应该可用）

css只有半个文本框显示？

1 个答案: