无法设置html过渡效果,html – CSS3过渡显示无阻止过度滚动
我假設你的彈出窗口是絕對定位的,所以你可以做以下事情：
>隱藏時,將彈出窗口設置為巨大的負值.這會將其移出屏幕并擺脫滾動條.
>在懸停時,將頂部設置為正確的值并轉換不透明度值.
>確保CSS轉換規(guī)則僅適用于opacity屬性.
HTML
Popup go now
My cat's breath smells like cat food...
CSS
.popup {
position: absolute;
top: -2000px;
opacity: 0;
transition: opacity 1s ease-in-out;
}
a:hover + .popup,.popup:hover {
top: 30px;
opacity: 1;
}
這是上面的@L_502_2@.
更新：要添加左側擺動并清理鼠標移動動畫,您可以使用以下代碼：
.popup {
position: absolute;
top: -2000px;
width: 300px;
left: 0;
opacity: 0;
/* Animate opacity,left and top
opacity and left should animate over 1s,top should animate over 0s
opacity and left should begin immediately. Top should start after 1s. */
transition-property: opacity,left,top;
transition-duration: 1s,1s,0s;
transition-delay: 0s,0s,1s;
}
a:hover + .popup,.popup:hover {
top: 30px;
left: 30px;
opacity: 1;
/* All animations should start immediately */
transition-delay: 0s;
}
它這樣做如下：
>指定了多個屬性的動畫(不透明度,左側,頂部).
> transition-delay會阻止頂部值被更改,直到不透明度和左側動畫完成為止.這里的訣竅是,當元素為：懸停時,沒有延遲(不透明度,左側和頂部動畫全部一次開始).但是一旦：懸停不再有效,頂級動畫在開始前等待1秒.這給了不透明度并留下足夠的時間來完成.
總結
以上是生活随笔為你收集整理的无法设置html过渡效果,html – CSS3过渡显示无阻止过度滚动的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 宏光MINI EV压力山大！北汽元宝正式
- 下一篇： CSS 基本样式