摘要:文件心心各小方塊相對自身中心的位置自身中心確定為的方塊各方塊相對愛心中心的位置愛心中心
biu.html文件
biu心心
love.js
const blk_pitn = { //各小方塊相對【自身中心】的位置 -- 【自身中心】確定為#div22的方塊 block1: [[0, 1], [0, 0], [-1, 0], [-1, -1]], block2: [[0, 1], [0, 0], [-1, 0], [0, -1]], block3: [[-1, 1], [0, 0], [-1, 0], [-1, -1]], block4: [[0, 1], [0, 0], [-1, 0], [-1, -1]], /* 1 */ block5: [[-1, 1], [0, 0], [-1, 0], [0, -1]], block6: [[0, -1], [0, 0], [-1, 0], [1, -1]], block7: [[-1, -1], [0, 0], [-1, 0], [1, 0]], block8: [[-1, 1], [0, 0], [-1, 0], [-1, -1]], /* 3 */ block9: [[0, -1], [0, 0], [-1, 0], [1, 0]], block10: [[-1, 1], [0, 0], [-1, 0], [1, 0]], block11: [[2, 0], [0, 0], [-1, 0], [1, 0]], /* — */ block12: [[0, 1], [0, 0], [-1, 0], [0, -1]], /* 2 */ block13: [[0, 1], [0, 0], [-1, 0], [-1, -1]], /* 1 */ block14: [[1, 1], [0, 0], [-1, 0], [1, 0]], block15: [[1, -1], [0, 0], [-1, 0], [1, 0]], block16: [[-1, -1], [0, 0], [-1, 0], [1, 0]], /* 7 */ block17: [[0, 1], [0, 0], [-1, 0], [0, -1]], /* 2 */ block18: [[0, 1], [0, 0], [-1, 0], [-1, -1]], /* 1 */ block19: [[0, -1], [0, 0], [-1, 0], [1, 0]], /* 9 */ block20: [[1, -1], [0, 0], [-1, 0], [1, 0]], block21: [[0, 1], [0, 0], [-1, 0], [-1, -1]], /* 1 */ block22: [[1, 1], [0, 0], [-1, 0], [1, 0]], /* 14 */ block23: [[0, 2], [0, 0], [0, -1], [0, 1]] /* | */ }, offset_pitn = { //各方塊block相對【愛心中心】的位置 block1: [5, 3], block2: [5, 1], block3: [3, 4], block4: [3, 2], block5: [3, -1], block6: [2, 5], block7: [2, 1], block8: [1, -1], block9: [1, -3], block10: [1, 2], block11: [0, 3], block12: [0, 0], /* 【愛心中心】*/ block13: [-1, -4], block14: [0, -2], block15: [-2, 4], block16: [-2, 2], block17: [-2, 0], block18: [-3, -2], block19: [-4, 0], block20: [-3, 5], block21: [-5, 3], block22: [-4, 1], block23: [-6, 1] /* 因動畫需要移動一個方塊,故y軸坐標-1*/ }; let blocks = document.getElementsByClassName("block"), block = blocks[0], love = document.getElementsByClassName("love")[0], timer = null, index = 0, //記錄拼接愛心的動畫步驟 clone_block; //用于克隆方塊 //1.移動方塊的【自身中心】到【愛心中心】 block.style.top = "50%"; block.style.left = "50%"; block.style.margin = "-20px 0 0 -20px"; const block_left = parseFloat(window.getComputedStyle(block, null).left.slice(0, -2)), //【愛心中心】 左邊距離父元素的距離 block_top = parseFloat(window.getComputedStyle(block, null).top.slice(0, -2)); //【愛心中心】 頂部距離父元素的距離 function Next() { if (++index >= 24) { clearInterval(timer); Rise(); // alert("已經(jīng)是最后一個了!"); return; } block.style.visibility = "visible"; //升空動畫前允許可見 //2.移動方塊到指定的位置-即是移動【自身中心】到目標位置 block.style.left = block_left + 40 * offset_pitn["block" + index][0] + "px"; block.style.top = block_top - 40 * offset_pitn["block" + index][1] + "px"; for (let i = 0; i < block.children.length; i++) { // block.children[1].innerText = index; //編號便于調(diào)試 block.children[i].style.left = blk_pitn["block" + index][i][0] * -40 + "px"; /* -40 是因為邏輯坐標和瀏覽器的x,y軸方向不一樣*/ block.children[i].style.top = blk_pitn["block" + index][i][1] * -40 + "px"; } //3.克隆方塊—保存現(xiàn)在的位置 /* 一共會克隆23個方塊,加上原先的一個方塊block,共24個方塊,即多出原先的block方塊*/ clone_block = block.cloneNode(true); love.appendChild(clone_block); if (love.children.length >= 24) { blocks[blocks.length - 1].children[2].style.display = "none"; //去掉多余的小方塊 block.style.display = "none"; //隱藏多出的block方塊 } } function Rise() { //4.愛心升高,多出的那個小方塊開始掉落 console.log("開始升空"); let timer2 = null, distance = 0; /* 升高時,移動的距離*/ const target = 120, /* 目標距離*/ speed = 1; /*移動速度*/ let love_top = parseFloat(window.getComputedStyle(love, null).top.slice(0, -2)); //愛心盒子距離屏幕頂部的距離 timer2 = setInterval(() => { distance += speed; // console.log(distance); if (distance >= target) { clearInterval(timer2); console.log("升空完畢"); } love.style.top = (love_top - distance) + "px"; }, 22); } window.onload = function () { setTimeout(() => { timer = setInterval(() => { Next(); }, 300); }, 12000); //gif圖播放完畢所需時間為11.73s };
love.css文件
* { margin: 0; padding: 0; border: 0; } .icon-love { width: 400px; } html, body { width: 100%; height: 100%; } body { /*background-color: skyblue;*/ overflow: hidden; /*隱藏超出的部分*/ } .container { width: 100%; height: 100%; position: relative; } /*---------------------- body_left -------------------------*/ .body_left { width: 300px; height: 300px; left: 0; bottom: 110px; position: absolute; z-index: 98; } /*---------------------- body_left -------------------------*/ /*---------------------- body_center -------------------------*/ .container .love { width: 520px; /* 13 * 40 */ height: 440px; /* 11 * 40 */ left: 50%; top: 50%; position: absolute; margin: -260px 0 0 -220px; /*background-color: gray;*/ } .love .block { right: 0; position: absolute; visibility: hidden; /*未開始升空動畫前隱藏*/ background-color: yellow; } .love .block div { width: 40px; height: 40px; position: absolute; background: url("../images/heart.png") no-repeat; background-size: contain; /*background-color: #c40908;*/ /*border: 1px solid silver;*/ box-sizing: border-box; } /*---------------------- body_center -------------------------*/ /*---------------------- footer -------------------------*/ @keyframes border { 0% { width: 0; } 5% { width: 5%; } 10% { width: 10%; } 15% { width: 15%; } 20% { width: 20%; } 25% { width: 25%; } 30% { width: 30%; } 35% { width: 35%; } 40% { width: 40%; } 45% { width: 45%; } 50% { width: 50%; } 55% { width: 55%; } 60% { width: 60%; } 65% { width: 65%; } 70% { width: 70%; } 75% { width: 75%; } 80% { width: 80%; } 85% { width: 85%; } 90% { width: 90%; } 95% { width: 95%; } 100% { width: 100%; } } .footer { bottom: 30px; position: relative; z-index: 99; } .footer .border .border-top { /*width: 0;*/ /*display: inline-block;*/ border-top: 3px solid black; transform-origin: left center; -webkit-animation: border 312 linear; -o-animation: border 12s linear; animation: border 12s linear; animation-fill-mode : both; /*border-bottom: none;*/ } .footer .border .border-bottom { /*width: 0;*/ /*display: inline-block;*/ float: right; border-top: 3px solid red; transform-origin: right center; -webkit-animation: border 7s linear 12s; -o-animation: border 7s linear 12s; animation: border 7s linear 12s; animation-fill-mode : both; /*border-bottom: none;*/ } .footer .copyright { width: 100%; height: 30px; position: absolute; bottom: -30px; text-align: center; /*background-color: gray;*/ } .copyright div { width: 30%; line-height: 30px; display: inline-block; } .copyright div span { color: dimgray; }
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/53987.html
摘要:導(dǎo)語,,,浮世萬千,摯愛有三,噴薄朝陽,皓婉皎月,不及汝爾,滄海桑田。代碼運行之后輸入相應(yīng)的表白語錄哦這邊小編用的是這句效果圖你是年少的歡喜,這句話反過來也是你。 導(dǎo)語 ? I love three things in this world ,sun for morning ,moon fo...
摘要:在兩點間的關(guān)系用夾角和距離很容易表示時,極坐標系便顯得尤為有用而在平面直角坐標系中,這樣的關(guān)系就只能使用三角函數(shù)來表示。對于很多類型的曲線,極坐標方程是最簡單的表達形式,甚至對于某些曲線來說,只有極坐標方程能夠表示。 歡迎大家前往騰訊云+社區(qū),獲取更多騰訊海量技術(shù)實踐干貨哦~ 本文由郭詩雅發(fā)表于云+社區(qū)專欄 在數(shù)學(xué)中,極坐標系(英語:Polar coordinate system)是...
摘要:本文將利用畫多種不同的表白圖,附上源碼,表白代碼看這一篇文章就夠啦,總有你喜歡的,喜歡的話別忘記三連了。 本文將利用Python畫多種不同的表白圖,附上源碼,表白代...
閱讀 3759·2021-11-25 09:43
閱讀 2191·2021-11-23 10:13
閱讀 823·2021-11-16 11:44
閱讀 2369·2019-08-29 17:24
閱讀 1384·2019-08-29 17:17
閱讀 3480·2019-08-29 11:30
閱讀 2584·2019-08-26 13:23
閱讀 2345·2019-08-26 12:10