如何用线条绘制立体图并进行动画处理？

Question

Monkey Mutant

Asked:2020-04-06 03:52:25 +0000 UTC2020-04-06 03:52:25 +0000 UTC 2020-04-06 03:52:25 +0000 UTC

有没有可能用纯css来实现如此平滑的图像过渡效果？

772

看到一个网站，效果很有意思：https ://travelshift.com/

在右上角有一个带箭头的圆形按钮，如果你点击它，想要的效果开始了，我所有的尝试都失败了，没有代码。

也许有人不会看到它，这个皮肤链接到 Dropbox 中的视频：视频

单击鼠标按钮后效果本身开始..

是否有可能在 css 上至少获得部分副本？

不需要 javascript 着色器答案

2 个回答

Voted

Sevastopol' · Answer 1 · 2020-04-06T04:10:20Z

得到如下效果，基于作者的工件实现。这可能不是问题所要求的。我无法使用链接（制裁）打开网站，所以我被视频引导了。为了彻底准确地解决问题，我准备朝着正确的方向进一步前进。当然，同事们，加入:)

jQuery(document).ready(function($) {
  $('.circle').hover(function() {
    $('.circle__inner').addClass('circle__inner__on');
    $('.before').addClass('before__on');
    $('.after').addClass('after__on');
  }, function() {
    $('.circle__inner').addClass('circle__inner__off');
    $('.before').addClass('before__off');
    $('.after').addClass('after__off');
  });
  $('button').click(function() {
    $('.circle__inner').removeClass('circle__inner__off').removeClass('circle__inner__on');
    $('.before').removeClass('before__off').removeClass('before__on');
    $('.after').removeClass('after__off').removeClass('after__on');
  });
});

* {
  margin: 0;
  padding: 0;
}


/*Background*/

.item {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100vh;
  opacity: 0.8;
}

.before {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('https://www.nastol.com.ua/pic/201704/1920x1200/nastol.com.ua-216880.jpg') center center no-repeat;
  background-size: cover;
  transition: 0.34s linear;
}

.after {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('https://tapety.tja.pl/obrazki/tja_normalne/208831.jpg') center center no-repeat;
  background-size: cover;
  transition: 0.34s linear;
  transform: translate(-100%) scale(5) rotate(45deg);
  opacity: 0;
  filter: blur(10px);
}

.before__on {
  transform: translate(-100%) scale(5) rotate(-45deg);
  opacity: 0;
  filter: blur(10px);
  animation: animate__before__on 8s ease;
}

.after__on {
  transform: translate(0) scale(1) rotate(0deg);
  opacity: 1;
  filter: blur(0px);
  animation: animate__after__on 8s ease;
}

.before__off {
  transform: translate(0) scale(1) rotate(0deg);
  opacity: 1;
  filter: blur(0px);
  animation: animate__before__off 8s ease;
}

.after__off {
  transform: translate(-100%) scale(5) rotate(-45deg);
  opacity: 0;
  filter: blur(10px);
  animation: animate__after__off 8s ease;
}

@keyframes animate__before__on {
  0% {
    transform: translate(0) scale(1) rotate(0deg);
    opacity: 1;
    filter: blur(0px);
  }
  100% {
    transform: translate(-100%) scale(5) rotate(-45deg);
    opacity: 0;
    filter: blur(10px);
  }
}

@keyframes animate__after__on {
  0% {
    transform: translate(0) scale(5) rotate(45deg);
    opacity: 0;
    filter: blur(10px);
  }
  100% {
    transform: translate(0) scale(1) rotate(0deg);
    opacity: 1;
    filter: blur(0px);
  }
}

@keyframes animate__before__off {
  0% {
    transform: translate(0) scale(5) rotate(45deg);
    opacity: 0;
    filter: blur(10px);
  }
  100% {
    transform: translate(0) scale(1) rotate(0deg);
    opacity: 1;
    filter: blur(0px);
  }
}

@keyframes animate__after__off {
  0% {
    transform: translate(0) scale(1) rotate(0deg);
    opacity: 1;
    filter: blur(0px);
  }
  100% {
    transform: translate(-100%) scale(5) rotate(-45deg);
    opacity: 0;
    filter: blur(10px);
  }
}


/*Progress*/

.circle-size,
.circle,
.circle__mask,
.circle__inner {
  width: 3em;
  height: 3em;
  border-radius: 50%;
}

.clip-show-left,
.circle__mask.on-left,
.on-right .circle__inner {
  clip: rect(0, 1.5em, 3em, 0);
}

.clip-show-right,
.circle__mask.on-right,
.on-left .circle__inner {
  clip: rect(0, 3em, 3em, 1.5em);
}

.circle {
  position: absolute;
  top: 20px;
  left: 20px;
  font-size: 30px;
  border: 2px solid aliceblue;
}

