我正在寻找一种显示一些标点符号加载“动画”的好方法。
我想要的是这样的:
This will display at second 1: "Waiting for your input."
This will display at second 2: "Waiting for your input.."
This will display at second 3: "Waiting for your input..."
This will display at second 4: "Waiting for your input...."
This will display at second 5: "Waiting for your input."
This will display at second 6: "Waiting for your input.."
This will display at second 7: "Waiting for your input..."
This will display at second 8: "Waiting for your input...."
等等。
我首先将 spans
中的点包围起来,并认为我可以使用 jquery 循环遍历它们并再显示一个,再显示一个,再显示一个,然后重置为 1。但是代码变得非常笨拙,所以我想知道你会怎么做?
最佳答案
纯 CSS 解决方案
HTML:
Waiting<span class="dots"><span>.</span><span>.</span><span>.</span></span> for more.
CSS:
@keyframes dots-1 { from { opacity: 0; } 25% { opacity: 1; } } @keyframes dots-2 { from { opacity: 0; } 50% { opacity: 1; } } @keyframes dots-3 { from { opacity: 0; } 75% { opacity: 1; } } @-webkit-keyframes dots-1 { from { opacity: 0; } 25% { opacity: 1; } } @-webkit-keyframes dots-2 { from { opacity: 0; } 50% { opacity: 1; } } @-webkit-keyframes dots-3 { from { opacity: 0; } 75% { opacity: 1; } } .dots span { animation: dots-1 1s infinite steps(1); -webkit-animation: dots-1 1s infinite steps(1); } .dots span:first-child + span { animation-name: dots-2; -webkit-animation-name: dots-2; } .dots span:first-child + span + span { animation-name: dots-3; -webkit-animation-name: dots-3; }
仅 WebKit 的替代方案
优点:没有嵌套标签。这意味着省略号可以作为内容
到 ::after
伪元素中。
HTML:
Waiting<span>...</span> for more.
CSS:
body { font-family: 'Roboto', sans-serif; font-size: 50px; } @-webkit-keyframes dots { 0% { background-position: 0px; } 100% { background-position: 50px; } } span { background: linear-gradient(to right, white 50%, black 50%); color: transparent; -webkit-background-clip: text; -webkit-animation: dots 1s infinite steps(4); padding-right: 40px; margin-right: -40px; }
关于javascript - 标点加载 "animation",javascript?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15382608/