<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
@font-face {
font-family: 'edo';
src: url(./fonts/Edo.woff2);
}
:root {
--background: #33837e;
--wrapper-left-background: #5de2a3;
--card: #c7ffbc;
--card-line: #80ea69;
--card-circle-color-1: #56be3e;
--card-circle-color-2: #379e1f;
--card-circle-color-3: #26850e;
--pos: #dddde0;
--numbers: #838183;
--numbers-2: #aaa9ab;
--pos-line: #757375;
--pos-line2: #545354;
--dollar: #4b953b;
}
ul {
margin: 0;
padding: 0;
list-style-type: none;
}
body {
padding: 0;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
100%;
height: 100vh;
background-color: var(--background);
font-family: 'edo';
}
.wrapper {
400px;
height: 130px;
border-radius: 5px;
background-color: white;
transition: all .3s linear;
display: flex;
justify-content: right;
align-items: center;
position: relative;
}
.wrapper:hover {
transform: scale(1.2);
}
.wrapper:hover .wrapper-left {
100%;
}
.wrapper:hover .card {
animation: move-card 1.2s cubic-bezier(0.645, 0.045, 0.355, 1) both;
}
.wrapper:hover .pos {
animation: move-pos 1s cubic-bezier(0.645, 0.045, 0.355, 1) both;
}
.wrapper:hover .pos-screen-money {
animation: opacity-money 1.2s cubic-bezier(0.645, 0.045, 0.355, 1) both;
}
.wrapper-left {
transition: all .3s linear;
130px;
height: 130px;
line-height: 130px;
border-radius: 5px;
background-color: var(--wrapper-left-background);
display: flex;
align-items: center;
overflow: hidden;
position: absolute;
left: 0;
}
.wrapper-right {
padding-right: 70px;
color: var(--card-circle-color-3);
}
.card {
border-radius: 5px;
80px;
height: 48px;
background-color: var(--card);
position: relative;
transition: all 0.3s linear;
margin: auto;
}
.card-stripe {
70px;
height: 15px;
background-color: var(--card-line);
border-radius: 2px;
position: absolute;
top: 10px;
left: 50%;
transform: translate(-50%, 0);
}
.card-circle-box {
position: absolute;
bottom: 9px;
left: 5px;
display: flex;
}
.card-circle {
8px;
height: 8px;
border-radius: 50%;
margin-right: 2px;
}
.card-circle:nth-child(1) {
background-color: var(--card-circle-color-1);
}
.card-circle:nth-child(2) {
background-color: var(--card-circle-color-2);
}
.card-circle:nth-child(3) {
background-color: var(--card-circle-color-3);
}
@keyframes move-card {
50% {
transform: translate(0, -70px) rotate(90deg);
}
100% {
transform: translate(0, 0px) rotate(90deg);
}
}
@keyframes move-pos {
0% {
transform: translate(-50%, 0);
}
100% {
transform: translate(-50%, -90px);
}
}
@keyframes opacity-money {
90% {
opacity: 0;
transform: translateY(-5px);
}
100% {
opacity: 1;
transform: translateY(0px);
}
}
.pos {
66px;
height: 114px;
background-color: var(--pos);
margin: auto;
position: absolute;
bottom: -135px;
left: 50%;
transform: translate(-50%, 0);
border-radius: 7px;
}
.pos-head {
margin: auto;
50px;
height: 16px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
background-color: var(--pos-line);
}
.pos-screen {
margin: auto;
50px;
height: 25px;
line-height: 25px;
border-radius: 5px;
margin-top: 5px;
background-color: white;
text-align: center;
}
.pos-screen-money {
opacity: 0;
color: var(--dollar);
font-weight: bold;
}
.pos-keyboards {
margin: auto;
50px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.pos-keyboards-key {
15px;
height: 15px;
border-radius: 5px;
background-color: var(--numbers);
margin-top: 5px;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="wrapper-left">
<div class="card">
<div class="card-stripe"></div>
<ul class="card-circle-box">
<li class="card-circle"></li>
<li class="card-circle"></li>
<li class="card-circle"></li>
</ul>
</div>
<div class="pos">
<div class='pos-head'></div>
<div class="pos-screen">
<span class="pos-screen-money">$</span>
</div>
<ul class="pos-keyboards">
<li class="pos-keyboards-key"></li>
<li class="pos-keyboards-key"></li>
<li class="pos-keyboards-key"></li>
<li class="pos-keyboards-key"></li>
<li class="pos-keyboards-key"></li>
<li class="pos-keyboards-key"></li>
<li class="pos-keyboards-key"></li>
<li class="pos-keyboards-key"></li>
<li class="pos-keyboards-key"></li>
</ul>
</div>
</div>
<div class="wrapper-right">New Transaction</div>
</div>
</body>
</html>
代码参考于：https://codepen.io/TurkAysenur/pen/wvaGqXW
照着动画自己写了一遍。