P83-前端基础动画效果-动画奔跑的小子练习

P83-前端基础动画效果-动画奔跑的小子练习

1.概述

这篇文章通过一个奔跑的少年练习动画效果

2.奔跑的小子

2.1.奔跑的小子图片

P83-前端基础动画效果-动画奔跑的小子练习_第1张图片

2.2.奔跑的小子代码


<html>
  <head>
    <meta charset="UTF-8">
    <title>奔跑的少年title>
    <style>
      .box {
      
        /* 设置单个图片的宽高 */
        width: 256px;
        height: 256px;
        margin: 0 auto;
        /* 设置背景图片 */
        background-image: url(./img/12/bg2.png);
        /* 设置动画运行方式:steps:步进方式,infinite:无限循环 */
        animation: run 1s steps(6) infinite;
      }
      /* 设置动画关键帧 */
      @keyframes run {
      
        from {
      
          background-position: 0 0;
        }

        to {
      
          /* 设置图片向左偏移量 */
          background-position: -1536px 0;
        }
      }
    style>
  head>
  <body>
    <div class="box">div>
  body>
html>

3.奔跑的小子效果

你可能感兴趣的:(最美前端,#,前端【H5+Css3】)