“捞一个” 和 “扔出去”，漂流瓶纯动画（jQuery&animation实现，移动端大小，单位rem）
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection" content="telephone=no" />
<meta name="robots" content="nofollow" />
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<script src="https://code.jquery.com/jquery-3.1.1.min.js" type="text/javascript"></script>
<style>
*{margin:0;padding:0;font-family:"微软雅黑",Microsoft YaHei,Arial, Helvetica, sans-serif, "宋体";font-size:12px;list-style:none;font-weight: normal;}
body{margin:0 auto;padding:0;width:100%;background:#ff7348;overflow-x: hidden;}
a{text-decoration:none;-webkit-tap-highlight-color: rgba(0,0,0,0);-webkit-tap-highlight-color: transparent;}
a:focus {outline-style:none; -moz-outline-style: none;}
a{blr:expression(this.onFocus=this.close());}
a{blr:expression(this.onFocus=this.blur());}
img{display:block;border:0;vertical-align:middle;}
.hide{display:none;}
.show{display:block;}
.bg{width: 7.5rem;height:3.29rem;margin: 0 auto;padding-top: 2rem;background: url("../img/activity/bg.png")no-repeat center top;background-size: 100%;position: relative;}
.action_region{width: 4rem;height: 2rem;margin: 0 auto;border: 1px solid #bcbcbc;overflow: hidden;position: relative;}
.fishingNet{width: 1.37rem;height: 0.7rem;background: url("../img/activity/net.png")no-repeat center;background-size: 100%;transform: rotate(-80deg);opacity: 0;position: absolute;bottom:-0.2rem;}
.fishingAnimation{animation: fishing 3s;}
.bottle{width: 0.27rem;height: 0.54rem;background: url("../img/activity/bottle.png")no-repeat center;background-size: 100%;transform: rotate(2deg);}
.action_btn{width: 5rem;height: 1rem;margin: 0.3rem auto;overflow: hidden; text-align: center;}
.btn1{display: inline-block; width: 0.8rem;height: 0.5rem;background: #eeeeee;border-radius: 0.1rem;line-height: 0.5rem;text-align: center;}
.btn2{display: inline-block; width: 0.8rem;height: 0.5rem;background: #eeeeee;border-radius: 0.1rem;line-height: 0.5rem;text-align: center;}
.btn3{display: inline-block; width: 0.8rem;height: 0.5rem;background: #eeeeee;border-radius: 0.1rem;line-height: 0.5rem;text-align: center;}
@keyframes fishing {
0%{transform: translateX(0)translateY(0)rotate(-80deg);opacity: 1;}
10%{transform: translateX(3rem)translateY(0)rotate(-80deg);opacity: 1;}
20%{transform: translateX(0.5rem)translateY(0)rotate(-80deg);opacity: 1;}
30%{transform: translateX(2.5rem)translateY(0)rotate(-80deg);opacity: 1;}
40%{transform: translateX(1.5rem)translateY(0)rotate(-80deg);opacity: 1;}
80%{transform: translateX(1.5rem) translateY(-1.5rem) rotate(0deg);opacity: 1;}
100%{transform: translateX(1.5rem) translateY(-1.5rem) rotate(0deg);opacity: 0;}
}
.pop{width: 100%;height: 100%;background:rgba(0, 0, 0, 0.4);position: fixed;top: 0;left: 0;z-index: 10;}
.pop_main{width: 3rem;height: 2rem;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);z-index: 12;}
.pop_text{width: 3rem;height: 2rem;background: #bfbfbf;}
.bottle1{width: 0.27rem;height: 0.54rem;background: url("../img/activity/bottle.png")no-repeat center;background-size: 100%;position: absolute;left:50%;bottom:0;transform: translateX(-50%);opacity: 0;}
.throwAnmation{animation: throw 3s;}
@keyframes throw {
0%{transform:translateY(0) rotate(2160deg);opacity: 1;}
95%{transform:translateY(-3rem) rotate(0);opacity: 0.5;}
100%{transform:translateY(-2.5rem) rotate(0);opacity: 0;}
}
.throwbtn{width: 0.8rem;height: 0.5rem;margin: 0.2rem auto;background: #eeeeee;border-radius: 0.1rem;line-height: 0.5rem;text-align: center;}
</style>
</head>
<body>
<div>
<div>漂流瓶</div>
<div class="bg">
<div class="action_region">
<div class="fishingNet">
<div class="bottle"></div>
</div>
</div>
<div class="bottle1 "></div>
</div>
<div class="action_btn">
<div class="btn1" onclick="fishingBottle()">捞一个</div>
<div class="btn2" onclick="getMyBottle()">我的</div>
<div class="btn3" onclick="showPop()">扔一个</div>
</div>
<div class="pop hide" id="pop">
<div class="pop_main">
<div class="pop_text">
<input type="text" placeholder="请输入用户id"></input>
<input type="text" placeholder="留言内容"class="pop_words"></input>
</div>
<div class="throwbtn" onclick="throwBottle()">扔出去</div>
</div>
</div>
</div>
<script>
function fishingBottle(){
$(".fishingNet").addClass("fishingAnimation");
}
function showPop(){
$("#pop,.bottle1").show();
}
function throwBottle(){
$("#pop").hide();
$(".bottle1").addClass("throwAnmation");
}
</script>
<script>
(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = "orientationchange" in window ? "orientationchange" : "resize",
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
docEl.style.fontSize = 100 * (clientWidth / 750) + "px"
};
recalc();
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener("DOMContentLoaded", recalc, false);
(function () {
return;
var dpr = scale = 1;
var isIPhone = win.navigator.appVersion.match(/iphone/gi);
var devicePixelRatio = win.devicePixelRatio;
if (isIPhone)
if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) dpr = 3;
else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)) dpr = 2;
else dpr = 1;
else dpr = 1;
scale = 1 / dpr;
var metaEl = "";
metaEl = doc.createElement("meta");
metaEl.setAttribute("name", "viewport");
metaEl.setAttribute("content", "initial-scale=" + scale + ", maximum-scale=" + scale + ", minimum-scale=" + scale + ", user-scalable=no");
if (docEl.firstElementChild) docEl.firstElementChild.appendChild(metaEl);
else {
var wrap = doc.createElement("div");
wrap.appendChild(metaEl);
doc.write(wrap.innerHTML)
}
})()
})(document,window);
</script>
</body>
</html>