1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175
| <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>摇一摇抽签</title>
<meta charset="utf-8">
<style>
* {
font-family: "Helvetica Neue", Helvetica, "Hiragino Sans GB", "STHeitiSC-Light", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
}
html, body {
margin: 0;
width: 100%;
height: 100%;
background: url("./img/background.jpg") no-repeat center center;
background-size: cover;
}
/* 签筒摇动动画 */
@keyframes play {
100% {
background-position: -737px -2px;
}
}
@-webkit-keyframes play {
100% {
background-position: -737px -2px;
}
}
.sprite {
width: 145px;
height: 300px;
display: inline-block;
overflow: hidden;
background: url('./img/animation.png') no-repeat -2px -2px;
animation: play 0.8s steps(5) infinite;
-webkit-animation: play 0.8s steps(5) infinite;
}
/* 半透明遮罩层 */
.cover {
background-size: 50%;
background: rgba(0, 0, 0, 0.7) no-repeat top right;
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
display: none;
}
/* share */
.share {
position: absolute;
width: 60%;
top: 2px;
right: 2px;
}
/* 解签的过渡图 */
.decode .inner {
width: 100%;
height: 100%;
background: url('./img/decode.png') center no-repeat;
background-size: 80%;
}
/* 签筒摇动动画容器 */
.item {
width: 100%;
text-align: center;
position: absolute;
top: 26%;
}
/* 静态签筒定位用的容器 */
.qiancover{
background-size: 50%;
position: absolute;
width: 100%;
top: 26%;
display: block;
}
/* 静态签筒 */
.qian {
width: 100px;
height: 300px;
margin: 0 auto;
overflow: hidden;
background: url('./img/qiantong.png') no-repeat -2px -2px;
background-size: contain;
}
@media only screen and (max-height: 480px) {
/*针对iphone 4s这类小屏幕手机优化签筒大小*/
.qian {
width: 88px;
}
}
/* 对联标题 */
.title {
color: #d50000;
position: absolute;
top: 10%;
width: 100%;
text-align: center;
}
/* 摇晃按钮的动画 */
@keyframes shake {
0% {
transform: scaleY(1) translate(30px);
}
50% {
transform: translate(-30px);
}
100% {
transform: scaleY(1) translate(30px);
}
}
/* 底部摆动按钮的样式 */
.buttonBox {
position: absolute;
bottom: 5%;
width: 100%;
}
.shakeBtn {
width: 76%;
max-width: 300px;
display: block;
margin: 0 auto;
cursor: pointer;
/*animation: shake 1.5s steps(5) infinite;*/
animation: shake 1.2s cubic-bezier(0, 0, 0.36, 1) infinite;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
</head>
<body>
<div style="display:none">
<!--这个隐藏的gif用于分享到微信时自动作为缩略图-->
<img src="./img/thumbnail.gif" />
</div>
<h2 class="title">摇一摇, 来抽签</h2>
<section class="qiancover">
<div class="qian"></div>
</section>
<section class="buttonBox">
<img src="./img/button02.png" class="shakeBtn" onclick="start();">
</section>
<div class="cover result">
<img src="./img/share.png" class="share">
<div class="item">
<div class="sprite a1"></div>
</div>
</div>
<div class="cover decode">
<div class="inner"></div>
</div>
<script src="./js/zepto.min.js"></script>
<script src="./js/index.js"></script>
</body>
</html> |
共 0 条评论关于"HTML5摇一摇,如何判断设备摇动 – H5陀螺仪"
最新评论