jQuery&animation实现漂流瓶扔和写动画效果

最新推荐文章于 2023-12-27 09:07:09 发布

一朵叶子

最新推荐文章于 2023-12-27 09:07:09 发布

阅读量1k

点赞数

分类专栏：动画文章标签： jquery animation css3

本文链接：https://blog.csdn.net/yjy528/article/details/122554866

版权

动画专栏收录该内容

2 篇文章 0 订阅

订阅专栏

“捞一个” 和 “扔出去”，漂流瓶纯动画（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>

一朵叶子

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
2
评论
jQuery&animation实现漂流瓶扔和写动画效果

“捞一个” 和 “扔出去”，漂流瓶纯动画（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&g...
复制链接

扫一扫