js实现一个悬浮卡片点击飞出小人效果代码
代码语言：html
所属分类：悬停
代码描述：js实现一个悬浮卡片点击飞出小人效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@500&display=swap" rel="stylesheet">
<style>
@keyframes reappear {
from {
top: 0px;
}
to {
top: -50px;
}
}
html,
body {
background-color: #1e1e1e;
height: 100vh;
margin: 0px;
padding: 0px;
width: 100vw;
}
.roboto-mono {
font-family: "Roboto Mono", monospace;
}
body {
align-items: center;
display: flex;
justify-content: center;
overflow: hidden;
}
body .background-image {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
body #card-display-background {
background-image: url("");
height: 100%;
left: 50%;
max-width: 1800px;
opacity: 0.25;
position: absolute;
transform: translateX(-50%);
width: 100%;
}
body #card-display-background:after, body #card-display-background:before {
content: "";
height: inherit;
left: 0px;
position: absolute;
top: 0px;
width: inherit;
z-index: 1;
}
body #card-display-background:after {
background: linear-gradient(to top, #1e1e1e, transparent, #1e1e1e);
}
body #card-display-background:before {
background: linear-gradient(to right, #1e1e1e 5%, transparent 20%, transparent 80%, #1e1e1e 95%);
}
body #card-display-wrapper {
position: relative;
transition: transform 250ms;
z-index: 2;
}
body #card-display-wrapper #card-display {
display: flex;
gap: 20px;
position: relative;
z-index: 2;
}
body #card-display-wrapper #card-display.transition {
transition: transform 500ms;
}
body #card-display-wrapper #card-display .card-wrapper {
background-color: transparent;
border: none;
border-radius: 15px;
outline: none;
padding: 0px;
position: relative;
transition: transform 250ms;
}
body #card-display-wrapper #card-display .card-wrapper:first-of-type {
transform: scale(0.85);
}
body #card-display-wrapper #card-display .card-wrapper:first-of-type .card {
background-color: #ef5350;
}
body #card-display-wrapper #card-display .card-wrapper:nth-of-type(2) {
transform: scale(0.95);
}
body #card-display-wrapper #card-display .card-wrapper:last-of-type {
transform: scale(0.85);
}
body #card-display-wrapper #card-display .card-wrapper:last-of-type .card {
background-color: #29b6f6;
}
body #card-display-wrapper #card-display .card-wrapper:hover {
transform: scale(1);
}
body #card-display-wrapper #card-display .card-wrapper:hover .card .card-svgs .svg-left {
transform: translate(-30%, -30%);
}
body #card-display-wrapper #card-display .card-wrapper:hover .card .card-svgs .svg-right {
transform: translate(30%, -30%);
}
body #card-display-wrapper #card-display .card-wrapper:hover .card .card-icon {
transform: translate(-20px, 20%) scale(1.2) rotate(-10deg);
}
body #card-display-wrapper #card-display .card-wrapper:hover .card-chef {
opacity: 1;
top: -50px;
}
body #card-display-wrapper #card-display .card-wrapper:active {
transform: scale(0.95);
}
body #card-display-wrapper #card-display .card-wrapper:active .card .card-svgs .svg-left {
transform: translate(-30%, -30%) scale(1.2);
}
body #card-display-wrapper #card-display .card-wrapper:active .card .card-svgs .svg-right {
transform: translate(30%, -30%) scale(1.2);
}
body #card-display-wrapper #card-display .card-wrapper:active .card .card-icon {
transform: translate(-20px, 20%) scale(1.4) rotate(-10deg);
}
body #card-display-wrapper #card-display .card-wrapper.selected .card-chef {
opacity: 0;
top: -500px;
transition: opacity 500ms, top 500ms;
}
body #card-display-wrapper #card-display .card-wrapper.chef-reappear .card-chef {
animation: reappear 250ms ease-in;
}
body #card-display-wrapper #card-display .card-wrapper:not(.chef-reappear, .selected):active .card-chef {
top: -20px;
}
body #card-display-wrapper #card-display .card-wrapper .card {
background-color: #141414;
border-radius: inherit;
box-shadow: 0px 0px 40px 10px rgba(0, 0, 0, 0.3);
cursor: pointer;
height: 300px;
position: relative;
width: 485px;
z-index: 2;
}
body #card-display-wrapper #card-display .card-wrapper .card .card-svgs {
border-radius: inherit;
height: 100%;
left: 0px;
overflow: hidden;
position: absolute;
top: 0px;
width: 100%;
z-index: 2;
}
body #card-display-wrapper #card-display .card-wrapper .card .card-svgs .svg {
opacity: 0.1;
position: absolute;
transition: transform 250ms;
}
body #card-display-wrapper #card-display .card-wrapper .card .card-svgs .svg-left {
left: 0px;
top: 50%;
transform: translate(-25%, -25%);
}
body #card-display-wrapper #card-display .card-wrapper .card .card-svgs .svg-right {
right: 0px;
top: -50%;
transform: translate(25%, -25%);
}
body #card-display-wrapper #card-display .card-wrapper .card .card-amount {
bottom: 0px;
color: white;
font-size: 5em;
left: 0px;
position: absolute;
transform: translate(20px, -20px);
}
body #card-display-wrapper #card-display .card-wrapper .card .card-brand {
color: white;
font-size: 2.5em;
position: absolute;
right: 0px;
top: 0px;
transform: translate(-30px, 30px);
transition: transform 250ms;
}
body #card-display-wrapper #card-display .card-wrapper .card .card-icon {
bottom: 0px;
color: white;
font-size: 10em;
position: absolute;
right: 0px;
transform: translate(-20px, 20%);
transition: transform 250ms;
}
body #card-display-wrapper #card-display .card-wrapper .card-chef {
left: 0px;
opacity: 0;
position: absolute;
top: 0px;
transition: opacity 250ms, top 250ms;
z-index: 1;
}
body #card-display-wrapper #card-display .card-wrapper .card-chef i {
color: white;
text-align: center;
}
body #card-display-wrapper #card-display .card-wrapper .card-chef .fa-user-chef {
color: white;
font-size: 3.5em;
height: 60px;
line-height: 60px;
width: 50px;
}
body #card-display-wrapper #card-display .card-wrapper .card-chef .fa-fire {
bottom: 0px;
font-size: 2em;
left: 50%;
position: absolute;
transform: rotate(180deg) translate(50%, -90%);
}
#youtube-link {
align-items: center;
backdrop-filter: blur(3px);
background-color: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 100px;
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
bottom: 10px;
cursor: pointer;
display: inline-flex;
gap: 5px;
left: 10px;
padding: 10px 20px;
position: absolute;
text-decoration: none;
z-index: 1;
}
#youtube-link:hover {
background-color: rgba(255, 255, 255, 0.2);
border: 1px solid rgba(255, 255, 255, 0.3);
}
#youtube-link i, #youtube-link span {
height: 20px;
line-height: 20px;
}
#youtube-link i {
color: #ef5350;
}
#youtube-link span {
color: white;
}
@media (max-width: 1700px) {
#card-display-wrapper {
transform: scale(0.8);
}
}
@media (max-width: 1300px) {
#card-display-wrapper {
transform: scale(0.5);
}
}
</style>
</head>
<body>
<div id="card-display-background" class="background-image"></div>
<div id="card-display-wrapper">
<div id="card-display">
.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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