该文本包含一个HTML文档的结构，展示了一个带有翻转效果的卡片相框。使用CSS样式定义了卡片的外观和动画效果，包括背景颜色、阴影、旋转动画等。卡片的前面和后面都有内容，前面包含照片名称和标签，后面则显示卡片的标题。整体设计旨在提供一个视觉吸引的用户界面。
<!-- Write your HTML here... --><!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>
<style>
body{background-color:#212121;}.card{overflow:visible;width:190px;height:254px;margin:300px auto;}.content{width:100%;height:100%;transform-style:preserve-3d;transition:transform 300ms;box-shadow:0px 0px 10px 1px #000000ee;border-radius:5px;}.front,.back{background-color:#151515;position:absolute;width:100%;height:100%;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:5px;overflow:hidden;}.back{width:100%;height:100%;justify-content:center;display:flex;align-items:center;overflow:hidden;}.back::before{position:absolute;content:' ';display:block;width:160px;height:160%;background:linear-gradient(90deg,transparent,#ff9966,#ff9966,#ff9966,#ff9966,transparent);animation:rotation_481 5000ms infinite linear;}.back-content{position:absolute;width:99%;height:99%;background-color:#151515;border-radius:5px;color:white;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:30px;}.card:hover .content{transform:rotateY(180deg);}@keyframes rotation_481{0%{transform:rotateZ(0deg);}0%{transform:rotateZ(360deg);}}.front{transform:rotateY(180deg);color:white;}.front .front-content{position:absolute;width:100%;height:100%;padding:10px;display:flex;flex-direction:column;justify-content:space-between;}.front-content .badge{background-color:#00000055;padding:2px 10px;border-radius:10px;backdrop-filter:blur(2px);width:fit-content;}.description{box-shadow:0px 0px 10px 5px #00000088;width:100%;padding:10px;background-color:#00000099;backdrop-filter:blur(5px);border-radius:5px;}.title{font-size:11px;max-width:100%;display:flex;justify-content:space-between;}.title p{width:50%;}.card-footer{color:#ffffff88;margin-top:5px;font-size:8px;}.front .img{position:absolute;width:100%;height:100%;object-fit:cover;object-position:center;}.circle{width:90px;height:90px;border-radius:50%;background-color:#ffbb66;position:relative;filter:blur(15px);animation:floating 2600ms infinite linear;}#bottom{background-color:#ff8866;left:50px;top:0px;width:150px;height:150px;animation-delay:-800ms;}#right{background-color:#ff2233;left:160px;top:-80px;width:30px;height:30px;animation-delay:-1800ms;}@keyframes floating{0%{transform:translateY(0px);}50%{transform:translateY(10px);}100%{transform:translateY(0px);}}
</style>
<body>
<div class="card">
<div class="content">
<div class="back">
<div class="back-content">
<strong>卡片相框</strong>
</div>
</div>
<div class="front">
<div class="img">
<div class="circle">
</div>
<div class="circle" id="right">
</div>
<div class="circle" id="bottom">
</div>
</div>
<div class="front-content">
<small class="badge">标签</small>
<div class="description">
<div class="title">
<p class="title">
<strong>照片名称</strong>
</p>
<svg fill-rule="nonzero" height="15px" width="15px" viewBox="0,0,256,256" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"><g style="mix-blend-mode: normal" text-anchor="none" font-size="none" font-weight="none" font-family="none" stroke-dashoffset="0" stroke-dasharray="" stroke-miterlimit="10" stroke-linejoin="miter" stroke-linecap="butt" stroke-width="1" stroke="none" fill-rule="nonzero" fill="#20c997"><g transform="scale(8,8)"><path d="M25,27l-9,-6.75l-9,6.75v-23h18z"></path></g></g></svg>
</div>
<p class="card-footer">
520 like | 1314 view
</p>
</div>
</div>
</div>
</div>
</div>
</body>
<script>
</script>
</html>