当前位置:首页 > 网站应用 > 正文内容

纯css实现文字音符跳动效果

cjw12310个月前 (11-24)网站应用1970

通过纯css实现文字音符跳动效果。点下面的运行可以查看效果!

<!doctype html><html>
    <head>
        <meta charset="utf-8">
        <title>纯CSS文字跳动音符效果</title>
        <style>
            html,
            body {
                width: 100%;
                height: 100%;
                background: #00ffac;
                background: -webkit-linear-gradient(45deg, #00ffac 0%, #0472FF 100%);
                background: -webkit-linear-gradient(45deg, #00ffac 0%, #0472FF 100%);
                background: linear-gradient(45deg, #00ffac 0%, #0472FF 100%);
                overflow: hidden;
                -webkit-font-smoothing: antialiased;
                display: -webkit-box;
                display: -webkit-flex;
                display: -ms-flexbox;
                display: flex;
                -webkit-box-pack: center;
                -webkit-justify-content: center;
                -ms-flex-pack: center;
                justify-content: center;
                -webkit-box-align: center;
                -webkit-align-items: center;
                -ms-flex-align: center;
                align-items: center;
            }

            h1 {height: 100px;}

            h1 span {
                position: relative;
                top: 20px;
                display: inline-block;
                -webkit-animation: bounce .3s ease infinite alternate;
                animation: bounce .3s ease infinite alternate;
                font-family: 'Titan One', cursive;
                font-size: 80px;
                color: #FFF;
                text-shadow: 0 1px 0 #CCC,                    0 2px 0 #CCC,                    0 3px 0 #CCC,                    0 4px 0 #CCC,                    0 5px 0 #CCC,                    0 6px 0 transparent,                    0 7px 0 transparent,                    0 8px 0 transparent,                    0 9px 0 transparent,                    0 10px 10px rgba(0, 0, 0, .4);
            }

            h1 span:nth-child(2) {
                -webkit-animation-delay: .1s;
                animation-delay: .1s;
            }

            h1 span:nth-child(3) {
                -webkit-animation-delay: .2s;
                animation-delay: .2s;
            }

            h1 span:nth-child(4) {
                -webkit-animation-delay: .3s;
                animation-delay: .3s;
            }

            h1 span:nth-child(5) {
                -webkit-animation-delay: .4s;
                animation-delay: .4s;
            }

            h1 span:nth-child(6) {
                -webkit-animation-delay: .5s;
                animation-delay: .5s;
            }

            h1 span:nth-child(7) {
                -webkit-animation-delay: .6s;
                animation-delay: .6s;
            }

            @-webkit-keyframes bounce {
                100% {
                    top: -20px;
                    text-shadow: 0 1px 0 #CCC,                        0 2px 0 #CCC,                        0 3px 0 #CCC,                        0 4px 0 #CCC,                        0 5px 0 #CCC,                        0 6px 0 #CCC,                        0 7px 0 #CCC,                        0 8px 0 #CCC,                        0 9px 0 #CCC,                        0 50px 25px rgba(0, 0, 0, .2);
                }
            }

            @keyframes bounce {
                100% {
                    top: -20px;
                    text-shadow: 0 1px 0 #CCC,                        0 2px 0 #CCC,                        0 3px 0 #CCC,                        0 4px 0 #CCC,                        0 5px 0 #CCC,                        0 6px 0 #CCC,                        0 7px 0 #CCC,                        0 8px 0 #CCC,                        0 9px 0 #CCC,                        0 50px 25px rgba(0, 0, 0, .2);
                }
            }
        </style>
    </head>
    <body>
        <h1>
            <span>c</span>
            <span>j</span>
            <span>w</span>
            <span>1</span>
            <span>2</span>
            <span>3</span>
        </h1>
    </body></html>


扫描二维码推送至手机访问。

版权声明:本文由追求完美发布,如需转载请注明出处。

本文链接:https://www.cjw123.com/blog/?id=138

分享给朋友:

相关文章

html meta标签屏蔽搜索引擎的用法

html页面中的 meta 标签可以用来识别搜索引擎的蜘蛛类型,可以规定meta标签所在的html页面是否被蜘蛛抓取,下面是这个meta标签的用法,大家可以借鉴一下。搜索引擎的 meta 标签的解析下面是meta标签对搜索引擎的解析<meta name='robot...

js文字定时向上滚动特效代码

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <t...

zblogphp二级目录建站,伪静态规则怎么写

如果你的 Z-BlogPHP 站点安装在二级目录中,需要使用伪静态技术来优化站点的 URL,并提升搜索引擎蜘蛛的抓取效率。下面是一个 nginx 的伪静态规则示例:# 子目录规则要排在前边; location /sub/ {    &n...

纯js实现文字自动变色效果

<!-- js实现变色文字 --> <div id="blink">     <strong>       ...

css3+html5特效制作闪烁的文字

<head><charset="utf-8" /> <style> @-webkit-keyframes flash {     0%{   &n...

瞌睡小鸟按钮特效

<!DOCTYPE html> <html lang="en">   <head>     <title>瞌睡小鸟按钮特效</title&g...

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。