steps函数--参数意思和用法
图片解释如下,参数意思和用法在代码的注释中
所引用图片共7帧,如下:
尺寸为200*
1400,所以设置div为200*
200,分为7帧,除去展示帧,需六次步骤跳转,原图如下:
代码:
参数如果是start,就是在开始的时候改变,如果是end,就是在结束的时候改变.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Step 步进函数</title>
<style>
.hello {
width: 200px;
height: 200px;
border: 2px solid #ccc;
background: url(images/step-animation.png) no-repeat 0 -1200px;
-webkit-transition: background-position 0s -.3s steps(6, start);
/*
start(不匀速,每帧都是直接跳到每帧结尾处等待每帧时间结束):以左侧端点为起点
五花漏: 亲测好用 !
叶若梦: vue.config.js中的选项无效:不允许使用“externals”
杨九日: 明白!
weixin_43583148: let const 存在变量提升,不过因为暂时性死区的原因导致无法在声明前使用
Eda_月白秋心: 終於懂了,thx