JavaScript によるダイナミッククリスマスツリーの詳細な説明

JavaScript によるダイナミッククリスマスツリーの詳細な説明

1. CSS のみを使用して作成したアニメーションのクリスマスツリー

デモアドレス: http://haiyong.site/christmastree1 (コンピューターで開くことをお勧めします。モバイル版は応答しない場合は少し歪んでしまいますが、後ろのクリスマスツリーを見ることもできます)

HTMLコード:

ここの HTML コードは完全で、切り取られていません。

<div class="カードコンテナ">
  <div class="snow-flakes-1"></div>
  <div class="snow-flakes-2"></div>
  <h2>次は雪の結晶、クリスマスツリー、新年、そして</h2>
  <h1>より良い私たち</h1>
  <div class="tree-container">
    <div class="ball-0"></div>
    <div class="tree-p1">
      <ul>
        <li>
          <div class="xmas-ball ball-1"></div>
          <div class="tree-left-branch"></div>
        </li>
        <li><div class="tree-right-branch"></div></li>
      </ul>
    </div>
    <div class="tree-p2">
      <ul>
        <li>
          <div class="クリスマスボールボール-2"></div>
          <div class="tree-left-branch"></div>
        </li>
        <li>
          <div class="xmas-ball ball-3"></div>
          <div class="tree-right-branch"></div>
        </li>
      </ul>
    </div>
    <div class="tree-p3">
      <ul>
        <li>
          <div class="xmas-ball ball-6"></div>
          <div class="tree-left-branch"></div>
        </li>
        <li>
          <div class="xmas-ball ball-5"></div>
          <div class="xmas-ball ball-4"></div>
          <div class="tree-right-branch"></div>
        </li>
      </ul>
    </div>
    <div class="tree-p4">
      <ul>
        <li>
          <div class="xmas-ball ball-7"></div>
          <div class="xmas-ball ball-8"></div>
          <div class="tree-left-branch"></div>
        </li>
        <li>
          <div class="xmas-ball ball-9"></div>
          <div class="クリスマスボールボール-10"></div>
          <div class="tree-right-branch 頑固"></div>
        </li>
      </ul>
    </div>
    <div class="wood"></div>
    <div class="presents">
      <div class="present-container-1">
        <div class="tie"></div>
        <div class="ふた"></div>
        <div class="box"></div>
      </div>
      <div class="present-container-2">
        <div class="tie"></div>
        <div class="ふた"></div>
        <div class="box"></div>
      </div>
    </div>
  </div>
  <h3>メリークリスマス！</h3>
  <p><span>haiyong より</span></p>
</div>

CSSメインコード

CSSがたくさんあります。主要なコードの一部を傍受しました

体 {
  高さ：100vh;
  ディスプレイ: フレックス;
  コンテンツの中央揃え: 中央;
  アイテムの位置を中央揃えにします。
  色: #000;
}

ul {
  リストスタイルタイプ: なし;
}

ul li {
  表示: インラインブロック;
}

h1 {
  フォントファミリー: 「Mountains of Christmas」、筆記体;
  フォントサイズ: 42px;
  行の高さ: 60px;
  -webkit-background-clip: テキスト;
  -webkit-テキストの塗りつぶし色: 透明;
}

h1::before、h1::after {
  内容: "❆";
  マージン: 0 10px;
}

h2 {
  フォントファミリ: "Source Sans Pro"、サンセリフ;
  フォントサイズ: 14px;
  テキスト変換:大文字;
  文字間隔: 2px;
}

h3 {
  フォントファミリー: "Open Sans Condensed"、サンセリフ;
  フォントの太さ: 300;
  フォントサイズ: 18px;
  文字間隔: 2px;
  下部マージン: 5px;
}

ｐ {
  フォントファミリー: 「Dancing Script」、筆記体;
  フォントサイズ: 20px;
  フォントの太さ: 700;
}

スパン {
  フォントファミリ: "Roboto"、サンセリフ;
  フォントサイズ: 14px;
  フォントの太さ: 400;
}

