jquery实现div下拉刷新加载数据动画效果代码
代码语言:html
所属分类:加载滚动
代码描述:jquery实现div下拉刷新加载数据动画效果代码
下面为部分代码预览,完整代码请点击下载或在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"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css"> <style> *, *:before, *:after { box-sizing: border-box; margin: 0; padding: 0; } html, body { font-size: 62.5%; } @media (max-width: 768px) { html, body { font-size: 50%; } } body { background: #EDEFF2; } .demo { position: absolute; left: 50%; top: 50%; margin-left: -18.3rem; margin-top: -23.5rem; width: 36.6rem; height: 47rem; background: #FFFFFF; border-radius: 1.2rem; box-shadow: 0 2rem 2rem rgba(0, 0, 0, 0.15); overflow: hidden; } .demo__top { position: relative; height: 18.6rem; background: linear-gradient(#7BCECA, #82D3CB); overflow: hidden; } .demo__body { position: relative; min-height: 56.8rem; padding-top: 5rem; will-change: transform; } .pull-down { position: absolute; left: 0; top: 1rem; width: 100%; font-size: 2rem; text-align: center; color: rgba(84, 92, 103, 0.6); -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; pointer-events: none; } .pull-down:before, .pull-down:after { content: ""; position: absolute; top: 0; width: 1rem; height: 1rem; border: 1px solid rgba(84, 92, 103, 0.6); border-left: none; border-top: none; transform: rotate(45deg); -webkit-animation: arrowAnim 1.5s infinite; animation: arrowAnim 1.5s infinite; } .pull-down:before { left: 11rem; } .pull-down:after { left: 25rem; } @-webkit-keyframes arrowAnim { to { transform: translateY(1.3rem) rotate(45deg); opacity: 0; } } @keyframes arrowAnim { to { transform: translateY(1.3rem) rotate(45deg); opacity: 0; } } .items { position: relative; } .items.padded { transition: padding 0.3s; padding-top: 8rem; } .item { height: 8rem; padding: 2rem 2.5rem; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; transition: opacity 0.3s; } .item.absPos { position: absolute; left: 0; top: 0; } .item.hidden { opacity: 0; } .item__icon { display: inline-block; vertical-align: top; width: 4rem; height: 4rem; margin-right: 2rem; border-radius: 50%; } .item__icon.animated { -webkit-animation: animateIcon 0.6s forwards; animation: animateIcon 0.6s forwards; } .item__icon.m--img img { width: 100%; } .item__name { font-size: 2rem; line-height: 4rem; color: #545C67; } @-webkit-keyframes animateIcon { 20% { transform: scaleY(0.7); } 40% { transform: scaleY(0.9); } 60% { transform: scaleY(0.6); } 80% { transform: scaleY(1.1); } 100% { transform: scaleY(1); } } @keyframes animateIcon { 20% { transform: scaleY(0.7); } 40% { transform: scaleY(0.9); } 60% { transform: scaleY(0.6); } 80% { transform: scaleY(1.1); } 100% { transform: scaleY(1); } } .plane-cont { position: absolute; left: 1.7rem; top: -2.8rem; width: 5.6rem; height: 5.6rem; background: #5DB2DF; border-radius: 50%; box-shadow: 0 0.3rem 0.3rem rgba(0, 0, 0, 0.3); } .plane-rotater { position: absolute; left: 50%; top: 50%; margin-left: -1rem; margin-top: -1.3rem; width: 2.8rem; height: 2.6rem; } .plane.fly { -webkit-animation: planeFly 3.5s forwards; animation: planeFly 3.5s forwards; } @-webkit-keyframes planeFly { 28% { transform: translate(55rem, 13rem) rotate(20deg) scale(0.7); } 35% { transform: translate(45rem, -8rem) rotate(-160deg) scale(0.5); } 85% { transform: translate(-15rem, -4rem) rotate(-180deg) scale(0.7); } 90% { transform: translate(-15rem, 0) rotate(0deg); } 100% { transform: rotate(0deg); } } @keyframes planeFly { 28% { transform: translate(55rem, 13rem) rotate(20deg) scale(0.7); } 35% { transform: translate(45rem, -8rem) rotate(-160deg) scale(0.5); } 85% { transform: translate(-15rem, -4rem) rotate(-180deg) scale(0.7); } 90% { transform: translate(-15rem, 0) rotate(0deg); } 100% { transform: rotate(0deg); } } .svgBg__bg { transform-origin: 183px 256px; } .svgBg__tree-trunk { fill: #1E5E65; } .svgBg__tree-part { transform-origin: inherit; } .svgBg__tree-1 { transform-origin: 54px 147px; opacity: 0.7; } .svgBg__tree-1 .svgBg__tree-part { transform: scale(0.35, 0.44); } .svgBg__tree-2 { transform-origin: 67px 144px; opacity: 0.7; } .svgBg__tree-2 .svgBg__tree-part { transform: scale(0.56, 0.65); } .svgBg__tree-3 { transform-origin: 264px 149px; } .svgBg__tree-3 .svgBg__tree-part { transform: scale(0.58, 0.65); } .svgBg__tree-4 { transform-origin: 287px 148px; } .svgBg__tree-4 .svgBg__tree-part { transform: scale(0.8, 1); } .svgBg__tree-5 { transform-origin: 313px 148px; } .svgBg__tree-5 .svgBg__tree-part { transform: scale(0.5, 0.61); } /* font awesome icon slicing effect from https://codepen.io/suez/pen/KpwEeg */ .icon-box { position: relative; display: inline-block; vertical-align: top; width: 4rem; height: 4rem; background: #0c0c0c; overflow: hidden; font-size: 0; text-decoration: none; border-radius: 50%; } .icon-box:before { content: ""; position: absolute; left: 16.6666666667%; top: 0; margin-left: -1px; width: 2px; height: 0.6rem; background: #fff; transition: transform 0.5s; transform: rotate(-30deg) translate(0.3333333333rem, -1rem); } .icon-box:hover:before { -webkit-animation: slice 0.5s; animation: slice 0.5s; } .icon-box__inner { position: relative; display: inline-block; vertical-align: top; overflow: hidden; width: 50%; height: 100%; transform: rotate(-30deg); font-size: 2.4rem; color: #fff; } .icon-box__inner .fa { position: absolute; top: 50%; transform: translate(-50%, -50%) rotate(30deg); } .icon-box__inner.m--left { transform-origin: 100% 50%; } .icon-box__inner.m--left .fa { left: 100%; } .icon-box__inner.m--right { transform-origin: 0 50%; transition: transform 0.5s; } .icon-box:hover .icon-box__inner.m--right { transition: transform 0.5s 0.1s; transform: rotate(-30deg) translate(0.2rem, 0.4rem); } .icon-box__inner.m--right .fa { left: 0; } @-webkit-keyframes slice { to { transform: rotate(-30deg) translate(0.3333333333rem, 7rem); } } @keyframes slice { to { transform: rotate(-30deg) translate(0.3333333333rem, 7rem); } } </style> </head> <body > <div class="demo"> <div class="demo__top"> <svg class="demo__top-svgBg" viewBox="0 0 366 256"> <g class="svgBg__objects"> <path class="svgBg__bg svgBg__bg1" fill="#86D7DB" d="M0,143 88,107 224,153 348,109 366,123 366,256 0,256z" /> <path class="svgBg__bg svgBg__bg2" fill="#3C929A" d="M0,156 106,136 272,172 342,124 366,144 366,256 0,256z" /> <path class="svgBg__bg svgBg__bg3" fill="#416175" d="M0,170 62,160 235,148 305,145 366,153 366,256 0,256z" /> <g class="svgBg__tree svgBg__tree-1 m--left" data-id="1"> <path class="svgBg__tree-leafs svgBg__tree-part" fill="#389296" d="M54,127 C77,127 62,95 54,63 C46,95 31,127 54,127" /> <path class="svgBg__tree-trunk svgBg__tree-part" d="M56,147 Q55,115 54,83 Q53,115 52,146" /> </g> <g class="svgBg__tree svgBg__tree-2 m--left" data-id="2"> <path class="svgBg__tree-leafs svgBg__tree-part" fill="#389296" d="M67,124 C90,124 75,92 67,59 C59,92 44,124 67,124" /> <path class="svgBg__tree-trunk svgBg__tree-part" d="M69,144 Q68,112 67,80 Q66,112 65,143" /> </g> <g class="svgBg__tree svgBg__tree-3 m--right" data-id="3"> <path class="svgBg__tree-leafs svgBg__tree-part" fill="#389296" d="M264,129 C287,129 272,97 264,64 C256,97 241,129 264,129" /> <path class="svgBg__tree-trunk svgBg__tree-part" d="M266,149 Q265,117 264,85 Q263,117 262,148" /> </g> <g class="svgBg__tree svgBg__tree-4 m--right" data-id="4"> <path class="svgBg__tree-leafs svgBg__tree-part" fill="#207277" d="M287,128 C310,128 295,96 287,63 C279,96 264,128 287,128" /> <path class="svgBg__tree-trunk svgBg__tree-part" d="M289,148 Q288,116 287,84 Q286,116 285,147" /> </g> <g class="svgBg__tree svgBg__tree-5 m--right" data-id="5"> <path class="svgBg__tree-leafs svgBg__tree-part" fill="#389296" d="M313,128 C336,128 321,96 313,63 C305,96 290,128 313,128" /> <path class="svgBg__tree-trunk svgBg__tree-part" d="M315,148 Q314,116 313,84 Q312,116 311,147" /> </g> </g> </svg> </div> <div class="demo__body"> <div class="plane-cont"> <div class="plane-rotater"> <div class="plane"> <svg class="plane-svg" viewBox="0 0 28 26"> <path class="plane-svg__path" fill="#fff" d="M0,0 28,13 0,26 0,13 20,13 0,7z" /> </svg> </div> </div> </div> <div class="pull-down">Pull down</div> <div class="items"> <div class="item item-3"> <a class="icon-box item__icon"> <span class="icon-box__inner m--left"> <i class="fa fa-twitter"></i> </span> <span class="icon-box__inner m--right"> <i class="fa fa-twitter"></i> </span> </a> <a class="item__name">My Twitter</a> </div> <div class="item item-2"> <a class="icon-box item__icon"> <span class="icon-box__inner m--left"> <i class="fa fa-codepen"></i> </span> <span class="icon-box__inner m--right"> <i class="fa fa-codepen"></i> </span> </a> <a class="item__name">My other demos</a> </div> <div class="item item-1"> <a class="icon-box item__icon"> <span class="icon-box__inner m--left"> <i class="fa fa-soccer-ball-o"></i> </span> <span class="icon-box__inner m--right"> <i class="fa fa-twitter"></i> </span> </a> <a class="item__name">My Custom</a> </div> </div> </div> </div> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script> <script > 'use strict'; window.requestAnimFrame = function () { return window.requestAnimationFrame || .........完整代码请登录后点击上方下载按钮下载查看
网友评论0