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.........完整代码请登录后点击上方下载按钮下载查看