色综合图-色综合图片-色综合图片二区150p-色综合图区-玖玖国产精品视频-玖玖香蕉视频

您的位置:首頁(yè)技術(shù)文章
文章詳情頁(yè)

前端 - css3動(dòng)畫(huà)怎樣對(duì)幀的理解?

瀏覽:118日期:2023-07-14 13:39:14

問(wèn)題描述

第一種:

@keyframes slow {0% { background-position: -0px -291px;}25% { background-position: -602px -0px;}50% { background-position: -302px -291px;}75% { background-position: -151px -291px;}100% { background-position: -0px -291px;} } /*動(dòng)畫(huà)切換的方式是一幀一幀的改變*/-webkit-animation-timing-function: steps(1, start);

第二種:

$spriteWidth: 140px; // 精靈寬度 @keyframes run { 0% { background-position: 0 0; } 100% { background-position: -($spriteWidth * 12) 0; // 12幀 }}#sprite { width: $spriteWidth; height: 144px; background: url('../images/sprite.png') 0 0 no-repeat; animation: run 0.6s steps(12) infinite;}

1,什么叫“一幀一幀的改變”, steps(1, start);該如何理解?2,第二種直接“-($spriteWidth * 12) 0”我就看不懂了,為什么這樣寫(xiě)?

問(wèn)題解答

回答1:1. 什么叫“一幀一幀的改變”, steps(1, start);該如何理解?

animation-timing-function 中 steps 的用法參見(jiàn)這篇

steps 詳解

2. 第二種直接“-($spriteWidth * 12) 0”我就看不懂了,為什么這樣寫(xiě)?

首先顯然這是 Scss 文件(一種 css 預(yù)編譯文件)

定義了一個(gè)變量:$spriteWidth

-($spriteWidth * 12) 這句就是一個(gè)運(yùn)算呀 => -(140px*12)

回答2:

1: steps(1, start)我在MDN上剛好看到一個(gè)解釋

This keyword represents the timing function steps(1, start). Using this timing function, the animation jumps immediately to the end state and stay in that position until the end of the animation.

就是說(shuō)你的動(dòng)畫(huà)幀一開(kāi)始就馬上跳到結(jié)束了,所以你看見(jiàn)的是keyframes里面5個(gè)幀一幀一幀地切換。如果沒(méi)有steps(1, start),就會(huì)是一個(gè)平滑移動(dòng)的效果。

2: -($spriteWidth * 12)應(yīng)該是指把你這個(gè)動(dòng)畫(huà)分成12幀,每一幀你的背景右移-($spriteWidth * 12)這個(gè)長(zhǎng)度

標(biāo)簽: CSS
相關(guān)文章:
主站蜘蛛池模板: 久久亚洲国产高清 | 国产在线观a免费观看 | 国产高清av在线播放 | 99国产精品视频久久久久 | 久久亚洲精品中文字幕 | 亚洲精品国产成人专区 | 日本人一级毛片免费视频 | 999国产精品亚洲77777 | 日韩欧美一级 | 被老外玩爽的中国美女视频 | 台湾香港澳门三级在线 | 欧美成人亚洲国产精品 | 久久九九亚洲精品 | 一级一级毛片免费播放 | 91精品国产一区二区三区左线 | 欧美性活一级视频 | 国产精品国产三级国产在线观看 | 久久88香港三级台湾三级中文 | 亚洲综合精品一二三区在线 | 91大神大战丝袜美女在线观看 | 日本xxxxx久色视频在线观看 | 男女男精品视频在线播放 | 在线播放高清国语自产拍免费 | 久爱综合 | 免费看黄网址 | 国产α片 | 亚洲香蕉久久一区二区三区四区 | 国产亚洲精品成人久久网站 | 国产成人综合精品 | cao在线| 免费看欧美毛片大片免费看 | 韩国免费一级成人毛片 | 男人透女人超爽视频免费 | 人与禽的免费一级毛片 | 一级特级毛片免费 | 中文字幕日韩欧美一区二区三区 | 欧美一及 | 免费国产a | www.黄色大片| 视频在线色| 国产精品亚洲二区 |