scene+moveable+overlap-area+selecto实现框选相交面积实时计算效果代码-html代码-BFW代码库

scene+moveable+overlap-area+selecto实现框选相交面积实时计算效果代码

代码语言：html

所属分类：拖放

代码描述：scene+moveable+overlap-area+selecto实现框选相交面积实时计算效果代码

代码标签： scene moveable overlap-area selecto 框选相交面积实时计算

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

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
<style>
    html,
    body {
        position: relative;
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        font-family: sans-serif;
        background: #f5f5f5;
        color: #333;
    }

    a {
        text-decoration: none;
        color: #333;
    }

    .page {
        position: relative;
        width: 100%;
        height: 100%;
        min-height: 500px;
        overflow: hidden;
    }

    .container {
        position: relative;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        display: inline-block;
        padding: 20px;
        box-sizing: border-box;
    }

    .container,
    .header,
    .target,
    svg {
        transform-style: preserve-3d;
    }

    .header {
        padding: 20px;
    }

    .target {
        position: relative;
        width: 100px;
        height: 100px;
        color: #fff;
        margin: 10px 20px;
        display: inline-block;
    }

    .rect {
        position: absolute;
        width: 100%;
        height: 100%;
    }

    .text {
        position: absolute;
        width: 100%;
        height: 100%;
        line-height: 100px;
        text-align: center;
        transform: translateZ(1px);
    }

    .buttons {
        padding: 5px;
    }

    .button {
        display: inline-block;
        padding: 12px 20px;
        border: 1px solid #333;
        color: #333;
        font-weight: bold;
        text-decoration: none;
        font-size: 14px;
        letter-spacing: 1px;
        margin: 2px;
        transition: all ease 0.2s;
    }

    .button:hover {
        background: #333;
        color: #fff;
    }

    svg {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        pointer-events: none;
        opacity: 0.9;
        transform: translateZ(0px);
    }

    svg path {
        fill: #333333aa;
        stroke: red;
        stroke-width: 2;
    }

    .selection-hint {
        position: absolute;
        border: 1px solid #4af;
        background: rgba(68, 170, 255, 0.5);
        width: 50px;
        height: 50px;
        top: 0;
        left: 0;
        z-index: 1;
    }
</style>
</head>

<body>
    <div class="page">
        <div class="container">
            <div class="header">
                <div class="selection-hint"></div>
                <div class="target">
                    <div class="rect" style="background: #e55;"></div>
                    <div class="text">0</div>
                </div>
                <div class="target">
                    <div class="rect" style="transform: rotate(45deg); background: #77dda5;"></div>
                    <div class="text">0</div>
                </div>
                <div class="target">
                    <div class="rect" style="transform: skew(-30deg); background: #7799ee;"></div>
                    <div class="text">0</div>
                </div>
                <svg>
                    <path d=""></path>
                </svg>
         .........完整代码请登录后点击上方下载按钮下载查看