css实现三维3d立方体切开动画效果代码

代码语言:html

所属分类:动画

代码描述:css实现三维3d立方体切开动画效果代码

代码标签: css 三维 3d 切片 立方体

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">



    <style>
        .loader {
          --s: 100px; /* adjust this to control the size */
          width: calc(1.353*var(--s)); /* 0.353 = sin(45deg)/2 */
          aspect-ratio: 1;
          display: flex;
        }
        .loader:before,
        .loader:after {
          content: "";
          flex: 1;
          clip-path: polygon(calc(0.353*var(--s)) 0,100% 0,100% calc(100% - 0.353*var(--s)),calc(100% - 0.353*var(--s)) 100%,0 100%,0 calc(0.353*var(--s)));
          background:
            conic-gradient(from -90deg at calc(100% - 0.353*var(--s)) calc(0.353*var(--s)),
             #fff 135deg,#666 0 270deg,#aaa 0);
 .........完整代码请登录后点击上方下载按钮下载查看

网友评论0