图片正反面动画效果翻转
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="referrer" content="no-referrer">
<title>图片翻转动画</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
.flip-container {
perspective: 1000px;
}
/* 添加动画效果 */
@keyframes flip {
from {
transform: rotateY(180deg);
}
to {
transform: rotateY(360deg);
}
}
.flipper {
width: 300px;
height: 400px;
position: relative;
transform-style: preserve-3d;
transition: transform 0.5s;
animation: flip 1s forwards;
animation-delay: 0.5s; /* 设置动画延时 */
}
.flipper img {
width: 100%;
height: 100%;
position: absolute;
backface-visibility: hidden;
}
.front {
transform: rotateY(180deg);
}
.back {
transform: rotateY(0deg);
}
.flip-container:hover .flipper {
transform: rotateY(180deg);
}
</style>
</head>
<body>
<div class="flip-container">
<div class="flipper">
<!-- 背面 -->
<img src="https://gitee.com/xiaojisengren/tuchuang/raw/master/test/activeRule.png" alt="背面" class="back">
<!-- 正面 -->
<img src="https://gitee.com/xiaojisengren/tuchuang/raw/master/test/activityMissionVisual.png" alt="正面" class="front">
</div>
</div>
111222
</body>
</html>