<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
img {
display: block;
width: 150px;
height: 200px;
border-radius: 16px;
background-color: red;
line-height: 200px;
font-size: 24px;
text-align: center;
position: fixed;
right: -75px;
bottom: 100px;
transform: rotate(-30deg);
animation: bagAnimation 3s linear infinite;
}
@keyframes bagAnimation {
0% {
transform: rotate(-30deg);
}
/* 0-30一样是为了模拟每次的延迟生效时间 */
30% {
transform: rotate(-30deg);
}
40% {
transform: rotate(0deg);
}
50% {
transform: translateX(-200px);
}
55% {
transform: translateX(-200px) rotate(-15deg);
}
60% {
transform: translateX(-200px) rotate(15deg);
}
65% {
transform: translateX(-200px) rotate(-15deg);
}
70% {
transform: translateX(-200px) rotate(15deg);
}
75% {
transform: translateX(-200px) rotate(0deg);
}
85% {
transform: translateX(0);
}
100% {
transform: translateX(0) rotate(-30deg);
}
}
</style>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
</head>
<body>
<img class="small"
src="https://resource.tuixb.cn/test/mp_51dcd190-834c-11e9-8444-018b79c0e985/default/f82aaf97-0fbc-4a7e-afc9-ad9a11277924.png" />
</body>
<script>
$(function () {
$(".container").on('click', function () {
$(".front").addClass('toback');
$(".back").addClass('tofront');
})
});
</script>
</html>
单个卡片翻动
最新推荐文章于 2022-11-24 16:30:56 发布