纯 CSS 实现打字机效果
本文最后更新于 749 天前,其中的信息可能已经有所发展或是发生改变。

经常看到别人网站上的打字效果,但无奈经常遇见被不可逆混淆的 JS 代码导致无法借鉴学习,效果是挺不错,但看不到 JS 源码和就很无奈。其实我们可以不用一行 JS 代码,只用纯 CSS 实现打字效果。

CSS 代码

CSS 如下

.print{
    width:1000px;
    white-space:nowrap;
    overflow:hidden;
    -webkit-animation: dy 3s steps(60, end) infinite;
    animation: dy 3s steps(50, end) infinite;
}

@-webkit-keyframes dy{
    from{
        width:0;
    }
}
@keyframes dy{
    from{
        width:0;
    }
}

调用方式

<p class="print">不用一行 JS 的纯 CSS 打字机效果</p>

DEMO

不用一行 JS 的纯 CSS 打字机效果

效果见上?

暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
Bmoji
热词系列
TVmoji
小电视
2233娘
那兔
洛天依
红小豆
上一篇
下一篇