使用 javascript DOM 隱藏圖像並使其僅在黑色背景上可見

Question

[在此處輸入圖片說明][1]

我是 JS 和學習 DOM 的新手。 我試圖學習使用 DOM 進行旋轉，請點擊下面這個導師的鏈接。

https://morioh.com/p/8ae9a2ad64a7?fbclid=IwAR0nTt-eix7NIUXsnYcWezZpXGj_EOughWVZ-0Xd4XdeHha_yhZsn2wW9IQ

不知何故，我無法弄清楚如何通過隱藏留在灰色背景上的不可見的其余部分來操縱它。 非常感謝您提前提供的幫助。

https://samuelng87.github.io/ns-pet-switch/ [2]: https://samuelng87.github.io/ns-pet-switch/

Answer 1

你可以試試這個：

用<div id="clip">元素包裹<div id="circle"> <div id="clip">元素給它一個樣式

    #clip {
      -webkit-clip-path: polygon(50% 50%, 100% 0, 100% 100%);
      clip-path: polygon(50% 50%, 100% 0, 100% 100%);
    }

有關兼容性詳細信息，請參閱Canisue CSS 剪輯路徑屬性（用於 HTML）

 var circle = document.getElementById('circle') var upBtn = document.getElementById('upBtn') var downBtn = document.getElementById('downBtn') var rotateValue = circle.style.transform; var rotateSum; upBtn.onclick = function() { rotateSum = rotateValue + "rotate(-90deg)"; circle.style.transform = rotateSum; rotateValue = rotateSum } downBtn.onclick = function() { rotateSum = rotateValue + "rotate(90deg)"; circle.style.transform = rotateSum; rotateValue = rotateSum }

 * { margin: 0; padding: 0; font-family: sans-serif; } .main { width: 100%; height: 100vh; position: relative; overflow: hidden; background: linear-gradient(to right, #020007, #01060a); } nav { width: 80%; position: sticky; margin: 20px auto; z-index: 1; display: flex; align-items: center; } .logo { flex-basis: 20%; } .logo img { width: 200px; border-radius: 10px; position: relative; left: -5rem; } .nav-links { flex: 1; text-align: right; } .nav-links ul li { list-style: none; display: inline-block; margin: 0px 20px; } .nav-links ul li a { color: #fff; text-decoration: none; } .information { width: 1000px; height: 1000px; position: absolute; top: 50%; left: -10%; transform: translateY(-50%); } #clip { -webkit-clip-path: polygon(50% 50%, 100% 0, 100% 100%); clip-path: polygon(50% 50%, 100% 0, 100% 100%); } #circle { width: 1000px; height: 1000px; top: 0; left: 0; border-radius: 50%; transform: rotate(0deg); transition: 0.4s; } .feature img { width: 100px; position: relative; object-fit: contain; border-radius: 10%; } .feature { display: flex; color: #fff; position: absolute; } .feature div { margin-left: 30px; } .feature div p { margin-top: 8px; } .one { top: 450px; right: 50px; } .two { top: 150px; left: 350px; transform: rotate(-90deg); } .three { bottom: 450px; left: 50px; transform: rotate(-180deg); } .four { bottom: 150px; right: 350px; transform: rotate(-270deg); } .char { border-radius: 10px; position: absolute; width: 200px; top: 50%; left: 35%; transform: translateY(-50%); z-index: 1; } .controls { position: absolute; right: 10%; top: 50%; transform: translateY(-50%); text-align: center; } .controls h3 { margin: 15px 0; color: #fff; } #upBtn { border: 3px solid grey; width: 20px; cursor: pointer; border-radius: 10px; transform: rotate(180deg); } #downBtn { border: 3px solid grey; width: 20px; cursor: pointer; border-radius: 10px; } #downBtn:hover { width: 21px } #upBtn:hover { width: 21px } .overlay { width: 0; height: 0; border-top: 500px solid #ccc; border-right: 500px solid black; border-bottom: 500px solid #ccc; border-left: 500px solid #ccc; position: absolute; left: 0; top: 0; } .cover1 { position: absolute; width: 100px; background-color: red; height: 100px; } .cover2 { position: absolute; } .cover2 { position: ; }

 <base href="https://samuelng87.github.io/ns-pet-switch" /> <div class="main"> <nav> <div class="logo"> <img src="https://samuelng87.github.io/ns-pet-switch/ns-logo.jpg" alt="logo"> </div> <div class="nav-links"> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Game</a></li> <li><a href="#">Status</a></li> </ul> </div> </nav> <div class="cover1"></div> <div class="cover2"></div> <div class="cover3"></div> <div class="information"> <div class="overlay"></div> <img src="https://samuelng87.github.io/ns-pet-switch/mainchar.png" alt="char" class="char"> <div id="clip"> <div id="circle"> <div class="feature one"><img src="https://samuelng87.github.io/ns-pet-switch/nibi.png" alt="cat"> <div> <h1>Nibi</h1> <p>Defence & Attack</p> </div> </div> <div class="feature two"><img src="https://samuelng87.github.io/ns-pet-switch/yobi.png" alt="bird"> <div> <h1>Yobi</h1> <p>Full Defence</p> </div> </div> <div class="feature three"><img src="https://samuelng87.github.io/ns-pet-switch/emna.png" alt="monkey"> <div> <h1>Enna</h1> <p>Full Attack</p> </div> </div> <div class="feature four"><img src="https://samuelng87.github.io/ns-pet-switch/gobi.png" alt="dog"> <div> <h1>Gobi</h1> <p>Full Attack</p> </div> </div> </div> </div> </div> <div class="controls"> <img src="https://samuelng87.github.io/ns-pet-switch/kunai.png" alt="arrow" id="upBtn"> <h3>Pets</h3> <img src="https://samuelng87.github.io/ns-pet-switch/kunai.png" alt="arrow" id="downBtn"> </div> </div>

另一種方法是使用兩個線性漸變作為掩碼

#clip {
  width: 1000px;
  height: 1000px;
  top: 0;
  left: 0;
  -webkit-mask-image: linear-gradient(225deg, #000 50%, transparent 50%), linear-gradient(-45deg, #000 50%, transparent 50%);
  mask-image: linear-gradient(225deg, #000 50%, transparent 50%), linear-gradient(-45deg, #000 50%, transparent 50%);
  -webkit-mask-size: 50% 50%, 50% 50%;
  mask-size: 50% 50%, 50% 50%;
  -webkit-mask-position: 100% 100%, 100% 0%;
  mask-position: 100% 100%, 100% 0%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

 var circle = document.getElementById('circle') var upBtn = document.getElementById('upBtn') var downBtn = document.getElementById('downBtn') var rotateValue = circle.style.transform; var rotateSum; upBtn.onclick = function() { rotateSum = rotateValue + "rotate(-90deg)"; circle.style.transform = rotateSum; rotateValue = rotateSum } downBtn.onclick = function() { rotateSum = rotateValue + "rotate(90deg)"; circle.style.transform = rotateSum; rotateValue = rotateSum }

 * { margin: 0; padding: 0; font-family: sans-serif; } .main { width: 100%; height: 100vh; position: relative; overflow: hidden; background: linear-gradient(to right, #020007, #01060a); } nav { width: 80%; position: sticky; margin: 20px auto; z-index: 1; display: flex; align-items: center; } .logo { flex-basis: 20%; } .logo img { width: 200px; border-radius: 10px; position: relative; left: -5rem; } .nav-links { flex: 1; text-align: right; } .nav-links ul li { list-style: none; display: inline-block; margin: 0px 20px; } .nav-links ul li a { color: #fff; text-decoration: none; } .information { width: 1000px; height: 1000px; position: absolute; top: 50%; left: -10%; transform: translateY(-50%); } #clip { width: 1000px; height: 1000px; top: 0; left: 0; -webkit-mask-image: linear-gradient(225deg, #000 50%, transparent 50%), linear-gradient(-45deg, #000 50%, transparent 50%); mask-image: linear-gradient(225deg, #000 50%, transparent 50%), linear-gradient(-45deg, #000 50%, transparent 50%); -webkit-mask-size: 50% 50%, 50% 50%; mask-size: 50% 50%, 50% 50%; -webkit-mask-position: 100% 100%, 100% 0%; mask-position: 100% 100%, 100% 0%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } #circle { width: 1000px; height: 1000px; top: 0; left: 0; border-radius: 50%; transform: rotate(0deg); transition: 0.4s; } .feature img { width: 100px; position: relative; object-fit: contain; border-radius: 10%; } .feature { display: flex; color: #fff; position: absolute; } .feature div { margin-left: 30px; } .feature div p { margin-top: 8px; } .one { top: 450px; right: 50px; } .two { top: 150px; left: 350px; transform: rotate(-90deg); } .three { bottom: 450px; left: 50px; transform: rotate(-180deg); } .four { bottom: 150px; right: 350px; transform: rotate(-270deg); } .char { border-radius: 10px; position: absolute; width: 200px; top: 50%; left: 35%; transform: translateY(-50%); z-index: 1; } .controls { position: absolute; right: 10%; top: 50%; transform: translateY(-50%); text-align: center; } .controls h3 { margin: 15px 0; color: #fff; } #upBtn { border: 3px solid grey; width: 20px; cursor: pointer; border-radius: 10px; transform: rotate(180deg); } #downBtn { border: 3px solid grey; width: 20px; cursor: pointer; border-radius: 10px; } #downBtn:hover { width: 21px } #upBtn:hover { width: 21px } .overlay { width: 0; height: 0; border-top: 500px solid #ccc; border-right: 500px solid black; border-bottom: 500px solid #ccc; border-left: 500px solid #ccc; position: absolute; left: 0; top: 0; } .cover1 { position: absolute; width: 100px; background-color: red; height: 100px; } .cover2 { position: absolute; } .cover2 { position: ; }

 <base href="https://samuelng87.github.io/ns-pet-switch" /> <div class="main"> <nav> <div class="logo"> <img src="https://samuelng87.github.io/ns-pet-switch/ns-logo.jpg" alt="logo"> </div> <div class="nav-links"> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Game</a></li> <li><a href="#">Status</a></li> </ul> </div> </nav> <div class="cover1"></div> <div class="cover2"></div> <div class="cover3"></div> <div class="information"> <div class="overlay"></div> <img src="https://samuelng87.github.io/ns-pet-switch/mainchar.png" alt="char" class="char"> <div id="clip"> <div id="circle"> <div class="feature one"><img src="https://samuelng87.github.io/ns-pet-switch/nibi.png" alt="cat"> <div> <h1>Nibi</h1> <p>Defence & Attack</p> </div> </div> <div class="feature two"><img src="https://samuelng87.github.io/ns-pet-switch/yobi.png" alt="bird"> <div> <h1>Yobi</h1> <p>Full Defence</p> </div> </div> <div class="feature three"><img src="https://samuelng87.github.io/ns-pet-switch/emna.png" alt="monkey"> <div> <h1>Enna</h1> <p>Full Attack</p> </div> </div> <div class="feature four"><img src="https://samuelng87.github.io/ns-pet-switch/gobi.png" alt="dog"> <div> <h1>Gobi</h1> <p>Full Attack</p> </div> </div> </div> </div> </div> <div class="controls"> <img src="https://samuelng87.github.io/ns-pet-switch/kunai.png" alt="arrow" id="upBtn"> <h3>Pets</h3> <img src="https://samuelng87.github.io/ns-pet-switch/kunai.png" alt="arrow" id="downBtn"> </div> </div>