jquery模拟手机下拉刷新加载数据动画效果代码
代码语言:html
所属分类:加载滚动
代码描述:jquery模拟手机下拉刷新加载数据动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes"> <style> *, *:before, *:after { box-sizing: border-box; margin: 0; padding: 0; } html, body { font-size: 62.5%; } @media (max-width: 320px) { html, body { font-size: 45%; } } body { background: #393A56; } .phone { position: relative; width: 42.3rem; height: 87.9rem; padding: 10.2rem 2rem; margin: 3rem auto 3rem; background: #000000; border-radius: 5.6rem; border: 0.4rem solid #B5B5B5; } @media (max-width: 320px) { .phone { width: 100%; height: auto; margin: 0 auto; padding: 0; border-radius: 0; border: 0; background: transparent; } } .phone__screen { overflow: hidden; position: relative; width: 37.5rem; height: 66.7rem; background: #39425A; } @media (max-width: 320px) { .phone__screen { width: 100%; height: auto; } } .demo { position: relative; height: 100%; } .demo__top { position: relative; height: 9rem; padding-top: 3rem; text-align: center; font-size: 0; color: #CECED6; text-transform: uppercase; } .demo__text { font-size: 1.2rem; margin-bottom: 1.6rem; } .demo__text.half { display: inline-block; vertical-align: top; width: 50%; } .demo__body { position: relative; min-height: 66.7rem; padding: 1.5rem; transform: translate3d(0, 0, 0); -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .demo__body.reset { transition: transform 0.5s; transform: translate3d(0, 0, 0) !important; } .demo__body.waiting { transition: transform 0.3s; transform: translate3d(0, 5rem, 0) !important; } @media (max-width: 320px) { .demo__body { height: 500px; padding: 0; } } .demo__svg-bg { overflow: visible; position: absolute; left: 0; top: 0; width: 100%; height: 100%; } @media (max-width: 320px) { .demo__svg-bg { height: 390px; } } .demo__svg-bg__path { fill: #FAFAFB; stroke: transparent; } .demo__content.reset { transition: transform 0.5s; transform: translate3d(0, 0, 0) !important; } .demo__el { position: relative; height: 16rem; margin-bottom: 2rem; background: #ffffff; } .demo__el:before { content: ""; position: absolute; left: 1.5rem; top: 1.5rem; width: 9rem; height: 9rem; border-radius: 1.5rem; background: #5A534F; } @media (max-width: 320px) { .demo__el:before { left: 4.5rem; } } .demo__el:after { content: ""; position: absolute; left: 12rem; top: 1.5rem; width: 21rem; height: 1.5rem; border-radius: 0.7rem; background: #5A534F; color: #5A534F; box-shadow: 0 3rem, 0 6rem; } @media (max-width: 320px) { .demo__el:after { left: 16rem; width: 24rem; } } .demo__svg { overflow: visible; position: absolute; left: 0; top: 8.7rem; width: 100%; height: 3.7rem; } .demo__svg__line { stroke: #4EDDC8; stroke-dashoffset: 98.53px; stroke-dasharray: 285.53px, 285.53px; transform-origin: 187px 19px; } .demo__svg__line.show-circle { transition: stroke-dashoffset 0.325s; stroke-dashoffset: -187px !important; } .demo__svg__line.rotating { -webkit-animation: rotating 0.5s infinite linear; animation: rotating 0.5s infinite linear; } .demo__svg__line.reset { transition: stroke-dashoffset 0.5s; stroke-dashoffset: 98.53px !important; transform: rotate(0); } .demo__svg__smile { stroke: #4EDDC8; stroke-dashoffset: 30px; stroke-dasharray: 30px, 30px; transform-origin: 187px 19px; opacity: 0; transition: opacity 0.1s, stroke-dashoffset 0.5s; transition-delay: 0.2s; transform: rotate(0); } .demo__svg__smile.active { opacity: 1; stroke-dashoffset: 0; } .demo__svg__smile.minified { transition: stroke-dashoffset 0.5s 0.85s, opacity 0.1s 1.25s; stroke-dashoffset: 25px; opacity: 0; -webkit-animation: rotating 0.5s 0.35s infinite linear; animation: rotating 0.5s 0.35s infinite linear; } @-webkit-keyframes rotating { to { transform: rotate(360deg); } } @keyframes rotating { to { transform: rotate(360deg); } } </style> </head> <body > <div class="phone"> <div class="phone__screen"> <div class="demo__top"> <p class="demo__text">Pull down content part</p> <p class="demo__text half">Activities</p> <p class="demo__text half">Saved</p> <svg class="demo__svg" viewBox="0 0 375 37"> <path class="demo__svg__line" stroke-width="3" fill="none" d="M0,1 187,1 a18,18 0 0,1 0,36 a18,18 0 0,1 -12.6,-30.6"/> <path class="demo__svg__smile" stroke-width="3" fill="none" d="M176.61,25 Q187,14 197.39,25" /> </svg> </div> <div class="demo__body"> <svg class="demo__svg-bg" viewBox="0 0 375 667" preserveAspectRatio="xMaxYMin slice"> <path class="demo__svg-bg__path" d="M0,0 C125,0 250,0 375,0 S375,0 375,0 L375,667 0,667z" /> </svg> <div class="demo__content"> <div class="demo__el"></div> <div class="demo__el"></div> <div class="demo__el"></div> </div> </div> </div> </div> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script> <script > $(document).ready(function () { var animating = false; var $body = $(".demo__body"); var $content = $(".demo__content"); var $line = $(".demo__svg__line"); var $smile = $(".demo__svg__smile"); var $bgPath = $(".demo__svg-bg__path"); var resetD = "M0,0 C125,0 250,0 375,0 S375,0 375,0 L375,667 0,667z"; var smileInit = ".........完整代码请登录后点击上方下载按钮下载查看
网友评论0