如何在css js中用云过渡场景

KenDzz 发表于 Dev

肯兹

如何像下面的视频那样用云过渡场景。在语言 CSS JS

https://www.mobox.io/

https://i.imgur.com/4ja61Q4.mp4

查拉卡

通过使用更改的 css 属性和 css 过渡效果，您可以重新创建此效果。

我在固定位置的情况下进行了此操作，但是您可以将其与 position:absolute 或您想要更改的任何其他可用于 css 转换的样式一起使用。

您可以在单击按钮时添加一个触发器，该按钮添加了一个触发转换的类，或者我在下面的代码段中显示的悬停效果。

:root {
   --height: 100px;
   --width: 200px;
}

.cloud {
   transition-timing-function: ease-in;
   transition: all 2s;
   background: white;
   opacity: 0.3;
   border-radius:14px;
   width: var(--width);
   height: var(--height);
   position: fixed;
   top: calc(50vh - (var(--width) / 2) );
   left: calc(50vw - (var(--height) / 2) );
}
.wrap {
background: skyblue;
width: 100vw;
height: 100vh;
padding: 0px;
top:0px;
left:0px;
}

.wrap:hover #cloud1 {   
    top: calc(0px - (var(--width) / 2));
}
.wrap:hover #cloud2 {   
    left: calc(0px - (var(--height) / 2));
}
.wrap:hover #cloud3 {   
    left: calc(0px - (var(--width) / 2));
    top: calc(0px - (var(--height) / 2));
}
.wrap:hover #cloud4 {   
    left: calc(100vw - (var(--width) / 2));
    top: calc(100vh - (var(--width) / 2));
}
.wrap:hover #cloud5 {   
    top: calc(100vh - (var(--width) / 2));
}
.wrap:hover #cloud6 {   
    left: calc(100vw - (var(--width) / 2));
}

<div class="wrap">
<div class="cloud" id="cloud3">

</div>
<div class="cloud" id="cloud2">

</div>
<div class="cloud" id="cloud1">

</div>
<div class="cloud" id="cloud4">

</div>
<div class="cloud" id="cloud5">

</div>
<div class="cloud" id="cloud6">

</div>
</div>