标签：javascript css blur html

我试图模糊在半透明容器标签后面滑动(带过渡)的文本.

我已经尝试使用backdrop-filter

和filter属性以及过滤器功能blur(),但我没有想出如何使其工作.

这就是我希望它看起来像：

我的代码(片段屏幕有点太小,无法看到整个结果)：

var page = 1;
var pages = 3;
function previous() {
  document.getElementById('label-previous').classList.add('clicked');
  document.getElementById('pages').classList.remove('page' + page);
  if ( page == pages ) {
    document.getElementById('label-next').classList.remove('hidden');
  }
  if ( page == 2 ) {
    document.getElementById('label-previous').classList.add('hidden');
  }
  page--;
  setTimeout(function() {
    document.getElementById('label-previous').classList.remove('clicked');
  }, 100);
}
function next() {
  document.getElementById('label-next').classList.add('clicked');
  document.getElementById('pages').classList.add('page' + (page + 1));
  if ( page == 1 ) {
    document.getElementById('label-previous').classList.remove('hidden');
  }
  if ( page + 1 == pages ) {
    document.getElementById('label-next').classList.add('hidden');
  }
  page++;
  setTimeout(function() {
    document.getElementById('label-next').classList.remove('clicked');
  }, 100);
}

body, html {
  height: 100%;
}
body {
  background-color: #222;
  overflow: hidden;
  margin: 0;
  user-select: none;
  white-space: nowrap;
}
div {
  height: 100%;
  margin-left: 0px;
  width: 100%;
  -webkit-transition: margin-left 1s linear;
}
div.page2 {
  margin-left: -100%;
}
div.page3 {
  margin-left: -200%;
}
input[type=checkbox] {
  display: none;
}
label {
  /*
  backdrop-filter: blur(3px);
  */
  background-color: rgba(255, 255, 255, 0.1);
  color: #ccc;
  /*
  filter: blur(3px);
  */
  font-family: consolas;
  font-size: 5em;
  height: 100%;
  line-height: 100vh;
  opacity: 1;
  pointer-events: initial;
  position: absolute;
  text-align: center;
  vertical-align: middle;
  width: 200px;
  -webkit-transition: background-color 0.1s linear, color 0.1s linear, opacity 0.8s 0.2s linear;
}
#label-previous {
  left: 0px;
}
#label-next {
  left: calc(100% - 200px);
}
label.clicked {
  background-color: rgba(255, 255, 255, 0.2);
  color: #fff;
}
label.hidden {
  opacity: 0;
  pointer-events: none;
}
span {
  color: #ccc;
  display: inline-block;
  font-family: consolas;
  font-size: 2em;
  margin-left: 400px;
  margin-top: 200px;
  width: calc(100% - 400px);
}

<div id="pages">
  <input id="previous" onchange="previous()" type="checkbox"><label class="hidden" for="previous" id="label-previous">&lt;</label>
  <span>Page 1</span><span>Page 2</span><span>Page 3</span>
  <input id="next" onchange="next()" type="checkbox"><label for="next" id="label-next">&gt;</label>
</div>

解决方法:

解决方法：

var blurred = document.getElementById('hide-blurred');
var normal = document.getElementById('hide-normal');
var position = document.getElementById('position');
function update() {
  let px = blurred.children[0].getBoundingClientRect().width + position.getBoundingClientRect().left - 200;
  blurred.style.width = (blurred.children[0].getBoundingClientRect().width - px) + 'px';
  normal.style.width = (px) + 'px';
  requestAnimationFrame(update);
}
update();
var condition = true;
position.classList.add('move');
setInterval(function() {
  if ( condition ) {
    position.classList.remove('move');
    condition = false;
  } else {
    position.classList.add('move');
    condition = true;
  }
}, 1000);

body, html {
  height: 100%;
}
body {
  background-color: #222;
  color: #ccc;
  font-family: consolas;
  font-size: 2em;
  margin: 0;
}
div#blur {
  background-color: rgba(255, 255, 255, 0.1);
  height: 100%;
  width: 200px;
}
span#position {
  position: absolute;
  top: 100px;
  -webkit-transition: left 1s linear;
}
.left {
  left: 200px;
}
.move {
  left: 130px;
}
span.hide {
  display: inline-block;
  overflow: hidden;
}
span#hide-blurred {
  filter: blur(3px);
}
span#hide-normal {
  direction: rtl;
}

<div id="blur"></div>
<span class="left" id="position">
  <span class="hide" id="hide-blurred">
    <span>Text</span>
  </span><span class="hide" id="hide-normal">
    <span>Text</span>
  </span>
</span>

标签：javascript,css,blur,html
来源： https://codeday.me/bug/20190705/1389355.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。