Java教程

雪碧图米兔练习

本文主要是介绍雪碧图米兔练习，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

米兔动画练习

素材图片

 

 

 

<!DOCTYPE html>
​
<html lang="en">
​
<head>
​
    <meta charset="UTF-8">
​
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
​
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
​
  <title>米兔动画</title>
​
    <style>
​
•    .box1{
​
•      width: 132px;
​
•      height: 271px;
​
•      margin: 0 *auto*;
​
•      background-image: url(./img/米兔.png);
​
•      animation: run 1s steps(4) *infinite*;
​
•    }
​
​
​
•    @keyframes run{
​
•      from{
​
•        background-position: 0 0;
​
•      }
​
•      to{
​
•        background-position: -528px 0;
​
•      }
​
•    }
​
  </style>
​
•    
​
</head>
​
<body>
​
    <div class="box1"></div>
​
</body>
​
</html>

infinite 无穷（使动画连续起来）

steps（n）有几张图片 n就代表几，是动画连贯，不然会像一组图片横向播放，看起来很不舒服de！

animation 呈现动画效果

这篇关于雪碧图米兔练习的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航