前端实现抖音功能

然后呢，我们来做这么一种效果，通过补肩呢，来做一个小人物奔跑的一个效果，咱们以前的动画片是不是都是这么画出来的？然后呢，按照一定速度播放，是不是才形成一个小动画呀？大家看一下，我们这是一个小素材啊，这个小图片呢，一百四，我建一个一百四十像素的一个盒子 放进去就行了。来，我们讲一下动画的原理啊，按照一定速度的播放，你的目光不要看别的，就只看盒子内就行了，他作为这个盒子的背景啊，是不是只能在盒子内显示啊？你看我按照一定的速度在播放，你会发现这个小人物在里面是不同的形态，那这个时候呢，他在走起来的时候，是不是发现就相当一个奔跑的一个效果啊， 所以说他的原理是这个样子，拿一个盒子呀，把作为背景图片，让图片动起来是不就行了？好，我现在是不是要准备一个小盒子了，还让我们叫他点 box， 点 box 准备好宽高数个是一百四 style 啊，走起啊，点 box， 他的宽度是一百四十 px， 高度也是一个一百四十 e g c 啊。然后呢， 我下去加个粉色，确认一下，这是有的，这个盒子是不是也有了，不是让他做一个动画效果呀，哎，先添加这个图片啊，他不是用的这个，而是用的一张背景图。好，现在呢，我家是白开图让的 rl 点杠 metize 下面叫做什么背景点 p n g noga rep 的没问题吧？ 一个小人是不是出来了，我需要把这个背景图是不连续不断的做动画就行了。一个盒子插入这张图片左对齐还是右对斜？这左对齐是第一个图啊，所以是个单脚。发现了吗？是个单脚吧，但是呢，我让我这个图是不是快速的播放就行了， 也就说我说动的是背景图。背景图片的位置啊，背景图片是通过什么来移动的？说背景位置啊那这个图我们来看一看啊这个图是多宽啊。幺六八零幺六八零宽也就说我让他往左边走一千六百八十像素我要动背景位置然后呢我要做动画。是不是要动画去来自动播放呀。好，动画 使用数分两步先去定义动画。跟这个小人奔跑不需要我鼠标盯过。那他一直在跑啊。 at key dreams 我叫 moo 行不行。两个状态，气质状态和结束状态。可以哦， from to from 和小兔数就可以了。 from to 啊 好， fram 从哪个位置其 fram 是可以省掉的哎，但是我们写上吧传丝 fom 传丝类的 x 零像素啊。不不不错了大哥框的 c 神不是零零啊，因为我们用的是这个图片这个图片从零是不是走到多少就行了。然后 to 走到哪一千六百八十像素对不对啊？ 从右往左走啊，你站在 x 轴的角度来说是不是往左走是负值啊，所以说这个地方一定是负的一千六百八十像素。讲到这能不能听懂动画写好了之后只是定义动画要不要调用千万别忘了好吗。你还没告 人家到底哪个盒子用呢啊调用动画爱你们审然后呢，某上秒来个三秒可不可以啊好无限循环并分内的保存。小伙伴跟我来看我们会发现有个问题啊，这压根就不像在跑啊，这像在滚是吧？其实呢，我们会发现用我们这种普洁动画是不合， 是的，按正常的情况，他应该是这个样子，应该是哒哒哒哒，我想要的是不是这个样子？那我们就用竹针动画，其实啊，动画里面是有分两种动画的，一种叫做竹针动画，一种呢，我们叫做 间动画，这个就是一秒钟动一次的。这种呢，我们称之为逐真动画，这种哎哒哒哒一直在走的这种，这个呢，我们称之为补尖动画。逐真动画特别适合于做这种背景图片的变化。那逐真动画怎么来做呢？ 第一个，这个是不变的，为什么是一六八零呢？因为我们这个图的长度是一六八零，他要走完第二步，默认的他有一个叫做速度曲线，叫做 easy。 默认的速度曲线是不是叫 easy 呀？ 是呢，你写完之后呢，效果是不好看的，我要把它改成逐帧动画。逐帧动画是用 dumps， 这的意思就是我这个动画分比 完成这个 step 就是不的意思，取决于这个图里面有几个小人，好数一数一共有几个十二，那我们二话不说把 steps 改成多少 十二，这么再来看，能看明白了吗？这就是可以来这么慢慢奔跑了。老师，这费劲的，你干脆做个这幅动画不就行了吗？要比这幅动画好在什么地方呢？他这个奔跑的速度是可调的，这一幅动画 一旦写完无法更改，而我们这个取决于这个时间，你改成一个点三 s， 你看，然后我改成个音走着，这速度是不是就流畅一些了？是。

