效果
当你把鼠标移至贺卡上时，贺卡会缓慢打开。
代码如下
<!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>
