2

我在我的网站上放置了几个链接，放在 div 和 span 标签内，当将鼠标悬停在它们上面时，它们会以 3d 外观翻转以显示新消息。看这里，翻过第一段文字中的链接。它工作正常，但我有一些问题。显示的文本有点模糊，我无法修复它，如果我包含一个比我的链接文本长几个字符的显示消息，它将切断它而不是扩展它。我认为这只发生在“溢出”声明中。想法有人吗？

的HTML：

<a href="/portfolio" title="View Our Portfolio" class="roll-link">
<span data-title="Check It Out ...">Our Portfolio</span></a>

CSS：

/* ROLL LINKS */

.roll-link {
display: inline-block;
overflow: hidden;
vertical-align: top;
-webkit-perspective: 600px;
-moz-perspective: 600px;
-webkit-perspective-origin: 50% 50%;
-moz-perspective-origin: 50% 50%;
text-decoration:underline;
}

.roll-link:hover {
text-decoration:none;
}

.roll-link span {
display: block;
position: relative;
padding: 0 2px;
-webkit-transition: all 400ms ease;
-moz-transition: all 400ms ease;
-webkit-transform-origin: 50% 0%;
-moz-transform-origin: 50% 0%;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
}
.roll-link:hover span {
background: #3887be;
-webkit-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
-moz-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
}

.roll-link span:after {
content: attr(data-title);
display: block;
position: absolute;
left: 0;
top: 0;
padding: 0 2px;
color: #fff;
background: #3887be;
-webkit-transform-origin: 50% 0%;
-moz-transform-origin: 50% 0%;
-webkit-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
-moz-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
}

编辑：我在我的网站上添加了指向它的链接，这是要弄乱的标记。我看到它在 chrome、safari 和 firefox 中都可以在 osx 上运行。

4

2 回答 2

2

我认为没有真正的解决方案，但此时，您可以使用text-shadowandtext-stroke属性。（对中风有一些帮助）。

Webdesignerdepot也使用这种链接视图，他们遇到了与我看到的相同的问题。可悲的是，数据标题不是真实/真实的文本，因此它总是会模糊（除非浏览器开发人员对其进行处理），并且如果它比真实文本长，它将总是被剪切。

于 2013-04-16T10:43:04.650 回答
2

前段时间我用 css 做了这样的事情。相同的属性但不同的设置。希望它能解决你的模糊问题。这里的教程 - http://www.howtokickblogger.com/2012/11/post-links-hover-effect.html

jsFiddle 上的演示 - http://bit.ly/14AHwcc

但是，似乎没有解决方案可以在显示时删除多余的单词。

于 2013-08-11T19:33:25.743 回答