拆红包效果
代码语言:html
所属分类:红包
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>领取礼物</title> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"> <script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script> <style> article,aside,blockquote,body,button,code,dd,dialog,div,dl,dt,fieldset,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,input,legend,li,nav,ol,p,pre,section,td,textarea,th,ul { margin: 0; padding: 0 } input,select,textarea { font-size: 100% } table { border-collapse: collapse; border-spacing: 0 } fieldset,img { border: 0 } caption,th { text-align: left } h1,h2,h3,h4,h5,h6 { font-size: 100%; font-weight: 500 } li,ol,ul { list-style: none } em,i { font-style: normal } del { text-decoration: line-through } address,caption,cite,code,dfn,em,th,var { font-style: normal; font-weight: 500 } img { border: 0; max-width: 100% } img,input { vertical-align: middle } a:focus,input:focus { outline: 0 } a { color: #353d44; text-decoration: none } * { outline: 0; -webkit-tap-highlight-color: transparent; -webkit-box-sizing: border-box } html { -webkit-text-size-adjust: none; overflow-y: scroll } body { min-width: 320px; line-height: 1.5; color: #353d44; font-family: Arial,Helvetica,STHeiTi,sans-serif; background: #F4F4F4; width: 100% } .w { margin: 0 auto; max-width: 15rem } html { font-size: 21.33px } body { font-size: 12px } @media screen and (min-width:320px) { html { font-size: 21.33px } body { font-size: 12px } } @media screen and (min-width:360px) { html { font-size: 24px } body { font-size: 12px } } @media screen and (min-width:375px) { html { font-size: 25px } body { font-size: 12px } } @media screen and (min-width:384px) { html { font-size: 25.6px } body { font-size: 14px } } @media screen and (min-width:400px) { html { font-size: 26.67px } body { font-size: 14px } } @media screen and (min-width:414px) { html { font-size: 27.6px } body { font-size: 14px } } @media screen and (min-width:424px) { html { font-size: 28.27px } body { font-size: 14px } } @media screen and (min-width:480px) { html { font-size: 32px } body { font-size: 15.36px } } @media screen and (min-width:540px) { html { font-size: 36px } body { font-size: 17.28px } } @media screen and (min-width:720px) { html { font-size: 48px } body { font-size: 23.04px } } @media screen and (min-width:750px) { html { font-size: 50px } body { font-size: 24px } } html, body { width: 100%; height: 100%; } .hide { /*display: none;*/ opacity: 0; } .draw-gift { width: 100%; height: 100%; overflow: hidden; } .draw-gift .draw-img { width: 100%; position: relative; margin-top: 6.5rem; } .draw-gift .draw-img .draw-down { position: absolute; width: 9rem; height: 9.9rem; background-position: center; background-repeat: no-repeat; background-size: 100% 100%; background-image: url(http://repo.bfw.wiki/bfwrepo/icon/5de092dfaadfe.png); left: 50%; margin-left: -4.5rem; z-index: 10; /*-webkit-animation:draw-down 0.5s ease 1.2s 1 alternate;*/ /*-webkit-animation-timing-function:cubic-bezier(0.25,0.1,0.25,1);*/ } @-webkit-keyframes draw-down { 0% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 0; } } .draw-gift .draw-img .draw-down2 { position: absolute; width: 9rem; height: 9.9rem; background-position: center; background-repeat: no-repeat; background-size: 100% 100%; background-image: .........完整代码请登录后点击上方下载按钮下载查看
网友评论0