jQueryanimation实现漂流瓶扔和写动画效果

“捞一个” 和 “扔出去”，漂流瓶纯动画（jQuery&animation实现，移动端大小，单位rem）

<!DOCTYPE htmlPUBLIC "-//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>

jQueryanimation实现漂流瓶扔和写动画效果相关推荐

vue如何使用原生js写动画效果_Vue中的动画效果
Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果. 包括以下工具: 在 CSS 过渡和动画中自动应用 class 可以配合使用第三方 CSS 动画库,如 Animate.css ...
vue如何使用原生js写动画效果_手摸手，带你用 vue 动画实现原生 app 切换效果，丝滑般的体验...
先来看效果图完整源码在 github 中欢迎 star: 准备开始之前您需要有 vue 基础,以及安装好 vue-cli 开始新建 vue 项目:vue init webpack vuexle ...
vue如何使用原生js写动画效果_深入理解 Vuejs 动画效果
本文主要归纳在 Vuejs 学习过程中对于 Vuejs 动画效果的各个相关要点.由于本人水平有限,如文中出现错误请多多包涵并指正,感谢.如果需要看更清晰的代码高亮,请跳转至我的个人站点的 Vue 中的 ...
vue如何使用原生js写动画效果_原生js写一个无缝轮播图插件(支持vue)
轮播图插件(Broadcast.js) 前言:写这个插件的原因前段时间准备用vue加上网易云的nodejs接口,模拟网易云音乐移动端.因为想自己写一遍所有的代码以及加固自己的flex布局,所以没有使 ...
【易微信系列3】神马漂流瓶
漂流瓶曾经红极一时的交流工具,针对陌生人具有很强的隐秘性,每个人都可以随心的发表自己的看法和情绪,然后让你的瓶子飘到任何一个他可能娶到的地方,或者你也可以写上你祝福的话河想要他飘到的地方,或者到想要看 ...
Redis 学习 - 06 漂流瓶案例
案例介绍微信有几亿的用户群,某一时刻可能有几千上万人同时在玩漂流瓶,对于这种高并发数据量小的服务,使用 Node.js 和 Redis 绝对是一个推荐的选择. 接口设计扔一个漂流瓶请求方法:PO ...
上线8年，腾讯为何现在暂停“漂流瓶”？
不知道还有多少人还在用"漂流瓶",不过近来你应该捞不到瓶子了. 雷锋网获悉,11月30日晚间,微信官方账号"微信派"发布消息称:即日起,暂停漂流瓶功能相关服务, ...
jQuery 设计和自定义一个带展开动画效果的导航栏
设计和自定义一个带展开动画效果的导航栏,尝试写了一个demo,加上设计和调试差不多写了一天吧. 这里就来讲讲如何从设计->写布局->写样式->写JS代码完成一个完全自己设计的导航栏 ...
动画效果库 animate
动画效果 animate 官网:https://animate.style/ 功能:第三方的动画样式库,不用自己写动画效果了.元素进入.离开.晃动等效果都有 1.安装: npm i animate.c ...

jQueryanimation实现漂流瓶扔和写动画效果

jQueryanimation实现漂流瓶扔和写动画效果相关推荐

最新文章

热门文章