这个效果会稍微的复杂一点点啊，只要你一个会了，这个页面应该没什么难度了，除了这个萝卜图，后面调个小插件调过来搞搞定。那么这个案例呢，会用到什么呢？第一个有没有图片的放大和缩小？用到了什么缩放 ligo 的，当我数了一经过之后呢？你发现有没有这个颜色比这个颜色稍微的深一点点啊？上面颜色浅，下面颜色深是不渐变呀。 伙伴们有没有看到这个小箭头用到了什么字体图标？ ok 啊，那这个的话你用移动是不是也没问题啊？我们把这个案例来进行手写一下啊， 我们先去分析分析这个效果应该怎么去做。首先是不是肯定有一个大盒子啊？一个图片是不是啊？图片是不是回放大俩了对不对？还有一个，有没有注意这个黑色盒子，黑色盒子是不仨了， 这一块，这都是一个盒子就行哎，因为他是一起走的，发现没有四个盒子是不可以做出来的。首先我们是不是要知道这个大盒子是多大的呀？找到这个盒子看一下，四四六和三幺四，走起起一个好听 名字还是 box， 大家好走起啊。这时候因为大码比较多，这句话是不是要写上了？ m 零加 p 零这样子加 box 杠三已经是不是他就行了？首先我得写上去再说啊。然后呢，点 box 指定他大小啊，宽是多大？四四六吧，加高度是多少？三幺四。首先把盒子写出来，我的个人习惯是先看到这个盒子我才放心， 右键打开已经有了。好，有了之后呢，我们就要把它注视起来是不往里面要丢一张图片我就不扒了，在我们素材里面有有有个类似的 一二三，发现没有，所以我们 i m g 过起来是点杠 in medi 下面的一点 t p g 没问题，走着打开我们这一个啊 no， 一般情况下图都要比这盒子大，他是为了照顾有些大浏览器是不是让他更清楚啊。还有一步是一定要做的，怎么写点 boss 里面的 c 宽是多少，高是多少一起改走着是不是 有了再做个简单的准备。订购大盒子，我先让图像放大缩小行不行？点 box 冒号 how are 里面的 m i g 凡是 form scale 加一点二过度 transition t i s i t r o 点四 s 打开 可不可以哎，先不要加 off 了黑粉啊，加上改变主意了。加上吧是吧就能看着别扭再加上喏。哎，当然了，他可能没我们这么大都没我们这么大呀。他可能是一点二或者一点三是不是啊 这个呢，到时候呢可以看一下是不是他给了个多大就行了啊啊这个到这媒体查询啊，到我们学的后面就能看懂了啊爱财这个给个一点一就行了 ok 吗啊啊其实啊我想起来是一点零五啊，如果我没有记错的话啊 是不是脑子还是比较好使的。可以，接下来我们需要做的是这个是不是有一个这样一个半透明的盒子，是不是显示出来啊？这个半透明的盒子有没有过渡效果是不是好像没有过渡效果。 这也显示隐啊，显示个隐藏呀，没有的话我们可以 display not block 什么都行啊。你用 oppo city 是不是也可以？你想让他加个过度会更漂亮？按透明的这个黑色盒子，他有没有盖住图片？有，有没有盖住这几个字？没有，所以他应该属于三明治中间中间的一层。 那么这个半透明的盒子是不是一定要通过什么一首新建一个盒子是不是给盖上去啊？那我们可不可以考虑用比方和 after？ 就这个用个比方和 after 是不就省一个盒子啊？要不然我是不是在新建一个 div 是不给他塞进去啊？那我决定了，我用比方和 after 谁的呢？说 box 的就可以了。 box 的比方和 after 是不也是 box 的孩子啊？就是 半透明的黑色遮罩是不是啊？我决定用 after 了啊， after 点 boss 冒号冒号 a f t 啊。 after 没问题吧。哎，打分呢？然后呢？宽高是多少？跟他一样，那就是百分之百高是多少？ 但是干嘛？但是要不要压住图片？要谁能压住图片？非常好啊，我随时能把速度啊。 top 改成挤压 love 改成几啊？ ok？ 他的爸爸绝富香，他的爸爸叫什么？我给他加一句话，叫什么 love you。 好，这样，这盒子有了，先看一下什么样子，如果全部能盖上说明就对了。有没有想盖上？ 看了，我要的是半透明，上面完全透明，下面是半透明啊。还记不记得我们的星星界面啊？星星界面咋写的呀？来 the ground amazing 山山山。然后呢？是 linear greeting 他是不是行了，他是不是从上往下走啊？ 上面是纯透明，那就是 rgba 小括号四个零，下面是 rgba 几个零，三个零点五来看，是不是效果就有了？ 颜色深，上面颜色浅，因为这图本身比较深，效果可能不是很明显，为了让你们看的更明显，我这改成个一来再来看一看。明显吧， 下面是不是看不清了？是有变化就行了。点五只，不过刚开始需要吗？需要。什么时候需要？是不是经过复合的时候才需要呀？但不加过度了， ok 吧。刚开始 after， opct 改成几啊？零零，不加过度了，也可以用 opct， 当然了，你有点习惯，你可以用 display， 是不是也没问题？好，刚开始零，所以看不见，打开是不看不见， 鼠标一经过是不是让它显示出来就行了？鼠标经过经过谁？点 box， mark however， 然后里面的 mark， mark after， 然后让他 opcity 改成几啊？一 有了吗？是不是可以这个效果就出来了？ easy 吧。我用的是不是 after 呀？有同学是不是用笔报呀，双击卡上加哥是不是有两个 after 呀？ b e f o r e 一起改一下。稍微个小问题是在于，你看我手把一放上去，是不是盒子出不来 啊？是因为笔报是在什么什么之前啊？我们这个盒子笔报是不是在之前放着的？他在笔报的下面是不是有一张图，图是不把笔报给压住了，所以其实他有，你看不见。那为什么这个图啊，他也没有加定位，他为什么会压住呢？这个图啊，他是有一个 transform scale， 是不是一个放大呀？ 在放大的时候呢，他会压住这个定位的盒子 ok 吗？这个比较特殊啊，你如果想要你爆压住这个图啊，很简单，有定位。我想把定位这个盒子的层级是要提高啊，应该用谁来？还记得吗？ c 刚啊，很大啊，一二三随便写一个就行。我们打开完之后好，有没有 有那这个完了之后呢接下来我们再来做的就是这个，你看是不是下面有这么几个字啊？这里面是有这么几个字啊千言搜索。那这几个字的话我们完全可以拿一个大盒子说把他们包起来就行了。还有一个小伙伴们有没有发现我这个字上还是靠下是不是靠 下地起的呀？拿一个盒子利用定位的方式木地起他就在下面了，所以说我们再准备一个包头木的盒子就行了对不对啊？一个比如说在 amig 的下面是在下面去准备一个紫盒子啊啊 然后呢我们叫点音宝，是不是文字信息的意思放个一二三能不能看懂？走着啊看看我们的他默认是不是靠上对齐啊，也不是靠上对齐又又被别人又压住了， 看到被别人又压住了因为这是个标准流啊，而我们这个笔报也好或者是图片也好都把它给压住了。那反正我要抵利息是不是肯定要加定位怎么写点音否 position absolute left 改成抵押零包他们改成抵押零。好改完它之后呢我们再来看然后有没有还没有是不是层级不够啊？上面这个透明的人家是一呃人家都是已经一了我是不是要把它选中数踢得更高。按道理二就够了是不按道理二就够了。那打 看一下我们这一个来我们再看一看啊是不还还没看到呀。哦哦在这呢我天呐隐藏的比较深。你写二也行，只不过一般习惯就他是最高了。一般我们写个九九九啊。反正是白色吗？先改个白色，省的看不见。顶号 fff 没问题吧。好，一二三是不是已经在考下面了，剩下的就比较简单了，我相信都难不到你们是不是往上去堆盒子就行了？一二三是不是四个盒子组成就行了？ p 行不行， h 行不行？ p 行不行啊？这个呢，了解更多。 a 行不行？看在音封里面，第一个我说放一个小 p 拿过来没问题吧？我用个 h 四中不中，我是不是再放个小 p 啊？ 哎，又拿过来了是不是好，下面呢？我放个小 a， 然后顶号叫什么了解更多是吧。他一会放个自己图标，我放个这个行不行，一会把自己图标是不是堆进去就行了。走着没问题吧。接下来我们需要调的就是字体大小，是不是啊？八点二好，但是你看这有没有距离， 给个判定纸是把这距离给他打开就行了。按道理是不是这边也有啊，是不是左右加个判定纸给这个大盒子？好，判定值是多少呢？哎，我们看一看啊，然后到这里去，上下二十五左右。三十那个大盒子是不是叫引否？找到引否，找到这个引否给一个 paddi 上下多少左右呢？ 终于可以了哦，还有个文字大小是多大？十八我给个二十吧。喏耶，稍有点大。果然还是十八 好，是不是可以给他改出来了。这样我们调的是不是这个会更大一些？那这个是多大的啊？多少像素是吧？二十四像素就可以了，我就找到我们这个 dnifo 里面的 h 四多啦。 ok， 二十四那我们已经有了，上下给个距离就行了啊，不用量了 开是吧。 margin 上下五 ps 左右零是不是还满意吗。接下来我需要调的是最后一个小链接了。好了解更多我们来看一下它呢 肯定也是，是不是十六像素啊，这个距离是不是更大一些就行了啊，也是个白色啊，所以说最后是音包里面的 a 是不是 a 啊。好，然后呢就是颜色什么色？ 白色说白色就行了然后呢拿两个套口猜一下啊。拿个套口来个十五下。他没动啊啊是没动是动不了他动不了啊因为 a 属于啊旁的元素旁的元素是不是不要给上下只给左右啊是不是啊这是这个 a 是不是有一个小问题那我是不是给是不是上面这个盒子出来调一下或者啊铲子调了 说给个 blog 也可以啊是不是也可以啊那这样一下 a 是不是都能点这块 a 是不是都能点啊喏你看人家是不是也是能点的整个都能点啊这个了解更多啊他不是个链接整一块都是链接发现吗我随便一点是不都能跳转啊所以说这么干啊。好，回来找到这个小 a 然后呢再放个小 c 就行了 o 不 ok 哎就是小屁就是小屁啊是不是哎就可以了啊记住这整个数都是小 a 啊最后我整个写完是不是拿个 a 整个一包就行了然后这个是不是稍微的往下抖一抖就行了。这个因为 p 太多吗这个 p 是不是可以加一个叫 more 行不行点然后呢 i n f o 里面点 more 来买这款 top 十五行不行行不行。按道理的话这个盒子他刚开始了解更多是看不见的简单来说这是阴否的盒子这不是这是阴否的盒子。当鼠标一经过的时候呢？哎让他上来。那怎么让他往下走一走呢 盒子呢他刚开始是不是已经有个包头目了我只要是不是往下走一走就可以了。往下走是正的是负的以我的个人经验试一试不是正的就是负的是不是。其实按道理是负的。为什么呢。因为他是包头目是底对齐。包头目的意思是离底的有多远那包头目十离底面有十像素盒子是在这的包头目离 一百像素盒子是在这的他离底部是一百像素离底边有多远所以越正是不是他离的底部越远所以他是靠上的但是呢我不要离上我是要往下。 所以说应该是什么负的实在想不清楚。我说不要紧不是正的就是负的，试一试也行。等一下啊，打开它用机查是我们去测一下就行了。好的我们这个盒子是不是 info 呀。这儿包侧母把光标定过来测一下。不要去猜啊。满意吗。我五十行不行哎就看不见了。水位已经过是我把包侧木改成零就行了。嗯 missing 啊然后呢包侧木多少 负的五十 px 看好我们这个盒子是不是就看不见了。鼠标经过谁鼠标经过记住永远都是大盒子。 不要经过引否不要经过引否你会发现啊你看我手的经过这上来了吗。嗯不是引否吧。引否是不是出出一点啊不是引否。是是是谁啊 box 是不大盒子还是大盒子。就是 点 boss 哈哈。 how are 谁动音否怎么动？ boto 改成几零是不是？是哎。然后最后一步加什么过渡，过渡写在谁身上是不是音否？单在音否身上是不是音否？是不是上下来移动啊？ 不是给猫啊？虽然你看的是猫，但是是不是整个就带着他走啊？看到没有，整个这个音符盒子是不是上下来移动能懂吗？哎，过度千万别忘了啊，过度夹在谁身上呢？你看谁的动画就给谁夹吗？那不是夹在孩儿身上，而是夹到是不是他原先的这个身上去啊？最后一步加 transition 第二 a n i t r n b i o n 然后呢？二点五 s 版嗯，区来看是不是是怎么就这么样子啊？

