博客背景西游记 | 易学教程

博客背景西游记

<!DOCTYPE html>
<html lang="zh">

    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>西游记</title>
        <style type="text/css">
            /*
             * 
             */
            .bajie {
                position: absolute;
                top: 72px;
                right: 388px;
                /*background: url(img/o_bajie.png) 0 0 no-repeat;*/
                background: url(https://images.cnblogs.com/cnblogs_com/1212dsa/1534470/o_o_bajie.png) 0 0 no-repeat;
                z-index: 999999;
                width: 200px;
                height: 180px;
                animation: bjzou 1s steps(8) infinite;
                -webkit-animation: bjzou 1s steps(8) infinite
            }
            
            @keyframes bjzou {
                to {
                    background-position: -1600px 0;
                }
            }
            
            @-webkit-keyframes bjzou {
                to {
                    background-position: -1600px 0;
                }
            }
            
            @-moz-keyframes bjzou {
                to {
                    background-position: -1600px 0;
                }
            }
            
            @-o-keyframes bjzou {
                to {
                    background-position: -1600px 0;
                }
            }
            /*
             * 
             */
            .tangseng {
                position: absolute;
                top: 40px;
                right: 290px;
                /*background: url(img/o_tangseng.png) 0 0 no-repeat;*/
                background: url(https://images.cnblogs.com/cnblogs_com/1212dsa/1534473/o_o_tangseng.png) 0 0 no-repeat;
                z-index: 999999;
                width: 170px;
                height: 240px;
                animation: tszou 1s steps(8) infinite;
                -webkit-animation: tszou 1s steps(8) infinite;
                -moz-animation: tszou 1s steps(8) infinite;
                -o-animation: tszou 1s steps(8) infinite;
            }
            
            @keyframes tszou {
                to {
                    background-position: -1360px 0;
                }
            }
            
            @-webkit-keyframes tszou {
                to {
                    background-position: -1360px 0;
                }
            }
            
            @-moz-keyframes tszou {
                to {
                    background-position: -1360px 0;
                }
            }
            
            @-o-keyframes tszou {
                to {
                    background-position: -1360px 0;
                }
            }
            /*
             * 
             */
            .shaseng {
                position: absolute;
                top: 72px;
                right: 116px;
                /*background: url(img/o_shaseng.png) 0 0 no-repeat;*/
                background: url(https://images.cnblogs.com/cnblogs_com/1212dsa/1534472/o_o_shaseng.png) 0 0 no-repeat;
                z-index: 999999;
                width: 210px;
                height: 200px;
                animation: sszou 1s steps(8) infinite;
                -webkit-animation: sszou 1s steps(8) infinite;
                -moz-animation: sszou 1s steps(8) infinite;
                -o-animation: sszou 1s steps(8) infinite;
            }
            
            @keyframes sszou {
                to {
                    background-position: -1680px 0;
                }
            }
            
            @-webkit-keyframes sszou {
                to {
                    background-position: -1680px 0;
                }
            }
            
            @-moz-keyframes sszou {
                to {
                    background-position: -1680px 0;
                }
            }
            
            @-o-keyframes sszou {
                to {
                    background-position: -1680px 0;
                }
            }
            
            /*
             * 悟空
             */
            .wukong {
                position: fixed;
                right: 0;
                bottom: 200px;
                z-index: 999999;
                animation: mymove 5s infinite ease-in-out;
            }
            
            @keyframes mymove {
                0% {
                    bottom: 200px;
                }
                50% {
                    bottom: 250px;
                }
                100% {
                    bottom: 200px;
                }
            }
        </style>
    </head>

    <body>
        <div class="bajie">
        </div>
        <div class="tangseng"></div>
        <div class="shaseng"></div>
        <div class="wukong">
            <img style="width: 100px; height: 100px;" src="https://images.cnblogs.com/cnblogs_com/1212dsa/1521225/o_o_wukong.png"/>
        </div>
    </body>

</html>

如右上角

原文发布时间为：2019年08月28日
原文作者：李鹏泽
如需转载请联系原作者

如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件至：yqgroup@service.aliyun.com 进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容。