tilt.jquery.min.js鼠标悬停跟随立体效果插件-BFW插件库

tilt.jquery.min.js鼠标悬停跟随立体效果插件

第一步引入bfwone

第二步插件代码执行

示例如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script id="bfwone" data="dep=jquery.17&err=0" type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        bready(function() {
            use(["tilt.jquery.min"], function() {
                var tilt = $('.js-tilt').tilt();
            });
        });
    </script>
    <style>
        .c-example__tilt {
            margin: 30px;
            float: left;
            width: 100px;
            height: 150px;
            display: block;
            background-color: #9e21ff;
            background-image: -webkit-linear-gradient(315deg, #ed21ff 0%, #9e21ff 100%, #9e21ff 100%);
            background-image: linear-gradient(135deg, #ed21ff 0%, #9e21ff 100%, #9e21ff 100%);
            box-shadow: 0 3px 47px rgba(0, 0, 0, 0.2);
            -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
            -webkit-transform: perspective(300px);
            transform: perspective(300px);
        }

        .c-example__tilt-inner {
            -webkit-transform: translateZ(50px) translateY(-50%) translateX(-50%);
            transform: translateZ(50px) translateY(-50%) translateX(-50%);
            position: absolute;
            top: 50%;
            left: 50%;
            width: 50px;
            height: 50px;
            background-color: white;
            box-shadow: 0 0 50px 0 rgba(51, 51, 51, 0.3);
        }

        .c-example:nth-child(2) .c-example__tilt {
            background-image: -webkit-linear-gradient(315deg, #ff008a 0%, #101c25 100%);
            background-image: linear-gradient(135deg, #ff008a 0%, #101c25 100%);
        }

        .c-example:nth-child(3) .c-example__tilt {
            background-image: -webkit-linear-gradient(315deg, #ff00ba 0%, #fae713 100%);
            background-image: linear-gradient(135deg, #ff00ba 0%, #fae713 100%);
        }

        .c-example:nth-child(4) .c-example__tilt {
            background-image: -webkit-linear-gradient(315deg, #b118ac 0%, #26c7da 100%);
            background-image: linear-gradient(135deg, #b118ac 0%, #26c7da 100%);
        }

        .c-example__output {
            max-height: 200px;
            overflow-y: auto;
            margin: 0;
            padding: 1em 2em;
            background-color: #f8f8f8;
            list-style: none;
        }
        .c-example__output:empty {
            display: none;
        }
    </style>
</head>
<body>
    <div class="[ c-example__tilt ] js-tilt" data-tilt-speed="1000" data-tilt-max="20" data-tilt-scale="1.2" data-tilt-perspective="250"></div>

    <div class="[ c-example__tilt ] js-tilt" data-tilt-perspective="300" data-tilt-speed="400" data-tilt-max="25">
        <div class="c-example__tilt-inner"></div>
    </div>
    <div class="[ c-example__tilt ] js-tilt" data-tilt-speed="250" data-tilt-max="50" data-tilt-axis="y" data-tilt-perspective="250"></div>
    <div class="[ c-example__tilt ] js-tilt" data-tilt-speed="250" data-tilt-reset="false" data-tilt-max="50" data-tilt-perspective="250"></div>
    <div class="[ c-example__tilt ] js-tilt-output" data-tilt-speed="250" data-tilt-max="50" data-tilt-perspective="250"></div>
</body>
</html>

官网地址https://gijsroge.github.io/tilt.js/