html中img引入git动画,原有页面.html

冬奥有我

-webkit-transform: translate(-50%,0);

transform: translate(-50%,0);

width: 258px; -webkit-transition: 1s all;transition: 1s all; } .button{ position: absolute;

-webkit-transform: translate(-50%,0);

transform: translate(-50%,0);

left:50%; bottom: 14%; border-radius: 25px; width: 216px; height: 44px; background-color: #e96244; font-size: 17px; line-height: 44px; color: #ffffff; font-weight: bold; text-align: center; -webkit-transition: 1s opacity;transition: 1s opacity; z-index: 10; } .text2{ position: absolute; font-size: 16px; line-height: 24px; color: #ffffff; position: absolute; left: 50%; bottom: 27%;

-webkit-transform: translate(-50%,0);

transform: translate(-50%,0);

width: 290px; -webkit-transition: 1s opacity;transition: 1s opacity; text-align: center; opacity: 0; } .loading{ width: 33px; position: absolute; height: 33px; left: 45%; top: 40%;

-webkit-transform-origin: center center;

transform-origin: center center;

-webkit-transform: translate(-50%,-50%);

transform: translate(-50%,-50%);

}.button:active{

color: rgba(255,255,255,0.6);

} #share{ opacity: 0;display: none; } #findMy{ display:none;opacity: 0; z-index: 98; } #animationStar{ z-index: 99; } #content{ display: none; }.share{font-size: 14px;line-height: 24px;color: #6b7da0;text-align: center;width:100%;position: absolute;bottom:7%;-webkit-transition: 1s opacity;transition: 1s opacity;display: none;opacity: 0;padding: 10px 0; z-index: 9999;}.share:active{color:rgba(107,125,160,0.6);}

@media only screen and (max-width: 321px){

.share{

bottom: 10px;

}

}

.video-page{

height: 100%;

}

.play-video{

position: relative;

top: 40%;

-webkit-transform: translateY(-50%);

transform: translateY(-50%);

}

.play-video__hd{

position: absolute;

top: -50px;

color: #ffffff;

font-size: 16px;

text-align: center;

width: 100%;

}

.play-video__tips{

display: inline-block;

width: 14em;

white-space: nowrap;

overflow: hidden;

animation: typing 3s steps(14);

}

.video-player{

width: 100%;

height: 260px;

-webkit-transform-origin: center center;

transform-origin: center center;

-webkit-transform: scaleY(0);

transform: scaleY(0);

animation: scaleY 2s ease 1.5s forwards;

}

.fade-animate{

animation: fade .5s ease forwards;

}

.invite-button{

display: inline-block;

margin-top: 20px;

border-radius: 25px;

width: 216px;

height: 44px;

background-color: #e96244;

font-size: 17px;

line-height: 44px;

color: #ffffff;

}

.invite-area{

position: absolute;

top: 68%;

text-align: center;

width: 100%;

opacity: 0;

}

.invite-tips{

color: #ffffff;

font-size: 14px;

margin-bottom: 5px;

}

@keyframes typing {

0% {

width: 0;

}

}

@keyframes opacity2 {

0% {

opacity: 0;

}

100%{

opacity: 1;

}

}

@keyframes scaleY {

100% {

-webkit-transform: scaleY(1);

transform: scaleY(1);

}

}

@keyframes fade {

100% {

opacity: 1;

}

}

@-webkit-keyframes circle{

0%{ transform:rotate(0deg); }

100%{ transform:rotate(360deg); }

}