.カードコンテナ{
  高さ: 675px;
  幅: 675ピクセル;
  パディング: 30px;
  背景色: rgba(255, 255, 255, 0.6);
  境界線: 8px ダブル #fff;
  境界線の半径: 20px;
  テキスト配置: 中央;
  境界線の半径: 50%;
  -webkit-border-radius: 50%;
  オーバーフロー: 非表示;
  位置: 相対的;
  -webkit-mask-image: -webkit-radial-gradient(白、黒);
}

2. CSS のみを使用して作成したスパイラル クリスマス ツリー

デモアドレス: http://haiyong.site/christmastree2 (モバイルと PC の両方で完全に応答します)

HTMLコード

<div class="tree">
		  <div class="tree__light" style="--appear: 0; --y: 0; --rotate: 1440; --radius: 12.5; --speed: 9.235939340131775; --delay: -2.416794939166802;"></div>
		  <div class="tree__light" style="--appear: 1; --y: 2; --rotate: 1411.2; --radius: 12.25; --speed: 7.165430171444827; --delay: -2.992603509592233;"></div>
		  <div class="tree__light" style="--appear: 2; --y: 4; --rotate: 1382.4; --radius: 12; --speed: 3.5061879558149545; --delay: -0.7704234444726743;"></div>
		  <div class="tree__light" style="--appear: 3; --y: 6; --rotate: 1353.60000000000001; --radius: 11.75; --speed: 4.727223159267884; --delay: -9.55238654379912;"></div>
		  <div class="tree__light" style="--appear: 4; --y: 8; --rotate: 1324.8; --radius: 11.5; --speed: 0.702989829906826; --delay: -4.2545348853934435;"></div>
		  <div class="tree__light" style="--appear: 5; --y: 10; --rotate: 1296; --radius: 11.25; --speed: 6.842573668088441; --delay: -4.560144802030952;"></div>
		  <div class="tree__light" style="--appear: 6; --y: 12; --rotate: 1267.2; --radius: 11; --speed: 5.8193198565131965; --delay: -8.605875056439737;"></div>
		  <!-- style="--appear: 49; まで同じルールが書かれていますが、ブログの簡潔さのためにここでは省略しています-->
		  <div class="tree__light" style="--appear: 49; --y: 98; --rotate: 28.8; --radius: 0.25; --speed: 1.7070837859932286; --delay: -3.8515175108122546;"></div>
		  <svg class="tree__star" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 113.32 108.44" スタイル="--delay: 50">
		    <path d="M90.19 104.33L57.12 87.38 24.4 105l5.91-36.69L3.44 42.65l36.72-5.72 16.1-33.5L73.06 36.6l36.83 4.97-26.35 26.21z" fill="none"stroke-width="6.88"stroke-linecap="round"stroke-linejoin="round">​​</path>
		  </svg>
		</div>

完全なCSSコード

コピーして貼り付けるだけ

