hammer实现卡片拖拽选择效果代码
代码语言：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;
font-size: 0.7em;
text-align: center;
}
.recipe_details {
background: #f5f5f5;
}
.fa-ul.ingredients {
margin-top: 10px;
}
.fa-ul.ingredients > li {
padding: 8px;
}
.variation {
padding: 15px;
margin-left: 25px;
margin-right: 25px;
border-top: 2px dashed lightyellow;
pointer-events: none;
}
.fbr {
color: firebrick;
}
i.fbr {
display: inline-block;
border-radius: 60px;
box-shadow: 0px 0px 0px 2px firebrick;
padding: 0.2em 0.3em;
}
.fa-ul .cover {
display: inline-block;
margin-top: 15px;
font-size: 1.5em;
}
.deets {
margin-top: 25px;
font-size: 1.3em;
pointer-events: none;
}
.ingInfo {
position: relative;
left: calc(50% - 0.5em);
transform: translate(-50%);
margin-top: 20px;
color: #c4c4d4;
font-size: 2em;
}
.ingInfoArr {
position: relative;
left: 50%;
transform: translate(-50%);
margin-top: 7px;
color: #c4c4d4;
font-size: 1em;
}
ul.process,
ul.info {
margin-top: 10px;
}
ul.process > li,
ul.info > li {
padding-top: 10px;
}
ul.info {
top: 50%;
z-index: 5;
}
.infoScreen{
min-height:300px;
}
.bg > p {
text-align:center;
margin-top:150px;
}
.white {
color: white;
}
.whyCook {
margin-left: 25px;
margin-right: 25px;
margin-top: 25px;
}
.tinder--info {
position: absolute;
top: 200vh;
left: 50%;
transform: translate(-50%, -50%);
z-index: 10;
width: 90vw;
max-width: 380px;
padding-top: 20px;
padding-bottom: 40px;
padding-left: 20px;
padding-right: 20px;
transition: 500ms;
}
.infoIcon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 20em;
color: rgba(255, 255, 255, 0.2);
z-index: 7;
}
.tinder--info > .covering {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 100vh;
width: 100vw;
background: rgba(255, 255, 255, 0.5);
z-index: -5;
}
.tinder--info > .bg {
position: absolute;
top: 50%;
left: 50%;
height: 100%;
width: 100%;
transform: translate(-50%, -50%);
border-radius: 5px;
background-color: #c4c4d4;
}
.closeMe {
position: absolute;
top: -8px;
right: -8px;
font-size: 2em;
border-radius: 50%;
width: 1.15em;
background-color: #000;
color: white;
border: none;
cursor: pointer;
}
.tomatos {
max-height: 180px;
position: relative;
left: 50%;
transform: translate(-50%);
}
.servings,
.cookTime {
color: midnightblue;
}
/* width */
::-webkit-scrollbar {
width: 10px;
}
/* Track */
::-webkit-scrollbar-track {
box-shadow: inset 0 0 3px grey;
border-radius: 10px;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: lightyellow;
border-radius: 10px;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: lightgoldenrodyellow;
}
.promptBox {
height: 100px;
width: 100px;
transform: translate(-50%, -50%);
position: absolute;
top: 50%;
left: 55%;
opacity: 1;
transition: 300ms;
pointer-events: none;
z-index: 1000;
}
.tapperoo {
height: 25%;
width: 25%;
position: absolute;
top: 20%;
left: 33%;
border-radius: 100px;
background-color: rgba(255,255,255,0.5);
z-index: -1;
animation: tapperoo 3s infinite;
}
@keyframes tapperoo {
0% {
height: 25%;
width: 25%;
}
50% {
height: 5%;
width: 35%;
opacity: 0;
transform: translate(-250%);
}
100% {
opacity: 0;
}
}
#tap-gesture {
position: absolute;
transform: rotate(30deg);
animation: handMove 3s infinite;
}
@keyframes handMove {
0% {
transform: rotate(30deg);
}
50% {
transform: translate(-60%, -10%) rotate(-30deg) scale(0.9);
}
100% {
transform: rotate(30deg);
}
}
.flight{
text-align:center;
padding-left:0px;
pointer-events: none;
}
.toFrom{
position:relative;
display:inline-block;
width:100%;
height:1.3em;
margin-top:-10px;
pointer-events: none;
/* border:1px solid red; */
}
.flightTo{
position:absolute;
left:40px;
pointer-events: none;
}
.flightFrom{
position:absolute;
right:40px;
pointer-events: none;
}
.flightTime{
position:relative;
display:inline-block;
width:100%;
height:1.3em;
text-align:center;
pointer-events: none;
/* border:1px solid red; */
}
.boards{
position:absolute;
font-size:0.8em;
color:rgba(255,255,255,0.8);
left:30px;
pointer-events: none;
}
.arrives{
position:absolute;
font-size:0.8em;
color:rgba(255,255,255,0.8);
right:30px;
pointer-events: none;
}
.totalTime{
font-size:0.8em;
pointer-events: none;
}
.totalTime > .hrMin{
position:absolute;
text-align:left;
left:50%;
transform:translate(-50%);
width:100px;
height:1.3em;
pointer-events: none;
/* border:2px solid green; */
}
.hrMin > b{
font-size:1.3em;
pointer-events: none;
}
.totalTime > i{
position:absolute;
left:50%;
top:50%;
transform:translate(-50%, -50%);
font-size:3em;
color:rgba(0,0,0,0.1);
pointer-events: none;
}
.gate, .group, .seat{
text-align:center;
position:relative;
margin-top:50px;
}
.gate > i, .group > i, .seat > i {
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
color:rgba(0,0,0,0.1);
font-size:3em;
}
.flight > .fa-arrow-right {
opacity:0.5;
font-size:0.8em;
}
</style>
<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="https://s1.pstatp.com/cdn/expire-1-M/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<div class="tinder">
<div class="tinder--status">
<i class="fa fa-arrow-right"></i>
<i class="fa fa-info"></i>
<i class="fa fa-arrow-left"></i>
</div>
<div class="tinder--cards">
<div class="tinder--card cover">
<h2>Ticket #1</h2>
<div class="deets">
<div class="flight">
<i class="fbr fas fa-plane-departure"></i>
<i class="fas fa-arrow-right"></i>
<i class="fas fa-arrow-right"></i>
<i class="fas fa-plane"></i>
<i class="fas fa-arrow-right"></i>
<i class="fas fa-plane"></i>
<i class="fas fa-arrow-right"></i>
<i class="fas fa-plane"></i>
<i class="fas fa-arrow-right"></i>
<i class="fas fa-arrow-right"></i>
<i class="fbr fas fa-plane-arrival"></i>
</div>
<br />
<div class="toFrom">
<span class="flightTo">BWI</span>
<span class="flightFrom">SAN</span>
</div>
<div class="flightTime">
<span class="totalTime">
<i class="fas fa-hourglass-half"></i>
<span class="hrMin">
<b>2</b> hr
<b>50</b> min
</span>
</span>
<div class="boards">
08:15 a.m.
</div>
<div class="arrives">
11:05 a.m.
</div>
</div>
<div class="gate">
<i class="fas fa-door-closed"></i>
A16
</div>
<div class="seat">
<i class="fas fa-chair"></i>
11E
</div>
<div class="group">
<i class="fas fa-suitcase-rolling"></i>
3
</div>
</div>
</div>
<div class="tinder--card about">
<h2>Ticket #2</h2>
<div class="deets">
<div class="flight">
<i class="fbr fas fa-plane-departure"></i>
<i class="fas fa-arrow-right"></i>
<i class="fas fa-arrow-right"></i>
<i class="fas fa-plane"></i>
<i class="fas fa-arrow-right"></i>
<i class="fas fa-plane"></i>
<i class="fas fa-arrow-right"></i>
<i class="fas fa-plane"></i>
<i class="fas fa-arrow-right"></i>
<i class="fas f.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0