<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <title>边框样式</title> <style> * { /* 清空内外边距 */ margin: 0; padding: 0; /* 禁止选择：使用户不可复制 */ user-select: none; } body { perspective: 1600px; width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; /* 设置网页渐变色 */ background-image: linear-gradient(120deg, #40b340, #d97aff); } #card { position: relative; transform-style: preserve-3d; width: 300px; height: 450px; cursor: pointer; box-shadow: 1px 1px 20px rgb(0, 0, 0, 0.05); animation: rotate-reverse cubic-bezier(0.76, -0.51, 0.29, 1.5) 1s forwards; } #card:active { animation: rotate cubic-bezier(0.76, -0.51, 0.29, 1.5) 1s forwards; } #card_back, #card_front { width: 100%; height: 100%; display: flex; justify-content: space-around; align-items: center; flex-direction: column; border-radius: 30px; background-color: #fff; } #card_front { position: absolute; } #card_back { transform-style: preserve-3d; transform: rotateY(180deg); } @keyframes rotate { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(180deg); } } @keyframes rotate-reverse { 100% { transform: rotateY(0deg); } 0% { transform: rotateY(180deg); } } </style> </head> <body> <div id="card"> <div id="card_front"> <p>点我试试</p> </div> <div id="card_back"> <p>点赞</p> <p>投币</p> <p>收藏</p> <p>关注</p> </div> </div> </body> </html>