接下来我需要给小伙伴讲一个比较重点的这个立方体，你会发现是不是有好几个面？那你如果想要做这个立方体，我看上去是四个面，其实本质立方体是几个面，六个面，怎么去搭建呢？来还是按照我们以前的写法啊，我给你发过的素材里面去有这么一个文件叫立体成见， 我先复制一下啊，我们这个案例里面去代码啊，开始加微，这个叫日零四啊，立体成线，先看一看现在的现在的搭配结构啊，我们现在搭是前面和后面，看好了吗？有两个盒子，来先看一下他的原码是什么样子的。首先有个叫做 cop， 是一个大复盒子，复盒子里面有一个， 还有一个叫 bat， 是不是一个前面和后面，然后呢，这两个盒子其中呢，复合的是二百乘二百，最终得起了，这个没问题吧？然后呢，这里面的两个盒子都是二百乘二百，是不是都是二百乘二百的一个立方起呀？ ok 啊，然后呢，前面是一个 orange， 下面是一个 green？ 是啊，黄橙色和绿色，这是上下两个盒子，也就说现在啊，现在是标准流，但是呢，立方体他不可能这么排吧，我要的是应该是一千以后。第一步，我应该先怎么干？定位 beauty 这个定位啊，先定位连到一起，然后再拉开 钱，什么时候拉这一周啊？第一步，先定位，那定位的话，是不是这两个盒子都需要用定位啊？这是你们的 ipsolut 没问题吧？ top 改成几零， love 的值改成几啊零，这样的话是定位了，一定位 一走，我们就发现都叠到一起了，是不后面压住了前面？是啊为啥呀是不后面在下面呀是吧你不用调头紧不用调啊。不要紧剩下的我应该咋办 是不是拉开我把前面这个啊为什么我要拉两百每个盒子的宽高都是两百我再拉两百是不是正好是设置两百是不是一个二百乘以二百的地方体所以我要把前面这个盒子往我们面前是不是拉 两百像素正二百还是负二百往我们面前拉两百像素是正的现在我要找到我的第二个盒子前面的盒子是不是叫不让他然后呢是不是往我们面前拉两百像素啊。好那怎么写呢 蚕丝 form 这行吧这行然后呢我要是不移动啊蚕丝类似什么轴类轴正的还是负的 按正版二百像素走着。哎是不是看起来没什么变化呀。其实呢他已经有距离了。那只不过呢你们看上去是不还是只看到一个面后面那个被藏起来了。那我能不能让他沿着转一转我要看看侧面我要随意放上去什么轴转歪轴转 正的还是负的正的多少度九十度这个时候呢我就想做一个效果看一看啊当我鼠标放到了点 bob 然后呢冒好好我鼠标一放上去之后我让这个泡泡什么旋转环思 former 里面的 rotita 什么轴外轴旋转多少度九十度是不是就可以了当然了给我这个加个过度效果是不会更好一些。嗯 z 是不是过度的意思哦然后呢三 s 慢一点儿手背放上去啊。 咦有吗是不是还是只看到一个后面呀我给你看的更明显一些。我来给给个一百八一百八十代个 artiso。 有前面吗？没有啊，要解决这个问题啊，按道理我们分析的一个大盒子里面有两个小盒子，是不是咱们辛辛苦苦的又拉又又拉又转的，是不是啊？哎，结果没起效果。之所以出现这个原因啊，就是因为 你想让你这个副盒子里面这些纸盒子这几个面要想立体来呈现的话，需要写一句话，就是我们的立体呈现。首先透视效， 我能否呈现立体图形呢？透视效果是不行的，透视只能时间是不劲大远小啊，我们这个盒子你会发现他并不是我们要的不是劲大远小，我们要的是拉开距离处摆放好他的位置。 所以说呢，用透视是不可以的啊，透视也做不了，那我们如果想要让这个纸盒子按照我们想要的到对应的位置上去，这个时候我们就可以添加这个属性，叫做传丝爆母变形 边形的样式是 prever 杠三 d， 它的意思就是使我们的子元素处于真正的六 立体空间，要不然你如果没有这句话呀，你的孩子和父亲一样还是一个平面，所以这句话是控制孩子的，别说父亲怎么变对孩子是没有影响啊，孩子可以按照我们想要的那种调整他的位置或者调整他的旋转方向。 o 不 ok， 所以说他是调整孩子的啊，刚才我们是不是做了两个 已经把这两个面好不容易是不是已经搭好了呀？搭好了，但是你会发现默认的是不是还是扁平的，这个呢，默认值是 flat， 所以说啊，他子元素是出于二 d 平面内展示的，所以你看不到后面的盒子，这个时候我们就必须使我们的子元素处于三 d 空间，那你需要加这句话，这句话是加在谁身上呢？使 元素赋予真正的空间，谁能识字元素呢？父亲，所以这个和 perspective 是一样的，都是给谁家富元素。所以说呢，你看，我们讲到这个 立体呈现的时候呢，一定要注意啊，这个是不是在复合字内展示，所以可以给谁添加复元素？认真听，我需要给我这个 cover 添加一句话，是我们的一个立体呈现，立体呈现，负极 评价，凡是 form 里面的 style， 它默认的是不是 black， 我们这儿写上一个 reward 三 d， 当我站完这句话保存，小伙伴再跟我来看。啊，哦，我刷新一遍啊，第一个变化，前面真来了，为什么前面过来了？因为我们拉的是前面，是也不是？是啊，那说明是不是基本靠谱了？好，现在呢，我们在鼠标一经过仔细看，是也不是 不是，一前一后，相当于左面和右面已经有了，然后再搭个上面，下面盒子就出来了 啊，他有个粉色，是因为我们是不是这个大盒子的变形颜色啊？好，这才是真正的让我们的子盒子是不是按照我们想要的立体去搭建呀？啊，其实啊，我们刚才做的这个效果呀，他在旋转的时候呢，是有点别扭的，是沿着这条线来转的，是在这转的，他有可能转的正面的话是这么大，就意味着他并没有沿着我们的立方体来转呀，中心轴的话是在这个位置，所以说 转到这边来，那我们要给他改一下正确的做法，应该是 front， 这个盒子应该是往前拉多少像素？一百一百像素，往 前拉是正的，是负的，正的这才正一百。后面这个盒子应该是往哪拉呀？往后拉多少也是一百，但是正的是负的， 负的负的一百。问呢，是不是一个是往前走，是不是一个是往后走啊？这样呢？一百加一百，这两个加起来是不是正好是一个二百的一个空间， 这么做才是合适的？那我改完之后小伙伴们再来看啊，现在我再一转，这也不是，是不是移热中心点旋转，你会发现，哎，多出一个盒子来，多了就对了。他的这个盒子是我们这个 cover 负盒子的背景色正好是在中间，是一百像素，这是一百像素，沿着这个轴来旋转，这才是最合适的。

大家好，我是你们的老段段老师，今天我正式入驻抖音了，我希望通过抖音这个平台，更多更有效的跟大家分享编程知识，提高大家的编程能力。那么接下来关注老段， 由大理段氏后人我带大家学习更多关于编程的武功秘籍。

视频的标签是 vdosrc， 是指定要播放的视频地址， 标签内部可以放其他元素，当浏览器不支持播放的时候就会显示。 controls 属性是显示空间，比如播放按钮等。 视频播放窗口的宽高用 vis 和 hit 控制。 post 属性是指定一张视频 封面 播放的视频地址也可以写在标签的内部，陷入一个 sos 标签。指定视频的地址。 sauce 标签可以同时有多个，会从第一个尝试播放，播放失败会去找下一个，直到找到支持播放的那个。 加上奥特 play 属性就会自动播放视频， 加上 loop 属性，视频会循环播放 属性 music 的是静音播放。

抖音女友旋转相册特效。