hammer实现卡片拖拽选择效果代码-html代码-BFW代码库

代码语言：html

所属分类：拖放

代码描述：hammer实现卡片拖拽选择效果代码

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

<html>

<head>
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/all.min.css">
    <style>
    
        *,
        *:before,
        *:after {
                box-sizing: border-box;
                padding: 0;
                margin: 0;
        }
        
        body {
                background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='100%' width='100$'%3E%3Cdefs%3E%3ClinearGradient id='grad1' x1='0' x2='0' y1='0' y2='1'%3E%3Cstop offset='0%25' style='stop-color:rgb(255,255,255);stop-opacity:0' /%3E%3Cstop offset='70%25' style='stop-color:rgb(255,255,255);stop-opacity:0.8' /%3E%3Cstop offset='100%25' style='stop-color:rgb(255,255,255);stop-opacity:1' /%3E%3C/linearGradient%3E%3C/defs%3E%3Cfilter id='cloud'%3E%3CfeTurbulence baseFrequency='0.006' numOctaves='6' seed='5' /%3E%3CfeColorMatrix values='1.2 0.8 1.4 -0.5 -0.9 1.4 -0.4 1.3 -0.4 1.3 1.5 1.2 0.1 1.9 1 1.9 0.6 -0.7 1.1 1.6' /%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23cloud)' /%3E%3Crect width='100%25' height='100%25' fill='url(%23grad1)' /%3E%3C/svg%3E") center center no-repeat;
                overflow: hidden;
                font-family: 'Roboto', sans-serif;
        }
        h1,
        h2,
        h3 {
                text-align: center;
                pointer-events: none;
                color:rgba(0,0,0,0.5);
        }
        h2 {
                margin-top: 2px;
                pointer-events: none;
        }
        .tinder {
                width: 100vw;
                height: 100vh;
                overflow: hidden;
                display: flex;
                flex-direction: column;
                position: relative;
                opacity: 0;
                transition: opacity 0.1s ease-in-out;
        }
        
        .loaded.tinder {
                opacity: 1;
        }
        
        .tinder--status {
                position: absolute;
                top: 50%;
                margin-top: -30px;
                z-index: 2;
                width: 100%;
                text-align: center;
                pointer-events: none;
        }
        
        .tinder--status i {
                font-size: 100px;
                opacity: 0;
                transform: scale(0.3);
                transition: all 0.2s ease-in-out;
                position: absolute;
                width: 100px;
                margin-left: -50px;
        }
        
        .tinder_love .fa-arrow-right {
                opacity: 0.7;
                transform: scale(1);
        }
        
        .tinder_nope .fa-arrow-left {
                opacity: 0.7;
                transform: scale(1);
        }
        
        .tinder--cards {
                flex-grow: 1;
                padding-top: 40px;
                display: flex;
                justify-content: center;
                align-items: flex-end;
                z-index: 1;
        }
        
        .tinder--card {
                display: inline-block;
                width: 90vw;
                max-width: 380px;
                height: 65vh;
                padding-bottom: 30px;
                border-radius: 8px;
                overflow: hidden;
                position: absolute;
                will-change: transform;
                transition: all 0.3s ease-in-out;
                cursor: -webkit-grab;
                cursor: -moz-grab;
                cursor: grab;
                overflow-y: auto;
        }
        
        .moving.tinder--card {
                transition: none;
                cursor: -webkit-grabbing;
                cursor: -moz-grabbing;
                cursor: grabbing;
        }
        
        .tinder--card > .limitImg {
                max-width: 100%;
                height: 60%;
                width: 380px;
                object-fit: cover;
                pointer-events: none;
        }
        .tinder--card.cover {
                background: #149cb4;
        }
        .tinder--card.about {
                background-color: #97a4b4;
        }
        .tinder--card.ingredients {
                background: #1a5f6d;
        }
        .tinder--card.process {
                background: #44a0d8;
        }
        .tinder--card img {
                max-width: 100%;
                pointer-events: none;
        }
        
        .tinder--card h3 {
                margin-top: 5%;
                font-size: 32px;
                padding: 0 16px;
                pointer-events: none;
        }
        
        .tinder--card p,
        .tinder--card ul {
                pointer-events: none;
                padding: 10px;
        }
        
        .tinder--buttons {
                flex: 0 0 100px;
                text-align: center;
                padding-top: 20px;
                cursor: pointer;
        }
        
        .tinder--buttons button {
                border-radius: 50%;
                line-height: 60px;
                width: 60px;
                border: 0;
                background: #ffffff;
                display: inline-block;
                margin: 0 8px;
                cursor: pointer;
        }
        
        .tinder--buttons button:focus {
                outline: 0;
        }
        
        .tinder--buttons button:hover {
                opacity: 0.7;
        }
        
        .tinder--buttons i {
                font-size: 32px;
                vertical-align: middle;
        }
        
        .fa-arrow-left,
        .fa-arrow-right,
        .fa-plane{
                color: #cdd6dd;
        }
        
        .photoBy {
                position: relative;
                bottom: 0%;
                left: 50%;
                transform: translate(-50%);
                color: lightgrey;
                padding: 5px.........完整代码请登录后点击上方下载按钮下载查看