* {
  ボックスのサイズ: 境界線ボックス;
}
体 {
  背景: #233343;
  最小高さ: 100vh;
  ディスプレイ: フレックス;
  アイテムの位置を中央揃えにします。
  コンテンツの中央揃え: 中央;
  パースペクティブ: 1200px;
  変換スタイル: 3D を保持します。
}
。木 {
  位置: 相対的;
  高さ: 50vmin;
  幅: 25vmin;
  変換スタイル: 3D を保持します。
  -webkit-animation: スピン 2 秒 無限線形;
          アニメーション: 2 秒間の無限線形スピン。
}
.tree__light {
  変換スタイル: 3D を保持します。
  位置: 絶対;
  高さ: 1vmin;
  幅: 1vmin;
  境界線の半径: 50%;
  -webkit-animation: flash calc(var(--speed) * 1s) calc(var(--delay) * 1s) 無限ステップ(4)、0.5秒表示 calc(var(--appear) * 0.05s) 両方;
          アニメーション: フラッシュ calc(var(--speed) * 1s) calc(var(--delay) * 1s) 無限ステップ(4)、0.5秒表示 calc(var(--appear) * 0.05s) 両方;
  左: 50%;
  変換: translate(-50%, 50%) rotateY(calc(var(--rotate, 0) * 1deg)) translate3d(0, 0, calc(var(--radius, 0) * 1vmin));
  下部: calc(var(--y, 0) * 1%);
}
.tree__star {
  ストローク幅: 5vmin;
  ストローク: #f5e0a3;
  フィルター: ドロップシャドウ(0 0 2vmin #fcf1cf);
  高さ: 5vmin;
  幅: 5vmin;
  オーバーフロー: 表示 !important;
  下部: 100%;
  左: 50%;
  変換: translate(-50%, 0);
  位置: 絶対;
  ストロークダッシュ配列: 1000 1000;
  塗りつぶし: なし;
  -webkit-animation: ストローク 1s calc((var(--delay) * 0.95) * 0.05s) 両方;
          アニメーション: ストローク 1s calc((var(--delay) * 0.95) * 0.05s) 両方;
}
@-webkit-keyframes ストローク {
  から {
    ストロークダッシュオフセット: -1000;
  }
}
@keyframes ストローク {
  から {
    ストロークダッシュオフセット: -1000;
  }
}
@-webkit-keyframes スピン {
  に {
    変換: rotateY(360deg);
  }
}
@keyframes スピン {
  に {
    変換: rotateY(360deg);
  }
}
@-webkit-キーフレームが表示される{
  から {
    不透明度: 0;
  }
}
@キーフレームが表示される{
  から {
    不透明度: 0;
  }
}
@-webkit-keyframes フラッシュ {
  0%、100% {
    背景: #f00;
  }
  20% {
    背景: #fff;
  }
  40% {
    背景: #f00;
  }
  60% {
    背景: #fff;
  }
  80% {
    背景: #f00;
  }
}
@keyframes フラッシュ {
  0%、100% {
    背景: #f00;
  }
  20% {
    背景: #fff;
  }
  40% {
    背景: #f00;
  }
  60% {
    背景: #fff;
  }
  80% {
    背景: #f00;
  }
}

3. HTML+CSS+JSで作ったクリスマスツリー

デモアドレス: http://haiyong.site/christmastree3 (PC でのプレビューが最適です)

フルCSS

体 {
  背景色:#151522;
  オーバーフロー: 非表示;
    ディスプレイ: フレックス;
  アイテムの位置を中央揃えにします。
  コンテンツの中央揃え: 中央; 
}

体、
html{
  高さ: 100%;
  幅: 100%;
  マージン: 0;
  パディング: 0;
}


svg{
  幅:90%;
  高さ:90%;
  可視性:非表示;
 
}

部分的なJS

MorphSVGPlugin.convertToPath('ポリゴン');
	var xmlns = "http://www.w3.org/2000/svg",
	  xlinkns = "http://www.w3.org/1999/xlink",
	select = 関数 {
	    document.querySelector を返します。
	  },
	  selectAll = 関数{
	    document.querySelectorAll(s); を返します。
	  },
	  pContainer = select('.pContainer')、
	  mainSVG = select('.mainSVG')、
	  星 = select('#星'),
	  スパークル = select('.sparkle'),
	  ツリー = select('#tree')、
	  パーティクルを表示 = true、
	  粒子カラー配列 = ['#E8F6F8', '#ACE8F8', '#F6FBFE','#A2CBDC','#B74551', '#5DBA72', '#910B28', '#910B28', '#446D39'],
	  粒子タイプ配列 = ['#星','#円','#十字','#ハート'],
	  粒子プール = [],
	  粒子数 = 0、
	  粒子数 = 201
	
	
	gsap.set('svg', {
	  可視性: '可視'
	})
	
	gsap.set(スパークル, {
		変換元:'50% 50%',
		y:-100
	})
	
	getSVGPoints = (パス) => {
		
		arr = [] とします
		var rawPath = MotionPathPlugin.getRawPath(path)[0];
		rawPath.forEach((el, 値) => {
			obj = {} とします
			obj.x = rawPath[値 * 2]
			obj.y = rawPath[(値 * 2) + 1]
			if(値 % 2) {
				arr.push(オブジェクト)
			}
		})
		arr を返します。
	}
	treePath = getSVGPoints('.treePath') とします。	
	var treeBottomPath = getSVGPoints('.treeBottomPath')
	var mainTl = gsap.timeline({delay:0, repeat:0}), starTl;
	関数 flicker(p){
	  gsap.killTweensOf(p, {不透明度:true});
	  gsap.fromTo(p, {
	    不透明度:1
	  }, {
			持続時間: 0.07、
	    不透明度:Math.random(),
	    繰り返し:-1
	  })
	}
	
	関数createParticles() {
	  var i = numParticles、p、particleTl、ステップ = numParticles/treePath.length、pos;
	  (--i > -1) の間 {
	    
	    p = select(particleTypeArray[i%particleTypeArray.length]).cloneNode(true);
	    mainSVG.appendChild(p);
	    p.setAttribute('fill', 粒子カラー配列[i % 粒子カラー配列.length]);
	    p.setAttribute('クラス', "粒子");   
	    パーティクルプールをpにプッシュします。
	    gsap.set(p, {
	                 x:-100, 
	                 y:-100,
	   変換元:'50% 50%'
	                 })
	  }
	
	}
	
	var getScale = gsap.utils.random(0.5, 3, 0.001, true);
	
	関数playParticle(p){
	  if(!showParticle){return};
	  var p = 粒子プール[粒子数]
	 gsap.set(p, {
		 x: gsap.getProperty('.pContainer', 'x'),
		 y: gsap.getProperty('.pContainer', 'y'),
		 スケール:getScale()
	    }
	    );
	var tl = gsap.timeline();
	  tl.to(p, {
			期間: gsap.utils.random(0.61,6)、
	      物理2D:
	        速度: gsap.utils.random(-23, 23)、
	        角度:gsap.utils.random(-180, 180),
	        重力:gsap.utils.random(-6, 50)
	      },
	      スケール:0,
	      回転:gsap.utils.random(-123,360)、
	      容易さ: 'power1',
	      onStart: ちらつき、
	      onStartParams:[p],
	      //繰り返し:-1,
	      繰り返し: (p) => {
	        gsap.set(p, {         
	            スケール:getScale()
	        })
	      },
	      onRepeatParams: [p]
	
	    });

	  粒子数++;
	  粒子数 = (粒子数 >= 粒子数) ? 0 : 粒子数
	  
	}
	
	関数drawStar(){
	  
	  starTl = gsap.timeline({onUpdate:playParticle})
	  starTl.to('.pContainer, .sparkle', {
			所要時間: 6,
			モーションパス:
				パス: '.treePath',
	      自動回転: false
			},
	    容易さ: '線形'
	  })  
	  .to('.pContainer, .sparkle', {
			期間: 1,
	    onStart:function(){showParticle = false},
	    x:treeBottomPath[0].x,
	    y:ツリー下部パス[0].y
	  })
	  .to('.pContainer, .sparkle', {
			期間: 2,
	    onStart:function(){showParticle = true},
			モーションパス:
				パス: '.treeBottomPath',
	      自動回転: false
			},
	    容易さ: '線形'    
	  },'-=0')
	.from('.treeBottomMask', {
			期間: 2,
	  描画SVG:'0% 0%',
	  ストローク:'#FFF',
	  容易さ:'線形'
	},'-=2')  
	  
	}
	
	
	パーティクルを作成します。
	星を描画します。
	//GSAPタイムラインをスクラブ(mainTl)
	
	mainTl.from(['.treePathMask','.treePotMask'],{
		期間: 6,
	  描画SVG:'0% 0%',
	  ストローク:'#FFF',
		よろめく：
			各: 6
		},
	    期間: gsap.utils.wrap([6, 1,2]),
	  容易さ:'線形'
	})
	.from('.treeStar', {
		期間: 3,
	  // 傾斜Y:270,
	  スケールY:0,
	  スケールX:0.15、
	  変換元:'50% 50%',
	  イージー: 'elastic(1,0.5)'
	},'-=4')
	
	 .to('.sparkle', {
		期間: 3,
	    不透明度:0,
	    イージー:"rough({強度: 2、ポイント: 100、テンプレート: 線形、テーパー: 両方、ランダム化: true、クランプ: false})"
	  },'-=0')
	  .to('.treeStarOutline', {
		期間: 1,
	    不透明度:1、
	    イージー:"rough({強度: 2、ポイント: 16、テンプレート: 線形、テーパー: なし、ランダム化: true、クランプ: false})"
	  },'+=1')		
	mainTl.add(スターTl, 0)
	gsap.globalTimeline.timeScale(1.5);

