西游记

  <!doctype html>
  <html lang="en">
  <head>
  <meta charset="UTF-8">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>我是诚诚</title>
  <style type="text/css">
   
   
  body{
  background-image:url("images/bac.webp") ;
  margin:0;
  }
   
   
  .footer{
   
  width:760px;
  height:240px;
  margin:350px auto 0 auto;
  position: relative;
  top:-3px;
  }
   
   
  .west{
  float:left;
  width:190px;
  height:240px;
  /*background-color:#ff6666;*/
  background-repeat:no-repeat;
  }
   
   
  .west:nth-of-type(1){
  background-image:url("images/west_01.png");
  animation: houzi 1.4s steps(8) infinite;
  }
  .west:nth-of-type(2){
  background-image:url("images/west_02.png");
  animation: zhu 1.4s steps(8) infinite;
  }
  .west:nth-of-type(3){
  background-image:url("images/west_03.png");
  animation: heshang 1.4s steps(8) infinite;
  }
  .west:nth-of-type(4){
  background-image:url("images/west_04.png");
  animation: shazi 1.4s steps(8) infinite;
  }
   
   
  @keyframes houzi
  {
  from{background-position-x: 0px;}
  to{background-position-x: -1600px;}
  }
  @keyframes zhu
  {
  from{background-position-x: 0px;}
  to{background-position-x: -1600px;}
  }
  @keyframes heshang
  {
  from{background-position-x: 0px;}
  to{background-position-x: -1360px;}
  }
  @keyframes shazi
  {
  from{background-position-x: 0px;}
  to{background-position-x: -1680px;}
  }
  /*-------------------------------------------------------------------------------------------*/
   
   
  .uloo /*表单*/
  {
  width: 760px;
  list-style-type:none;
  height:30px;
  position:relative;
  font-size:18px;
  margin: 0 0 100px 0;
  padding: 0;
  font-family:arial, verdana,sans-serif;
  left:34%;
   
  }
   
   
   
   
  .uloo li.lioo
  {
  display:block;
  height: 30px;
  float:left;
  position: relative;
  padding-left:40px;
  background-image:url("images/favicon.ico") no-repeat ;
  background-position-x:50px;
  background-position-y:41px;
  }
   
   
  .uloo li a.lioo_link
  {
  display: block;
  float:left;
  height: 30px;
  line-height: 20px;
  color:#49A9DE;
  text-decoration:none;
  padding: 5px 0 0 18px;
  cursor:pointer;
   
   
  </style>
  </head>
   
  <body>
  <div class="footer">
  <div class="west"></div>
  <div class="west"></div>
  <div class="west"></div>
  <div class="west"></div>
  </div>
   
   
   
  <ul class="uloo">
   
  <li class="lioo"><a href="#" class="lioo_link">微信</a></li>
  <li class="lioo"><a href="#" class="lioo_link">易信</a></li>
  <li class="lioo"><a href="#" class="lioo_link">新浪微博<a></li>
  <li class="lioo"><a href="#" class="lioo_link">更多</a></li>
  </ul>
  </body>
  </html>
posted @ 2019-03-26 23:03  星星0828  阅读(190)  评论(0)    收藏  举报