.circle__mask {
  position: absolute;
  left: 0;
  top: 0;
}

.circle__holder {
  position: absolute;
  width: 80%;
  height: 80%;
  left: 10%;
  top: 10%;
  border-radius: 50%;
}

.circle__inner {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: lightsteelblue;
}

.on-left .circle__inner__on {
  animation: circle-left__on 16s linear;
}

.on-right .circle__inner__on {
  animation: circle-right__on 16s linear;
}

.on-left .circle__inner__off {
  animation: circle-left__off 16s linear;
}

.on-right .circle__inner__off {
  animation: circle-right__off 16s linear;
}

@keyframes circle-left__on {
  0% {
    transform: rotate(0);
  }
  25% {
    transform: rotate(0);
  }
  50% {
    transform: rotate(180deg);
  }
  75% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(180deg);
  }
}

@keyframes circle-right__on {
  0% {
    transform: rotate(0);
  }
  25% {
    transform: rotate(180deg);
  }
  50% {
    transform: rotate(180deg);
  }
  75% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(180deg);
  }
}

@keyframes circle-left__off {
  0% {
    transform: rotate(180deg);
  }
  25% {
    transform: rotate(180deg);
  }
  50% {
    transform: rotate(360deg);
  }
  75% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes circle-right__off {
  0% {
    transform: rotate(180deg);
  }
  25% {
    transform: rotate(360deg);
  }
  50% {
    transform: rotate(360deg);
  }
  75% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.circle>span {
  position: absolute;
  top: 45%;
  left: 0;
  right: 0;
  bottom: 0;
  transform: translateY(-25%);
  text-align: center;
  font-size: 16px;
  color: aliceblue;
  text-shadow: 2px 1px 4px rgba(0, 0, 0, 0.5);
}

button {
  outline: none;
  border: none;
  display: block;
  position: absolute;
  top: 120px;
  left: 33px;
  padding: 3px 6px;
  border-radius: 2px;
  background-color: aliceblue;
  color: #111;
}

button:active {
  background-color: #111;
  color: aliceblue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="item">
  <div class="after"></div>
  <div class="before"></div>
</div>
<div class="circle">
  <div class="circle__mask on-left">
    <div class="circle__inner"></div>
  </div>
  <div class="circle__mask on-right">
    <div class="circle__inner"></div>
  </div>
  <div class="circle__holder"></div>
  <span>Наведи <br> и подержи</span>
</div>
<button>Сбросить</button>

Sevastopol' · Answer 2 · 2020-04-09T01:18:55Z

另一种选择。动画脚本尽可能地使它更接近问题中的原作。但这只是一个脚本，在我看来，这里仍然缺少一些东西。当然，在 WebGL 的帮助下，这种效果很可能无法在 CSS 中复制。但是，仍有一些事情需要考虑和工作:))

jQuery(document).ready(function($) {
  $('.circle').hover(function() {
    $('.circle__inner').addClass('circle__inner__on');
    $('.before').addClass('before__on');
    $('.after').addClass('after__on');
  }, function() {
    $('.circle__inner').addClass('circle__inner__off');
    $('.before').addClass('before__off');
    $('.after').addClass('after__off');
  });
  $('button').click(function() {
    $('.circle__inner').removeClass('circle__inner__off').removeClass('circle__inner__on');
    $('.before').removeClass('before__off').removeClass('before__on');
    $('.after').removeClass('after__off').removeClass('after__on');
  });
});

* {
  margin: 0;
  padding: 0;
}


/*Background*/

.item {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100vh;
  opacity: 0.8;
}

.before {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('https://www.nastol.com.ua/pic/201704/1920x1200/nastol.com.ua-216880.jpg') center center no-repeat;
  background-size: cover;
  transition: 0.34s linear;
}

.after {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('https://tapety.tja.pl/obrazki/tja_normalne/208831.jpg') center center no-repeat;
  background-size: cover;
  transition: 0.34s linear;
  transform: scale(5) rotate(90deg);
  opacity: 0;
  filter: blur(30px);
  z-index: -1;
}

.before__on {
  transform: scale(0.5) rotate(-90deg);
  opacity: 0;
  filter: blur(30px);
  z-index: -1;
  animation: animate__before__on 2s ease;
}

.after__on {
  transform: scale(1) rotate(0deg);
  opacity: 1;
  filter: blur(0);
  z-index: 1;
  animation: animate__after__on 2s ease;
}

.before__off {
  transform: scale(1) rotate(0deg);
  opacity: 1;
  filter: blur(0);
  z-index: 1;
  animation: animate__before__off 2s ease;
}

.after__off {
  transform: scale(0.5) rotate(-90deg);
  opacity: 0;
  filter: blur(30px);
  z-index: -1;
  animation: animate__after__off 2s ease;
}

@keyframes animate__before__on {
  0% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
    filter: blur(0);
    z-index: 1;
  }
  20% {
    transform: scale(1.2) rotate(0deg);
    opacity: 1;
    filter: blur(0);
    z-index: 1;
  }
  100% {
    transform: scale(0.1) rotate(-90deg);
    opacity: 0;
    filter: blur(30px);
    z-index: -1;
  }
}