4. CSS のみを使用した流れ星のクリスマスツリー

デモアドレス: http://haiyong.site/christmastree4 (レスポンシブ、モバイルと PC の両方でプレビュー可能)

HTMLコード

<ul>
 <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>
<ul>
<!-- ここでは 256 行が省略されています<li></li> -->
</ul>

CSSコード

：根 {
  --背景:#3C3B3D;
}

体 {
  背景: var(--background);
}
本文 ul {
  パディング: 0;
}
ボディ ul li {
  リストスタイル: なし;
}
本体 ul:nth-child(1) {
  位置: 絶対;
  トップ：20vh;
  左: 50%;
  幅: 1rem;
  高さ: 1rem;
  境界線の半径: 100%;
  変換: translate(-50%, -50%);
}
本体 ul:nth-child(1) li {
  位置: 絶対;
  幅: 0;
  高さ: 0;
  境界線の幅: 0 0.5rem 1rem 0.5rem;
  境界線のスタイル: solid;
  境界線の色: 透明;
  境界線下部の色: #FFCE54;
  変換の原点: 0.5rem 1rem;
}
本体 ul:n番目の子(1) li:n番目の子(0) {
  変換: 回転(0度);
}
本体 ul:nth-child(1) li:nth-child(1) {
  変換: 回転(72度);
}
本体 ul:nth-child(1) li:nth-child(2) {
  変換: 回転(144度);
}
本体 ul:nth-child(1) li:nth-child(3) {
  変換: 回転(216度);
}
本体 ul:nth-child(1) li:nth-child(4) {
  変換: 回転(288度);
}
本体 ul:nth-child(2) li {
  位置: 絶対;
  トップ：20vh;
  左: 50%;
  幅: 0.0625rem;
  高さ: 60vh;
  変換原点: 50% 0%;
}
本体 ul:nth-child(2) li:nth-child(1) {
  変換: 回転(4.9322004015度);
}
本体 ul:nth-child(2) li:nth-child(1):before、本体 ul:nth-child(2) li:nth-child(1):after {
  -webkit アニメーション遅延: -0.015625 秒;
          アニメーション遅延: -0.015625秒;
}
本体 ul:nth-child(2) li:nth-child(2) {
  変換: 回転(7.7960629984度);
}
本体 ul:nth-child(2) li:nth-child(2):before、本体 ul:nth-child(2) li:nth-child(2):after {
  -webkit アニメーション遅延: -0.03125 秒;
          アニメーション遅延: -0.03125秒;
}
本体 ul:nth-child(2) li:nth-child(3) {
  変換: 回転(10.5294548885度);
}
本体 ul:nth-child(2) li:nth-child(3):before、本体 ul:nth-child(2) li:nth-child(3):after {
  -webkit アニメーション遅延: -0.046875 秒;
          アニメーション遅延: -0.046875秒;
}
/* ...... */
/* 256番目まで同じパターン */
本体 ul:nth-child(2) li:nth-child(256) {
  変換: 回転(2度);
}
本体 ul:nth-child(2) li:nth-child(256):before、本体 ul:nth-child(2) li:nth-child(256):after {
  -webkit アニメーション遅延: -4 秒;
          アニメーション遅延: -4秒;
}
本体 ul:nth-child(2) li:before、本体 ul:nth-child(2) li:after {
  コンテンツ： "";
  位置: 絶対;
  トップ: 0%;
  -webkit-animation: fall 4s linear infinite;
          アニメーション: 落下 4 秒 線形無限;
}
本体 ul:nth-child(2) li:before {
  幅: 0.0625rem;
  高さ: 3rem;
  背景: linear-gradient(rgba(46, 204, 113, 0), rgba(46, 204, 113, 0.5));
}
本体 ul:nth-child(2) li:after {
  下部: 0;
  変換: translate(-50%, 3rem);
  幅: 0.1875rem;
  高さ: 0.1875rem;
  境界線の半径: 100%;
  背景: #ffce54;
}
本体 ul:nth-child(2) li:nth-child(4n):after {
  背景: #D8334A;
}
本体 ul:nth-child(2) li:nth-child(4n+1):after {
  背景: #FFCE54;
}
本体 ul:n番目の子(2) li:n番目の子(4n+2):後 {
  背景: #2ECC71;
}
本体 ul:nth-child(2) li:nth-child(4n+3):after {
  背景: #5D9CEC;
}