.loading{

position: absolute;

top: 40%;

left: 50%;

width: 30px;

height: 30px;

-webkit-background-size: contain;

background-size: contain;

background-repeat: no-repeat;

background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEYAAABGCAMAAABG8BK2AAAApVBMVEUAAADmYkfqYkPpYkPpYkXpYUTpYkPrYkTpZEPpYUPpYUTpYkTrYUTpYUPpYUPqYUTpYUPpYkPpYkPpYkPpYkPpYUPqYkTpYkPpYUPqYkPpYUPqYUPpYkTpYkPpYkPpYkPqYkPpYkPpYUPqYkTpYkPpYkPqYUTpYUPpYUPpYUPpYkPpYUPqYkTpYUPqYUPqYUPpYEPqYkPpYkPpYkPpYkPqYkTpYUOXcc3NAAAAN3RSTlMABhomCkQ7Hg5OFpgSVEkxebGSg1k2zcfBIqIqt4hs0qx1ZFy8jT/Xp51+69xxaGAu5uH0/PD4mefimwAAAz1JREFUWMOl2OlyolAQhuFml00QEQcRVIjbuIDJZO7/0qY/HBPLoMLxzY8kVeZJn8VUlB4mGbpmFoXb12OJxJL7/mQ6feN+1c2HptHVsEJ7MJhyX8wYDXK5A1INB1wDE0WRrbdEvHQ+b2YiNNu0gazFHP1nJukiy/PMX86/mdkseLq0/mSz+c+kYSJdHZqX22MoKCofIupiw4EJTKdh0nJ+ZtZru3dfMQKeBU46ojutNlC4XwrdSbEnEzg2kLtpb2u0j+48yttO0KZ8cmFVH8p+v9aaZ6mZbYvjNGd7tB417ct2y04Qt7paY1be32fJj0nTLRo61Cp5sH/nxrcPz2wovyVqmTp4R5Ob7be57RJ4y+SIldMpp6ucwEYxdcjbs3LaG/Td0UY6dco9oatlJQEUlzo2BLPT6NIiCAJ7KHVl1Oi02+3eLt8qAfKoc+YOrS6HDWVBAk3BDKjOWS6ZqUSYPiufnwYhbcn5JNT4k1sQ8sFoYkwGJjqvCfXEGJmVjw9c21GapssjCTb94PCXOUw5TZTxwUxw98DEoozOyt81kTQEI4ky6l/uQyJryC1IuD2chBIwpTgzZeWPSR4YV5zZ/uEKGoHpizMBmIz035wmzgzB+DeMcCMw/ZeZCoxJ4kn8QaT4XPiSAscCk73AIP7kI+lVho5gjJcZc8HpwoqqqjVTgRHeYxWBcVg5HFRBptdjhlB+4EaCa+pxZ0YHUwgOg6TzlwcUCw3jOMzQOfeQZVkoNIzDXRgjQ7HAMBaYr6sbsnIspc6MY1kY5pLByvGod16Sha5+e/+IlG6KKsus9K7dnJU8tzptjCzDoeuqY86FaicF3fxEH0xptt9m2TBYcW7xkJWyNNWWs7AC5+fhFSVXuFar3TXimmkY3ipYKYowbnHSShzDadwCo0Bh6D3bIEtRake991ZAzYSm/HiUROGg3MlxoYSuq8l3kThJzsyDmaUVFKQpUtNTMamqpHbkxytXXGS6pmnqiiNdzyErnudVtaM4T89Srx2uz628BLupJN6IuzA4oqfJ2jejcavVSufA1E7co3ZZejMDRwHSNlXRmphK7v6iy/BWFwaOp1ji//ZaMp7KlqPSw/4B24tqnbN6ARAAAAAASUVORK5CYII=');

-webkit-animation:circle 1s infinite linear;

}

.typing{

position: absolute;

top: 40%;

width: 100%;

text-align: center;

}

.typing-tips{

display: inline-block;

width: 14em;

height: 20px;

/*white-space: nowrap;*/

overflow: hidden;

animation: typing 5s steps(14);

color: #fff;

}

.typeing-t1{

opacity: 0;

animation: opacity2 2s infinite linear 5s ;

}

.typeing-t2{

opacity: 0;

animation: opacity2 2s infinite linear 5.5s ;

}

.typeing-t3{

opacity: 0;

animation: opacity2 2s infinite linear 6s ;

}

.bg-image{

-webkit-background-size: cover;

background-size: cover;

background-image: url('./image/bg.jpg');

position: fixed;

top: 0;

left: 0;

bottom: 0;

right: 0;

z-index: 0;

opacity: 0;

-webkit-transition: opacity 1s;

transition: opacity 1s;

}

正在开启冬奥

“北京周期”

...

你是第 1813748234个参与者

查看我的头像位置

回看全景

预览分享图片

