CSS3实现的字符串逐字高亮效果代码实例_html/css_WEB-ITnose

css3实现的字符串逐字高亮效果代码实例:
本章节分享一段代码实例,它实现了字符串逐字高亮效果。
代码如下:

  1. <span class="pun">蚂蚁部落</span>html, body{ background-color: #aaaaaa;}p span{ font-family: 'Comic Sans MS'; animation: loading 1.4s; -moz-animation: loading 1.4s; -webkit-animation: loading 1.4s; animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite;}@keyframes loading{ 0% {color: black;} 75% {color: black;} 100% {color: white;}}@-moz-keyframes loading { 0% {color: black;} 75% {color: black;} 100% {color: white;}}@-webkit-keyframes loading{ 0% {color: black;} 75% {color: black;} 100% {color: white;}}.word1{ animation-delay:-1.2s; -webkit-animation-delay:-1.2s;}.word2{ animation-delay:-1s; -webkit-animation-delay:-1s;}.word3{ animation-delay:-0.8s; -webkit-animation-delay:-0.8s;}.word4{ animation-delay:-0.6s; -webkit-animation-delay:-0.6s; }.word5{ animation-delay:-0.4s; -webkit-animation-delay:-0.4s;}.word6{ animation-delay:-0.2s; -webkit-animation-delay:-0.2s; }.word7{ animation-delay:0s; -webkit-animation-delay:0s; }

    L O A D I N G

登录后复制

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=17250

更多内容可以参阅:http://www.softwhy.com/shili/

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。

点点赞赏,手留余香

给TA打赏
共0人
还没有人赞赏,快来当第一个赞赏的人吧!
    编程技术

    CSS3之让背景图片全部显示_html/css_WEB-ITnose

    2025-3-29 9:58:10

    编程技术

    深入理解伪元素_html/css_WEB-ITnose

    2025-3-29 9:58:22

    0 条回复 A文章作者 M管理员
    欢迎您,新朋友,感谢参与互动!
      暂无讨论,说说你的看法吧
    个人中心
    购物车
    优惠劵
    今日签到
    私信列表
    搜索