@-webkit-keyframes 秋 {
  0% {
    不透明度: 0;
    トップ: 0%;
  }
  5% {
    不透明度: 0;
  }
  15%、90% {
    不透明度: 1;
  }
  100% {
    不透明度: 0;
    上: 100%;
  }
}

@keyframes 落ちる {
  0% {
    不透明度: 0;
    トップ: 0%;
  }
  5% {
    不透明度: 0;
  }
  15%、90% {
    不透明度: 1;
  }
  100% {
    不透明度: 0;
    上: 100%;
  }
}

5. 水晶玉の中のクリスマスツリー

デモアドレス: http://haiyong.site/christmastree5 (レスポンシブ、モバイルと PC の両方でプレビュー可能)

CSS 完全コード

html、本文{
    マージン:0;
    幅: 100%;
    高さ: 100%;
    位置: 絶対;
    オーバーフロー: 非表示;
    背景: linear-gradient(135deg, rgba(180,186,214,1) 0%, rgba(232,203,192,1) 100%);
}

。コンテンツ {
    テキスト配置: 中央;
    幅: 100%;
}

svg {
    最大幅: 575px;
}

#キャンバス {
    境界線の半径: 50%;
    位置: 相対的;
    幅: 310ピクセル;
    高さ: 290px;
    上: 10px;
    左: 0px;
}

