53517

博客背景西游记

<!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 进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容。

来源:博客园

作者:藏大大

链接:https://www.cnblogs.com/1212dsa/p/11426063.html

Recommend