效果
当你把鼠标移至贺卡上时，贺卡会缓慢打开。
代码如下
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
background: #2e3c50;
}
.card {
width: 300px;height: 200px;
display: flex;
justify-content: center;
align-items: center;
background: gold;
color: cornsilk;
position: relative;
transform-style: preserve-3d;
transform: perspective(900px) rotateX(55deg);
font-size: 2em;
cursor: pointer;
}
.card::before, .card::after {
width: 50%;height: 100%;
position: absolute;
background: #e11a52;
top: 0;
align-items: center;
display: flex;
box-sizing: border-box;
transition: 2s;
}
.card::before {
content: "新年";
left: 0;
justify-content: flex-end;
border-right: 2px solid black;
padding-right: 10px;
transform-origin: left;
}
.card::after {
content: "快乐";
right: 0;
border-left: 2px solid black;
padding-left: 10px;
transform-origin: right;
}
.card:hover::before {
transform: rotateY(-180deg);
}
.card:hover::after {
transform: rotateY(180deg);
}
/* card background: gold; color: c* */
/* card::before background: #e11a52; */
</style>
</head>
<body>
<div class="card">JAVA</div>
</body>
</html>