.キャンバスコンテナ{
    位置: 絶対;
    幅: 100%;
}

.draw_container{
    位置: 絶対;
    上: 50px;
    幅: 100%;
}

JS 完全コード

$(関数() {
		    var キャンバス = $("#canvas")[0];
		    var ctx = canvas.getContext("2d");
		    var 幅 = 320;
		    var 高さ = 320;
		    キャンバスの幅 = 幅;
		    キャンバスの高さ = 高さ;
		    キャンバスをクリアします。
		
		    var 粒子 = [];
		    (var i = 0; i < WIDTH; i++) の場合 {
		        粒子.push({
		            x: Math.random() * 幅、
		            y: Math.random() * 高さ、
		            r: Math.random() * 2 + 1
		        })
		    }
		    
		    関数draw() {
		        キャンバスをクリアします。
		        ctx.fillStyle = "rgba(255, 255, 255, 0.6)";
		        ctx.beginPath();
		
		        (i = 0; i < WIDTH; i++) の場合 {
		            p = particles[i]とします。
		            ctx.moveTo(px, py);
		            ctx.arc(px, py, pr, 0, Math.PI * 2, true);
		        }
		        ctx.fill();
		        アップデート（）;
		    }
		    
		    関数 update() {
		        (i = 0; i < WIDTH; i++) の場合 {
		            p = particles[i]とします。
		            py + = pr;
		            キャンバスの高さが
		                粒子[i] = {
		                    x: Math.random() * キャンバス幅、
		                    y: -10,
		                    r:pr
		                };
		            }
		        }
		    }
		    var timer = setInterval(draw, 50);
		
		    関数 clearCanvas() {
		        ctx.clearRect(0, 0, キャンバス.幅, キャンバス.高さ);
		    }
		
		})

