[英]How can I mimic this rotating text effect?
我正在研究一个新项目,我想学习如何在此站点上模拟文本效果
我熟悉CSS转换所涉及的向上旋转文本,但我还没有弄清楚它们是如何具有不同的文本字段的(例如,如何将其设置为在不同的单词之间循环的位置)
由于文本每隔几秒钟更改一次,因此检查该元素很有挑战性,而我寻找解决方案的尝试并未取得成果。
我并不需要解决这个问题。 如果有人能指出指导我的方向,该指南涵盖了他们如何循环使用不同单词的基本功能,将不胜感激。 谢谢!
您可以使用CSS3来实现。
演示: http : //jsfiddle.net/DerekL/8ZLTc/
我相信这就是您想要的效果。
This is <div>
<h3 class="front">FRONT</h3>
<h3 class="back">BACK</h3>
</div>.
h3 {
position: absolute;
margin: 0;
padding: 0;
color: #ff4056;
cursor: pointer;
}
div {
position: relative;
display: inline-block;
width: 170px;
height: 50px;
margin: 0;
padding: 0;
}
.front {
z-index: 2;
}
body > * {
vertical-align: text-bottom;
}
*建议的JavaScript :(使用Transit.js具有更好的可读性。还有jQuery。)
$(".back").css({
rotateX: '-180deg'
});
var words = [
"useful", "interesting", "lorem", "ipsum",
"stack", "overflow", "easter", "eggs"],
angle = 0;
setInterval(function (){
angle += 180;
$('div').transition({
perspective: '150px',
rotateX: '+=180deg'
}, 1000);
var currentB = "." + ((angle / 180) % 2 ? "front" : "back"),
current = "." + ((angle / 180) % 2 ? "back" : "front");
$(current).html(words[(Math.random() * 8) | 0]);
$("div").transition({
width: $(current).width(),
height: $(".front").height()
});
}, 1000);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.