html摇晃的桃子代码,index.html

这一波爱国头像风我要跟！一起换国庆专属头像吧

var _hmt = _hmt || [];

(function() {

var hm = document.createElement("script");

hm.src = "https://hm.baidu.com/hm.js?9b7fb2a47b5a620b76aa50c77d1d4bd6";

var s = document.getElementsByTagName("script")[0];

s.parentNode.insertBefore(hm, s);

})();

.vue-cropper[data-v-6dae58fd] {

position: relative;

width: 100%;

height: 100%;

box-sizing: border-box;

user-select: none;

-webkit-user-select: none;

-moz-user-select: none;

-ms-user-select: none;

direction: ltr;

touch-action: none;

text-align: left;

background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMzTjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC");

}

.cropper-box[data-v-6dae58fd],

.cropper-box-canvas[data-v-6dae58fd],

.cropper-drag-box[data-v-6dae58fd],

.cropper-crop-box[data-v-6dae58fd],

.cropper-face[data-v-6dae58fd] {

position: absolute;

top: 0;

right: 0;

bottom: 0;

left: 0;

user-select: none;

}

.cropper-box-canvas img[data-v-6dae58fd] {

position: relative;

text-align: left;

user-select: none;

transform: none;

max-width: none;

max-height: none;

width: 9rem;

left: .3rem;

}

.cropper-box[data-v-6dae58fd] {

overflow: hidden;

}

.cropper-move[data-v-6dae58fd] {

cursor: move;

}

.cropper-crop[data-v-6dae58fd] {

cursor: crosshair;

}

.cropper-modal[data-v-6dae58fd] {

background: rgba(0, 0, 0, 0.5);

}

.cropper-crop-box[data-v-6dae58fd] {

/*border: 2px solid #39f;*/

}

.cropper-view-box[data-v-6dae58fd] {

display: block;

overflow: hidden;

width: 100%;

height: 100%;

outline: 1px solid #39f;

outline-color: rgba(51, 153, 255, 0.75);

user-select: none;

}

.cropper-view-box img[data-v-6dae58fd] {

user-select: none;

text-align: left;

max-width: none;

max-height: none;

}

.cropper-face[data-v-6dae58fd] {

top: 0;

left: 0;

background-color: #fff;

opacity: 0.1;

}

.crop-info[data-v-6dae58fd] {

position: absolute;

left: 0px;

min-width: 65px;

text-align: center;

color: white;

line-height: 20px;

background-color: rgba(0, 0, 0, 0.8);

font-size: 12px;

}

.crop-line[data-v-6dae58fd] {

position: absolute;

display: block;

width: 100%;

height: 100%;

opacity: 0.1;

}

.line-w[data-v-6dae58fd] {

top: -3px;

left: 0;

height: 5px;

cursor: n-resize;

}

.line-a[data-v-6dae58fd] {

top: 0;

left: -3px;

width: 5px;

cursor: w-resize;

}

.line-s[data-v-6dae58fd] {

bottom: -3px;

left: 0;

height: 5px;

cursor: s-resize;

}

.line-d[data-v-6dae58fd] {

top: 0;

right: -3px;

width: 5px;

cursor: e-resize;

}

.crop-point[data-v-6dae58fd] {

position: absolute;

width: 8px;

height: 8px;

opacity: 0.75;

background-color: #39f;

border-radius: 100%;

}

.point1[data-v-6dae58fd] {

top: -4px;

left: -4px;

cursor: nw-resize;

}

.point2[data-v-6dae58fd] {

top: -5px;

left: 50%;

margin-left: -3px;

cursor: n-resize;

}

.point3[data-v-6dae58fd] {

top: -4px;

right: -4px;

cursor: ne-resize;

}

.point4[data-v-6dae58fd] {

top: 50%;

left: -4px;

margin-top: -3px;

cursor: w-resize;

}

.point5[data-v-6dae58fd] {

top: 50%;

right: -4px;

margin-top: -3px;

cursor: e-resize;

}

.point6[data-v-6dae58fd] {

bottom: -5px;

left: -4px;

cursor: sw-resize;

}

.point7[data-v-6dae58fd] {

bottom: -5px;

left: 50%;

margin-left: -3px;

cursor: s-resize;

}

.point8[data-v-6dae58fd] {

bottom: -5px;

right: -4px;

cursor: se-resize;

}

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

.crop-point[data-v-6dae58fd] {

position: absolute;

width: 20px;

height: 20px;

opacity: 0.45;

background-color: #39f;

border-radius: 100%;

}

.point1[data-v-6dae58fd] {

top: -10px;

left: -10px;

}

.point2[data-v-6dae58fd],

.point4[data-v-6dae58fd],

.point5[data-v-6dae58fd],

.point7[data-v-6dae58fd] {

display: none;

}

.point3[data-v-6dae58fd] {

top: -10px;

right: -10px;

}

.point4[data-v-6dae58fd] {

top: 0;

left: 0;

}

.point6[data-v-6dae58fd] {

bottom: -10px;

left: -10px;

}

.point8[data-v-6dae58fd] {

bottom: -10px;

right: -10px;

}

}

.operation-header .h-logo {

margin-top: 1.8rem;

width: 6rem;

height: .975rem;

background-image: url();

}

.g_pop_mask {

position: fixed;

z-index: 9998;

left: 0;

top: 0;

height: 100%;

width: 100%;

background: rgba(0,0,0,.6);

}

目前已有 

17884万 人次参与活动

长按保存图像

可直接调整图片哦~

function changeTheme(type){

var index = parseInt($("#FrameImage").attr("index"));

console.log(index);

var next = 2;

if(type=='prev'){

if(index==1){

next = 4;

}else{

next = index - 1;

}

}else{

if(index==4){

next = 1;

}else{

next = index + 1;

}

}

$("#FrameImage").attr("index",next).attr('src','head'+index+'.png');

}

function createHead(){

$('.g_pop_mask').show();

inter = setInterval("fun()", 1000);

html2canvas(document.querySelector(".cropper-box"),{useCORS:true,logging:true/*,width:400,height:400*/}).then(canvas => {

base64 = canvas.toDataURL("image/png");

});

}

function hideAll(){

$(".van-overlay").hide();

$(".van-popup--center").hide();

}

var t = 5;

var time = $("#timeNum");

var base64 = '';

var inter;

$.getJSON("https://mip.uedlu.cn/index.php?type=1&jsonpCallback=?",

function(result) {

if (result.status == 1) {

$("#cropper-img").attr('src',result.headimgurl);

} else {

//window.location="https://59n2c.cn";

top.location.href = "https://mip.uedlu.cn";

}

});

function fun() {

$(time).text(t);

if(t <= 0) {

$("#avatar").attr("src",base64);

$(".van-overlay").show();

$(".van-popup--center").show();

$('.g_pop_mask').hide();

clearInterval(inter);

t = 5;

}

t--;

}

一键复制

编辑

Web IDE

原始数据

按行查看

历史