div+css实现三维空间鼠标滚动效果代码

代码语言:html

所属分类:加载滚动

代码描述:div+css实现三维空间鼠标滚动效果代码

代码标签: div css 三维 空间 鼠标 滚动

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">



    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/normalize.css">

    <style>
        html {
          height: 100%;
          overflow: hidden;
        }
        
        body {
          height: 100%;
          overflow-x: hidden;
          overflow-y: scroll;
        }
        
        body {
          background: linear-gradient(to right, black 25%, #1d1515, black 75%);
          display: grid;
          justify-items: center;
          perspective: 600px;
          perspective-origin: center center;
        }
        
        .box {
          background: linear-gradient(to right, white 70%, #b9b0b0);
          width: 100vw;
          height: 300px;
          transform-style: preserve-3d;
          transform: translateX(-50%) rotateY(65deg);
          transform-origin: right center;
        }
        
        .box2 {
          background: linear-gra.........完整代码请登录后点击上方下载按钮下载查看

网友评论0