gpt4 book ai didi

css - 是否有可能仅使用 CSS/JavaScript 使一堆文本段落按特定顺序显示消失?

转载 作者:行者123 更新时间:2023-11-28 17:06:54 24 4
gpt4 key购买 nike

我需要在有限的时间内显示一个文本,然后在同一个地方显示另一个文本等等,No Moving只是AppearanceDisappearance 所有及时的文本。

<!DOCTYPE html><html><head>
<style>
/* Safari 4.0 - 8.0 */@-webkit-keyframes example {from {background-color:
red;}to {background-color: yellow;}}
/* Standard syntax */@keyframes example {from {}to {background-color:
yellow;}}
</style></head>
<body>
<div style="width: 300px;
height: 300px;
background-color: black;
-webkit-animation-name: example; /* Safari 4.0 - 8.0 */
-webkit-animation-duration: 3s; /* Safari 4.0 - 8.0 */
animation-name: example;
animation-duration: 3s;">1st Text</div>
<script>
var i=1;
while(i<7){document.write("d");i++;}
</script>
</body></html>

最佳答案

我提供了一个我认为可以满足您需要的实时示例。

'use strict';
window.addEventListener('DOMContentLoaded', function() {
setTimeout(function() {
var wrapper = document.getElementById('wrapper');
if (typeof wrapper.classList !== 'undefined') {
wrapper.classList.add('slide-items');
}
else {
var curentclass = wrapper.className;
currentclass += ' slide-items';
wrapper.className = currentclass;
}
}, 2000);
});
.wrapper {
position: relative;
overflow: hidden;
}

.wrapper > p {
padding: 12px 7px;
background-color: #ddd;
color: #000;
position: relative;
transition-timing-function: ease;
transition-duration: 0.6s;
opacity: 0;
}

.delay1 {
transition-delay: 0.6s;
}

.delay2 {
transition-delay: 1.2s;
}

.delay3 {
transition-delay: 1.8s;
}

.delay4 {
transition-delay: 1.2s;
}

.wrapper.slide-items-in-from-bottom > p {
-ms-transform: translateY(100%);
-webkit-transform: translateY(100%);
transform: translateY(100%);
}

.wrapper.slide-items > p {
opacity: 1;
-ms-transform: none;
-webkit-transform: none;
transform: none;
}
<div class="wrapper slide-items-in-from-bottom" id="wrapper">
<p>This is paragraph one</p>
<p class="delay1">This is paragraph two</p>
<p class="delay2">this is paragraph three</p>
<p class="delay3">this is paragraph four</p>
</div>

关于css - 是否有可能仅使用 CSS/JavaScript 使一堆文本段落按特定顺序显示消失?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48920699/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com