Based on HTML5/CSS/JS responsive Santa Claus over the cliff mini game, the lever over the cliff mini game, the lever over the cliff mini game is very popular, and very fun and popular, gameplay: hold down the mouse and stretch out a stick.
Free download address: https://download.csdn.net/download/qq_44273429/14156656
Game screenshot:
Html code:
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Wanghao | HTML5圣诞老人过悬崖小游戏</title>
<meta name="keywords" content="游戏动画网站" />
<meta name="description" content="游戏动画网站，基于HTML5/CSS/JS响应式" />
<meta name="author" content="海拥(https://blog.csdn.net/qq_44273429/)" />
<meta name="copyright" content="海拥(https://blog.csdn.net/qq_44273429/)" />
<!-- CSS FILES -->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<script src="js/script.js"></script>
<div style="text-align:center;">
<p>更多源码：<a href="https://blog.csdn.net/qq_44273429/" target="_blank">海拥CSDN博客</a></p>
</div>
</body>
</html>
CSS code:
html,
body {
height: 100%;
margin: 0;
}
body {
font-family: Arial, Verdana, sans-serif;
cursor: grab;
display: flex;
justify-content: center;
align-items: center;
color: white;
background-color: #1e1a33;
}
div,
i {
user-select: none;
pointer-events: none;
}
i {
position: fixed;
color: white;
top: -10%;
z-index: 9999;
animation-name: snowflakes-fall, snowflakes-shake;
animation-duration: 10s, 3s;
animation-timing-function: linear, ease-in-out;
animation-iteration-count: infinite, infinite;
animation-play-state: running, running;
}
@keyframes snowflakes-fall {
0% {
top: -10%;
}
100% {
top: 100%;
}
}
@keyframes snowflakes-shake {
0% {
transform: translateX(0px);
}
50% {
transform: translateX(80px);
}
100% {
transform: translateX(0px);
}
}
Reference article: http://mynewsitebuild.blogger.ba/arhiva/2021/01/14/4251444