jquery-ui实现一个可拖动放大镜效果代码-html代码-BFW代码库

jquery-ui实现一个可拖动放大镜效果代码

代码语言：html

所属分类：拖放

代码描述：jquery-ui实现一个可拖动放大镜效果代码

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

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

<head>
    <meta charset="UTF-8">


    <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Montserrat:400,700'>

    <style>
        *,
        *::after,
        *::before {
            box-sizing: border-box;
        }

        html {
            overflow: hidden;
        }

        body {
            margin: 0;
            width: 100vw;
            height: 100vh;
            background: linear-gradient(45deg, rgba(255, 0, 0, 1) 0%, rgba(255, 255, 0, 1) 33%, rgba(0, 255, 255, 1) 66%, rgba(255, 0, 255, 1) 100%), radial-gradient(circle at 50% 10%, #fff 0%, #ccc 100%);
            background-image: url(//repo.bfw.wiki/bfwrepo/image/6032e5e6ae396.png);
            background-size: cover;
            background-position: center;
            background-attachment: fixed;
            font-family: 'Montserrat';
            overflow: hidden;
        }

        h1 {
            position: relative;
            text-align: center;
            color: #fff;
            font-size: 50px;
            letter-spacing: -5px;
            font-weight: 400;
            margin-bottom: 0;
        }

        h1::after {
            content: 'DRAG THE GLASS';
            position: absolute;
            z-index: 100;
            top: 0;
            left: 0;
            width: 100%;
            color: transparent;
            -webkit-text-stroke: 1px rgba(255, 255, 255, .5);
        }

        h2 {
            color: rgba(255,255,255,0.5);
            text-align: center;
            padding-left: 10px;
            letter-spacing: 2.5px;
            font-weight: 700;
            margin-top: 0;
        }

        #circle {
              opacity: 0.8;
            width: 300px;
            height: 300px;
            border-radius: 50%;
            border: 15px solid #eee;
            box-shadow: inset 0 5px 10px 5px rgba(0, 0, 0, 0.5), inset 0 50px 30px 0px rgba(255, 255, 255, .25), inset 0 -30px 20px rgba(0, 0, 0, .25), 1px 2px 1px 5px rgba(180,180,180, 1), 0 0 0px 1000px rgba(0, 0, 0, 1);
            background-image: radial-gradient(ellipse closest-corner at55%10%, rgba(255, 255, 255, .3) 0%, rgba(255, 255, 255, 0) 30%), radial-gradient(ellipse closest-side at 70% 15%, rgba(255,.........完整代码请登录后点击上方下载按钮下载查看