每个字母都有一个CSS hover事件。当悬停时,它会增大尺寸,当鼠标离开时,它会恢复正常大小。
我想展示相同的效果在页面加载时。
当页面加载时,“H”将缩放并且“E”,然后是“L”......一个接一个地。
以下是我尝试过但没有成功的 - http://jsfiddle.net/vrm0bve1/
HTML:
<span class="char1 animate">H</span>
<span class="char2 animate">E</span>
<span class="char3 animate">L</span>
<span class="char4 animate">L</span>
<span class="char5 animate">0</span>
CSS
.animate {
font-size:14px;
-webkit-transition: font-size 1s;
-moz-transition: font-size 1s;
-ms-transition: font-size 1s;
-o-transition: font-size 1s;
transition: font-size 1s;
}
.animate:hover {
font-size: 3.5em;
}
JS
$(".char1").trigger('mouseover').trigger('mouseleave');
$(".char2").trigger('mouseover').trigger('mouseleave');
$(".char3").trigger('mouseover').trigger('mouseleave');
$(".char4").trigger('mouseover').trigger('mouseleave');
$(".char5").trigger('mouseover').trigger('mouseleave');