@keyframes animate__after__on {
  0% {
    transform: scale(5) rotate(90deg);
    opacity: 0;
    filter: blur(30px);
    z-index: -1;
  }
  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
    filter: blur(0);
    z-index: 1;
  }
}

@keyframes animate__before__off {
  0% {
    transform: scale(5) rotate(90deg);
    opacity: 0;
    filter: blur(30px);
    z-index: -1;
  }
  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
    filter: blur(0);
    z-index: 1;
  }
}

@keyframes animate__after__off {
  0% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
    filter: blur(0);
    z-index: 1;
  }
  20% {
    transform: scale(1.2) rotate(0deg);
    opacity: 1;
    filter: blur(0);
    z-index: 1;
  }
  100% {
    transform: scale(0.1) rotate(-90deg);
    opacity: 0;
    filter: blur(30px);
    z-index: -1;
  }
}


/*Progress*/

.circle-size,
.circle,
.circle__mask,
.circle__inner {
  width: 3em;
  height: 3em;
  border-radius: 50%;
}

.clip-show-left,
.circle__mask.on-left,
.on-right .circle__inner {
  clip: rect(0, 1.5em, 3em, 0);
}

.clip-show-right,
.circle__mask.on-right,
.on-left .circle__inner {
  clip: rect(0, 3em, 3em, 1.5em);
}

.circle {
  position: absolute;
  top: 20px;
  left: 20px;
  font-size: 30px;
  border: 2px solid aliceblue;
}

.circle__mask {
  position: absolute;
  left: 0;
  top: 0;
}

.circle__holder {
  position: absolute;
  width: 80%;
  height: 80%;
  left: 10%;
  top: 10%;
  border-radius: 50%;
}

.circle__inner {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: lightsteelblue;
}

.on-left .circle__inner__on {
  animation: circle-left__on 4s linear;
}

.on-right .circle__inner__on {
  animation: circle-right__on 4s linear;
}

.on-left .circle__inner__off {
  animation: circle-left__off 4s linear;
}

.on-right .circle__inner__off {
  animation: circle-right__off 4s linear;
}

@keyframes circle-left__on {
  0% {
    transform: rotate(0);
  }
  25% {
    transform: rotate(0);
  }
  50% {
    transform: rotate(180deg);
  }
  75% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(180deg);
  }
}

@keyframes circle-right__on {
  0% {
    transform: rotate(0);
  }
  25% {
    transform: rotate(180deg);
  }
  50% {
    transform: rotate(180deg);
  }
  75% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(180deg);
  }
}

@keyframes circle-left__off {
  0% {
    transform: rotate(180deg);
  }
  25% {
    transform: rotate(180deg);
  }
  50% {
    transform: rotate(360deg);
  }
  75% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes circle-right__off {
  0% {
    transform: rotate(180deg);
  }
  25% {
    transform: rotate(360deg);
  }
  50% {
    transform: rotate(360deg);
  }
  75% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.circle>span {
  position: absolute;
  top: 45%;
  left: 0;
  right: 0;
  bottom: 0;
  transform: translateY(-25%);
  text-align: center;
  font-size: 16px;
  color: aliceblue;
  text-shadow: 2px 1px 4px rgba(0, 0, 0, 0.5);
}

button {
  outline: none;
  border: none;
  display: block;
  position: absolute;
  top: 120px;
  left: 33px;
  padding: 3px 6px;
  border-radius: 2px;
  background-color: aliceblue;
  color: #111;
}

button:active {
  background-color: #111;
  color: aliceblue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="item">
  <div class="after"></div>
  <div class="before"></div>
</div>
<div class="circle">
  <div class="circle__mask on-left">
    <div class="circle__inner"></div>
  </div>
  <div class="circle__mask on-right">
    <div class="circle__inner"></div>
  </div>
  <div class="circle__holder"></div>
  <span>Наведи <br> и подержи</span>
</div>
<button>Сбросить</button>

有没有可能用纯css来实现如此平滑的图像过渡效果？

如何从列表中打印最大元素（str 类型）的长度？

如何在 PyQT5 中清除 QFrame 的内容

如何将具有特定字符的字符串拆分为两个不同的列表？

导航栏活动元素

是否可以将文本放入数组中？[关闭]

如何一次用多个分隔符拆分字符串？

如何通过 ClassPath 创建 InputStream？

在一个查询中连接多个表

对列表列表中的所有值求和

如何对齐 string.Format 中的列？

有没有可能用纯css来实现如此平滑的图像过渡效果？

2 个回答

相关问题