答案 0 :(得分:2)
答案 1 :(得分:0)
如果你想知道该网站是如何做到的,请点击这里:
z指数没有改变......不透明度是。最初,文本和图像是可见的,但不透明度是0.您看到的文本实际上是一个下面的svg,相同的图像和文本被淘汰。当您将鼠标悬停在包含这三项内容的DIV(text,img,svg)上时,文本和图像不透明度将设置为1.
以下是使用部分示例标记的概念的工作示例。
使svg文本与真实文本对齐的关键是文本x和y定位。示例:<text x="168" y="217" id="knockout" fill="white">Chicago</text>
我估算了它,您想要使其准确无误。
https://jsfiddle.net/jbmy9s9m/4/
<div class="container">
<div class="words" id="p1">
<h3>Chicago</h3>
<img class="hover-pics" src="http://i.imgur.com/XV7wrRI.jpg" width="600" height="402" alt="picture 1"/>
<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" class="svgMask1" width="600" height="402" viewBox="0 0 600 402"><defs><mask id="maskID0"><text x="168" y="217" id="knockout" fill="white">Chicago</text></mask></defs><title>Chicago</title><desc>Chicago</desc>
<image style="mask:url(#maskID0);" width="600" height="402" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://i.imgur.com/XV7wrRI.jpg"></image></svg>
</div>
<div class="words" id="p2">
<h3>Cambridge</h3>
<img class="hover-pics" src="http://i.imgur.com/R1zVKKL.jpg" width="600" height="400" alt="picture 2"/>
<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" class="svgMask2" width="600" height="400" viewBox="0 0 600 400"><defs><mask id="maskID0"><text x="125" y="225" id="knockout" fill="white">Cambridge</text></mask></defs><title>Chicago</title><desc>Chicago</desc>
<image style="mask:url(#maskID0);" width="600" height="400" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://i.imgur.com/R1zVKKL.jpg"></image></svg>
</div>
</div><!--END OF CONTAINER-->
答案 2 :(得分:-1)
就在这里。 (示例和无JS)
<!DOCTYPE html>
<html>
<head>
<style>
div {position: absolute;}
#container div {
background-color: lightblue;
border: 1px solid #333333;
width: 100px;
height: 100px;
opacity: 0.5;
}
div#myBox {
opacity: 1;
background-color: coral;
z-index: 1;
-webkit-animation: mymove 5s infinite linear; /* Chrome, Safari, Opera */
animation: mymove 5s infinite linear;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
50% {z-index: 5;}
}
/* Standard syntax */
@keyframes mymove {
50% {z-index: 5;}
}
</style>
</head>
<body style="position:absolute">
<p>The z-index property is <em>animatable</em> in CSS.</p>
<p><strong>Note:</strong> CSS Animations do not work in Internet Explorer 9 and earlier versions.</p>
<p>Gradually change the z-index property of "myBox" from 1, to 5, and back to 1:<p>
<div id="container">
<div id="myBox">myBox</div>
<div style="top:20px;left:20px;z-index:1;">z-index 1</div>
<div style="top:40px;left:40px;z-index:2;">z-index 2</div>
<div style="top:60px;left:60px;z-index:3;">z-index 3</div>
<div style="top:80px;left:80px;z-index:4;">z-index 4</div>
</div>
</body>
</html>