!function(e,n){"function"==typeof define&&(define.amd||define.cmd)?define(function(){return n(e)}):n(e,!0)}(this,function(e,n){function i(n,i,t){e.WeixinJSBridge?WeixinJSBridge.invoke(n,o(i),function(e){c(n,e,t)}):u(n,t)}function t(n,i,t){e.WeixinJSBridge?WeixinJSBridge.on(n,function(e){t&&t.trigger&&t.trigger(e),c(n,e,i)}):t?u(n,t):u(n,i)}function o(e){return e=e||{},e.appId=C.appId,e.verifyAppId=C.appId,e.verifySignType="sha1",e.verifyTimestamp=C.timestamp+"",e.verifyNonceStr=C.nonceStr,e.verifySignature=C.signature,e}function r(e){return{timeStamp:e.timestamp+"",nonceStr:e.nonceStr,package:e.package,paySign:e.paySign,signType:e.signType||"SHA1"}}function a(e){return e.postalCode=e.addressPostalCode,delete e.addressPostalCode,e.provinceName=e.proviceFirstStageName,delete e.proviceFirstStageName,e.cityName=e.addressCitySecondStageName,delete e.addressCitySecondStageName,e.countryName=e.addressCountiesThirdStageName,delete e.addressCountiesThirdStageName,e.detailInfo=e.addressDetailInfo,delete e.addressDetailInfo,e}function c(e,n,i){"openEnterpriseChat"==e&&(n.errCode=n.err_code),delete n.err_code,delete n.err_desc,delete n.err_detail;var t=n.errMsg;t||(t=n.err_msg,delete n.err_msg,t=s(e,t),n.errMsg=t),(i=i||{})._complete&&(i._complete(n),delete i._complete),t=n.errMsg||"",C.debug&&!i.isInnerInvoke&&alert(JSON.stringify(n));var o=t.indexOf(":");switch(t.substring(o+1)){case"ok":i.success&&i.success(n);break;case"cancel":i.cancel&&i.cancel(n);break;default:i.fail&&i.fail(n)}i.complete&&i.complete(n)}function s(e,n){var i=e,t=v[i];t&&(i=t);var o="ok";if(n){var r=n.indexOf(":");"confirm"==(o=n.substring(r+1))&&(o="ok"),"failed"==o&&(o="fail"),-1!=o.indexOf("failed_")&&(o=o.substring(7)),-1!=o.indexOf("fail_")&&(o=o.substring(5)),"access denied"!=(o=(o=o.replace(/_/g," ")).toLowerCase())&&"no permission to execute"!=o||(o="permission denied"),"config"==i&&"function not exist"==o&&(o="ok"),""==o&&(o="fail")}return n=i+":"+o}function d(e){if(e){for(var n=0,i=e.length;n0){var n=e.split("?")[0],i=e.split("?")[1];return n+=".html",void 0!==i?n+"?"+i:n}}if(!e.jWeixin){var h={config:"preVerifyJSAPI",onMenuShareTimeline:"menu:share:timeline",onMenuShareAppMessage:"menu:share:appmessage",onMenuShareQQ:"menu:share:qq",onMenuShareWeibo:"menu:share:weiboApp",onMenuShareQZone:"menu:share:QZone",previewImage:"imagePreview",getLocation:"geoLocation",openProductSpecificView:"openProductViewWithPid",addCard:"batchAddCard",openCard:"batchViewCard",chooseWXPay:"getBrandWCPayRequest",openEnterpriseRedPacket:"getRecevieBizHongBaoRequest",startSearchBeacons:"startMonitoringBeacons",stopSearchBeacons:"stopMonitoringBeacons",onSearchBeacons:"onBeaconsInRange",consumeAndShareCard:"consumedShareCard",openAddress:"editAddress"},v=function(){var e={};for(var n in h)e[h[n]]=n;return e}(),I=e.document,S=I.title,y=navigator.userAgent.toLowerCase(),_=navigator.platform.toLowerCase(),w=!(!_.match("mac")&&!_.match("win")),T=-1!=y.indexOf("wxdebugger"),k=-1!=y.indexOf("micromessenger"),M=-1!=y.indexOf("android"),P=-1!=y.indexOf("iphone")||-1!=y.indexOf("ipad"),x=function(){var e=y.match(/micromessenger\/(\d+\.\d+\.\d+)/)||y.match(/micromessenger\/(\d+\.\d+)/);return e?e[1]:""}(),V={initStartTime:p(),initEndTime:0,preVerifyStartTime:0,preVerifyEndTime:0},A={version:1,appId:"",initTime:0,preVerifyTime:0,networkType:"",isPreVerifyOk:1,systemType:P?1:M?2:-1,clientVersion:x,url:encodeURIComponent(location.href)},C={},L={_completes:[]},B={state:0,data:{}};f(function(){V.initEndTime=p()});var E=!1,O=[],N={config:function(e){C=e,u("config",e);var n=!1!==C.check;f(function(){if(n)i(h.config,{verifyJsApiList:d(C.jsApiList)},function(){L._complete=function(e){V.preVerifyEndTime=p(),B.state=1,B.data=e},L.success=function(e){A.isPreVerifyOk=0},L.fail=function(e){L._fail?L._fail(e):B.state=-1};var e=L._completes;return e.push(function(){l()}),L.complete=function(n){for(var i=0,t=e.length;i0){var n=O.shift();wx.getLocalImgData(n)}},e))):O.push(e)},getNetworkType:function(e){var n=function(e){var n=e.errMsg;e.errMsg="getNetworkType:ok";var i=e.subtype;if(delete e.subtype,i)e.networkType=i;else{var t=n.indexOf(":"),o=n.substring(t+1);switch(o){case"wifi":case"edge":case"wwan":e.networkType=o;break;default:e.errMsg="getNetworkType:fail"}}return e};i("getNetworkType",{},(e._complete=function(e){e=n(e)},e))},openLocation:function(e){i("openLocation",{latitude:e.latitude,longitude:e.longitude,name:e.name||"",address:e.address||"",scale:e.scale||28,infoUrl:e.infoUrl||""},e)},getLocation:function(e){e=e||{},i(h.getLocation,{type:e.type||"wgs84"},(e._complete=function(e){delete e.type},e))},hideOptionMenu:function(e){i("hideOptionMenu",{},e)},showOptionMenu:function(e){i("showOptionMenu",{},e)},closeWindow:function(e){i("closeWindow",{},e=e||{})},hideMenuItems:function(e){i("hideMenuItems",{menuList:e.menuList},e)},showMenuItems:function(e){i("showMenuItems",{menuList:e.menuList},e)},hideAllNonBaseMenuItem:function(e){i("hideAllNonBaseMenuItem",{},e)},showAllNonBaseMenuItem:function(e){i("showAllNonBaseMenuItem",{},e)},scanQRCode:function(e){i("scanQRCode",{needResult:(e=e||{}).needResult||0,scanType:e.scanType||["qrCode","barCode"]},(e._complete=function(e){if(P){var n=e.resultStr;if(n){var i=JSON.parse(n);e.resultStr=i&&i.scan_code&&i.scan_code.scan_result}}},e))},openAddress:function(e){i(h.openAddress,{},(e._complete=function(e){e=a(e)},e))},openProductSpecificView:function(e){i(h.openProductSpecificView,{pid:e.productId,view_type:e.viewType||0,ext_info:e.extInfo},e)},addCard:function(e){for(var n=e.cardList,t=[],o=0,r=n.length;o

document.ontouchmove = function(e) {

e.preventDefault();

return false;

};

// 获取参数

function GetQueryString(name){

var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");

var r = window.location.search.substr(1).match(reg);

if(r!=null)return decodeURIComponent(r[2]); return '';

}

var session_id = GetQueryString('code')

// var session_id = '111' //test 模拟小程序传值

// 原生ajax请求

function post(url, options) {

var xhr = new XMLHttpRequest();

xhr.open('post', url, true);

xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');

xhr.onreadystatechange = function(callback) {

if(xhr.readyState == 4) {

if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {

console.log(xhr.responseText);

} else {

console.log('report fail')

}

}

}

xhr.send(JSON.stringify(options));

console.log(JSON.stringify(options))

}

// 原生ajax请求 end

// 上报

// 上报聚合机制：

// 1) 条数大于10上报

// 2) 1分钟上报1次

var ids = [] // 上报栈

var reportLoop = setInterval(_report, 60000) // 开始计时

function report(id) {

var idItem = {

"id": id

}

ids.push(idItem)

if (ids.length >= 10) {

clearInterval(reportLoop) // 清除循环计时器

_report() // 上报

reportLoop = setInterval(_report, 60000) // 重新计时

}

}

function _report() {

console.log(session_id)

console.log(ids)

if (session_id) {

var postUrl = 'https://et.wxagame.weixin.qq.com/wxaeight/reportids?session_id=' + session_id

if (ids.length) {

// var _ids = JSON.parse(JSON.stringify(ids))

post(postUrl, {

items: ids

})

}

}

ids = [] // 清空上报栈

}

// 退出页面的时候把没上报的都报了

window.onunload = function () {

_report()

}

// 加载失败的回调

function onerrorHandler(event) {

console.log(event);

// 上报动画失败

report(1087);

wx.miniProgram.navigateTo({url: '/pages/pic/pic'});

}

var script = document.createElement('script');

script.setAttribute('type', 'text/javascript');

script.setAttribute('src', './js/three.js?qwerqwer');

script.setAttribute('defer', 'defer');

script.onerror = onerrorHandler;

document.getElementsByTagName('body')[0].appendChild(script);

一键复制

编辑

Web IDE

原始数据

标准视图

历史