atroposjs实现多层三维悬浮立体视觉差异跟随效果代码

代码语言:html

所属分类:视觉差异

代码描述:atroposjs实现多层三维悬浮立体视觉差异跟随效果代码

代码标签: atroposjs 多层 三维 悬浮 立体 视觉 差异 跟随

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">


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

    <style>
    body{
        padding: 200px;
    }
        .atropos{
          width: 320px;
          height: 320px;
          position: relative;
          
        }
        .atropos-inner img{
            position: absolute;
            top:0;
        }
    </style>




</head>

<body>
    <div class="atropos">
        <div class="atropos-scale">
            <div class="atropos-rotate">
                <div class="atropos-inner">
                    <!--
        Element with negative offset will move in reverse direction,
        making it appear behind the scene
        -->
                    <img src="//repo.bfw.wiki/bfwrepo/image/621586e3848e1.png" data-atropos-offset="-5" width="300" />
                    <!--
        Element with no offset will not move
        -->
                   .........完整代码请登录后点击上方下载按钮下载查看

网友评论0