唐僧师徒西天取经

最新推荐文章于 2024-08-02 10:25:30 发布

张一峰615

最新推荐文章于 2024-08-02 10:25:30 发布

阅读量167

点赞数

文章标签： html

本文链接：https://blog.csdn.net/zhang20150615/article/details/119038361

版权

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<!--头部标签-->
<head>
    <meta charset="UTF-8">
    <title>造梦西游</title>
<!--  style 给网页中的标签装饰，CSS样式（层叠样式表） -->
  <style>
      /*标签选择器
      在给标签设置默认样式的时候可以选择标签选择器
      */
      body{
          /*外边距的样式*/
          margin: 0;
          background-image: url("images/背景图.webp");
      }
      /*class选择器*/
    .footer{
        /*宽度 像素为单位*/
        width: 760px;
        /*高度 像素为单位*/
        height: 240px;
        /*背景颜色 颜色值（颜色单词）
        background-color: #b1f5cc;*/
        /*上下外边距    左右（auto自动相等）*/
        margin: 300px auto;
    }
    .west{
        /*浮动  向左浮动*/
        float: left;
        /*背景重复 平铺     no-repeat就是不重复不平铺*/
        background-repeat: no-repeat;
        /*百分比是参考当前元素的父元素计算的*/
        width: 25%;
        height: 100%;
        /*背景位置 Y方向 居中*/
        background-position-y: center;
    }
        .west1{
            background-image: url("images/swk.png");
            /*播放动画 名称  时间  脚步（8） 循环播放*/
            animation: swk 1.4s steps(8) infinite;
            /*整个动画走1600px 走8步  每一步是200px  加上animation后 这200px是瞬间到达的*/
        }
          .west2{
              background-image: url("images/zbj.png");
              animation: zbj 1.4s steps(8) infinite;
          }
          .west3{
              background-image: url("images/ts.png");
              animation: ts 1.4s steps(8) infinite;
          }
          .west4{
              background-image: url("images/ss.png");
              animation: ss 1.4s steps(8) infinite;
          }
          /*关键帧（画面）  动画名称（见名知意）*/
          @keyframes swk{
              /*动画开始的画面*/
              0%{
                  /*背景位置 X方向  开始的画面是0px*/
                  background-position-x: 0px;
              }
              /*结束的画面  图片宽为1600像素 所以为-1600px*/
              100%{
                  background-position-x: -1600px;
              }
          }
          @keyframes zbj{
              0%{
                  background-position-x: 0px;
              }
              100%{
                  background-position-x: -1600px;
              }
          }
          @keyframes ts{
              0%{
                  background-position-x: 0px;
              }
              100%{
                  background-position-x: -1360px;
              }
          }
          @keyframes ss{
              0%{
                  background-position-x: 0px;
              }
              100%{
                  background-position-x: -1680px;
              }
          }
          /*
          CSS3动画->只需要一切关键的画面  开始的画面 跟结束的画面
          传统动画->动画片 动态效果->有很多张静止连续的画面连续播放
          */

  </style>
  <!--身体标签-->
</head>
<body>
<div class="footer">
    <div class="west west1"></div>
    <div class="west west2"></div>
    <div class="west west3"></div>
    <div class="west west4"></div>
</div>
</body>
</html>

张一峰615

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
唐僧师徒西天取经

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>造梦西游</title> <style> /*标签选择器在给标签设置默认样式的时候可以选择标签选择器 .
复制链接

扫一扫