如何翻转效果添加到文本的地图

好了，所以，我有这样的地图：如何翻转效果添加到文本的地图

the map

我需要添加一个过渡效果的国名（可以用做简单：悬停在CSS中），但我找不到一个很好的方法来选择文本的一部分，所以如果我悬停“欧洲”，它只是突出欧洲而不是每个字。

图像是在PSD中，所以我有权访问底图+图层。我怎么能解决这个问题？我正在考虑在HTML中添加所有文本，并将其设置为CSS（旋转，间距等），这将需要很长时间，而且在适应不同分辨率时也会很痛苦。

你能主人建议什么吗？谢谢:)

参考图像（文本所做的红只是为了表明有什么东西在那里，这将是翻转效果）： enter image description here

来源

2015-04-06 drbernardi

你到目前为止尝试过什么？请添加一些相关的代码，至少上传图片并创建一个小提琴。要求“做到最好的方式”（意见）太宽泛，不符合SO标准。 – skobaljic 2015-04-06 08:48:23

我把图片放在帖子的底部，这是禁止的吗？我认为我们可以使用它们托管在SO服务器上。 [这里]（https://jsfiddle.net/34av7k07/）是我在哪里，基本上我不知道。在做HTML/CSS之前，我想过要问这里，我担心这可能会导致糟糕的结果。 – drbernardi 2015-04-06 08:58:23

在html上添加文本并给出这种风格的确会是一种痛苦和危险，因为字体在diff bwosers上经常发生变化。我认为最好的方法是制作每个文本的图像（我将使用sprite）并将图像放置在地图上（文本容器大小和绝对位置始终以％显示，如果您希望它响应）。当然这需要时间。没有简单的方法去做你想做的事。 – 2015-04-06 09:13:19

这里有一个想法：

body { 
 
    position: relative; 
 
} 
 
img { 
 
    width: 100%; 
 
} 
 
.states { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    display: none; 
 
} 
 

 
.map-container { 
 
    width:960px; 
 
    transform-origin: 0px 0px; 
 
    transform: scale(0.8); 
 
} 
 

 
a.state-name { 
 
    position:absolute; 
 
} 
 

 
a.state-name:hover { 
 
    background-image: url("http://i.stack.imgur.com/aB42n.gif"); 
 
} 
 
a#europe { 
 
    background-position: -420px -140px; 
 
    left: 420px; 
 
    top: 140px; 
 
    height: 45px;  
 
    width: 210px; 
 
}

<div class="map-container"> 
 
<img src="http://i.stack.imgur.com/319c9.gif" /> 
 
<img src="http://i.stack.imgur.com/aB42n.gif" class="states" /> 
 
<a id="europe" class="state-name" href="#"></a> 
 
</div>

备注：

您需要定义每个国家命名a标签和适当的CSS规则：background-position, width, height, left, top像#europe例如
.map-container - 必须具有相同的宽度与原始图像为960px
你需要使用JS或CSS如果您需要调整地图大小，则转换属性以缩放整个.map-container，否则悬停元素将错位。
注重css transform性能

这是一个实验性的技术。由于此技术的规范尚未稳定，请检查兼容性表以找到适用于各种浏览器的正确前缀。另请注意，随着规范的变化，实验技术的语法和行为在未来版本的浏览器中可能会发生变化。

来源

2015-04-06 10:15:35 AndreiDMS

如何翻转效果添加到文本的地图

回答

相关问题