6. クリスマスカード

デモアドレス: http://haiyong.site/shengdanheka

以上がJavaScriptで実装したダイナミッククリスマスツリーの詳しい内容です。JavaScriptクリスマスツリーの詳細については、123WORDPRESS.COMの他の関連記事もご覧ください。

以下もご興味があるかもしれません:
  • JS2Image をベースにしたクリスマスツリーのコードを実装する
  • JavaScript フラッシュクリスマスツリー実装コード
  • JS を使用して HTML で回転するクリスマスツリーを実装する

<<:  HTML の基礎必読 - CSS スタイルシートの包括的な理解

>>:  MySQLのマスタースレーブレプリケーションと読み取り書き込み分離を理解するための記事

推薦する

js キャンバスで円形の水のアニメーションを実現

この記事の例では、円形の水のアニメーションを実現するためのキャンバスの具体的なコードを参考までに共有...

MySQLに画像を保存する方法

1 はじめにデータベースを設計する場合、画像や音声ファイルをデータベースに挿入することは避けられませ...

Mysql マルチテーブル結合クエリの実行の詳細について簡単に説明します。

まず、このブログのケースデモンストレーション テーブルを作成します。 create table a(...

docker redis5.0 clusterの実装 クラスタ構築

システム環境: Ubuntu 16.04LTSこの記事では、6 つの Docker コンテナを使用し...

Web開発でボックスを中央に配置するいくつかの方法

1. ボックスを中央に配置するいくつかの方法を記録します。 1.0、マージン幅固定、高さ中央配置。 ...

タイプファイルの入力ボタン機能の研究

<br />一部のWebサイトでアップロードする場合、「参照」ボタンをクリックすると[フ...

Docker-compose におけるdepends_on 順序問題を解決する方法についての簡単な説明

コンテナをソートするためにdepends_onを使用しても、コンテナ間の依存関係の問題は完全には解決...

Alibaba Cloud ECS クラウド サーバー (Linux システム) は、MySQL をインストールした後にリモートで接続できません (落とし穴)

昨日、1年間使用していた Alibaba Cloud サーバーを購入しました。システムは Linux...

要素内の TimePicker は時間の一部を無効にします (分単位で無効)

プロジェクトの要件は、日付と時刻を選択し、現在の時刻以降の時刻のみを選択し、最小レベルを分単位で無効...

デザイン協会: なぜ間違った場所を探したのですか?

数日前、バスで仕事に行きました。バスのカードリーダーの実際の使用シーンを実際に見て、カードリーダーの...

MySQL ページングの制限パラメータの簡単な例

Mysqlページングの2つのパラメータ ユーザー制限 1,2 から * を選択 1 は検索する最初の...

Vueはドラッグアンドドロップまたはクリックで写真をアップロードする機能を実装しています

この記事では、ドラッグアンドドロップやクリックによる画像のアップロードを実現するためのVueの具体的...

MySQLのSeconds_Behind_Masterの詳細な説明

目次マスターの後ろの秒数オリジナルの実装最終マスタータイムスタンプマスターとのクロック差他の実行時間...

絵文字と問題解決のためのMySQL/Javaサーバーサポートの詳細な説明

この記事では、絵文字用の MySQL Java サーバーのサポートと問題解決方法について説明します。...

HTMLのposition属性の使い方（4種類）の詳しい説明

位置の 4 つのプロパティ値は次のとおりです。 1.相対的な2.絶対3.修正4.静的これら 4 つの...