<!DOCTYPE html>
<html lang="ch">
<head>
<meta charset="UTF-8">
<style>
html,body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
#paper {
position: absolute;
display: inline-block;
width: 60px;
height: 60px;
left: 100px;
top: 20px;
background-color: #90f;
}
@keyframes fall {
10% {
transform: translateY(1.5vh)rotate(90deg);}
20% {
transform: translateY(6vh)rotate(170deg);}
30% {
transform: translateY(13.5vh)rotate(240deg);}
40% {
transform: translateY(24vh)rotate(300deg);}
50% {
transform: translateY(37.5vh)rotate(350deg);}
60% {
transform: translateY(54vh)rotate(350deg);}
70% {
transform: translateY(73.5vh)rotate(350deg);}
80% {
transform: translateY(96vh)rotate(350deg);}
90% {
transform: translateY(121.5vh)rotate(350deg);}
100% {
transform: translateY(150vh)rotate(350deg);}
}
.ani {
animation: fall 0.75s ease-in 0s 1 alternate forwards;}
</style>
</head>
<body>
<div id="paper" onclick="clc()"></div>
</body>
</html>
<script>
function clc() {
var dom = document.getElementById('paper');
dom.setAttribute('class', dom.getAttribute('class') + ' ' + 'ani');
setTimeout(function () {
dom.parentNode.removeChild(dom); }, 1000);
dom.setAttribute('onclick', '');
}
</script>
JS 便条单击后掉落
猜你喜欢
转载自blog.csdn.net/dscn15848078969/article/details/111824589
今日推荐
周排行