jquery实现一个拖动云朵下雨水漫金山小游戏效果代码
代码语言:html
所属分类:游戏
代码描述:jquery实现一个拖动云朵下雨水漫金山小游戏效果代码,拖动鼠标移动云朵按左键下雨
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<link href="https://fonts.googleapis.com/css2?family=Condiment&display=swap" rel="stylesheet">
<style>
@import url("https://fonts.googleapis.com/css?family=Major+Mono+Display&display=swap");
html,
body {
height: 100%;
width: 100%;
overflow: hidden;
background: #cfe3f1;
}
.title {
user-select: none;
position: absolute;
font-family: "Major Mono Display", monospace;
color: #3333ff;
top: 16px;
left: 16px;
right: 100px;
font-size: 22px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
word-spacing: -5px;
letter-spacing: -1.5px;
padding-bottom: 15px;
}
.title::before {
content: "";
position: absolute;
bottom: 0;
opacity: 0.25;
left: 0px;
height: 3px;
width: 87px;
background: #3333ff;
}
.background {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
opacity: 0.5;
}
.background span {
width: 35vw;
height: 35vw;
background: linear-gradient(135deg, rgba(181, 189, 200, 0.94) 0%, #769cbd 36%, #126b2e 100%);
position: absolute;
bottom: 0;
left: 0;
transform: rotate(45deg) translateY(50%);
border-radius: 40px;
}
.background span:nth-of-type(2) {
left: 25%;
}
.background span:nth-of-type(3) {
left: 50%;
}
.background span:nth-of-type(4).........完整代码请登录后点击上方下载按钮下载查看
















网友评论0