一种简单的动画效果实现方式

miya 发布于2019-08-21 14:47 / 2209人阅读

摘要：上有个小小的动画，很有趣，效果是这样的当你把鼠标移动到一个横着的手机图案上时，这个手机图案就会立起来，动画很呆萌。

bilibili上有个小小的动画，很有趣，效果是这样的：当你把鼠标移动到一个横着的手机图案上时，这个手机图案就会立起来，动画很呆萌。我对它的实现比较好奇，于是看了一下网页代码，发现实现起来挺简单的；原来这个地方使用了一条很长的图作为背景图，原理就是通过多次修改这个图案的style.backgroundPositionX属性，让这个图『动起来』。

我稍微的实现了一下，虽然不够精细，但是能看个效果


    
        动画实现的一种方式

所有的代码都在文章中写出来了，github的地址点此。

GPU云服务器云服务器 js实现的简单特效 ftp是属于一种网站发布方式 js实现f11的效果浮动效果动画

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/88030.html

【CSS】一文读懂 Animation 中的时间函数 steps

摘要：本文主要介绍中的函数。在执行动画时默认以函数进行过渡，会在每个关键帧之间插入补间动画，所以动画效果是连贯的。因此并非作用于整个动画，而是作用于每两个关键帧之间，与动画的时长播放次数等都无关，所以整个动画的执行时间还是中设定的。利用 CSS3 的 Animation 可以创建动画，在许多页面中能够替代 Flash、JS 等，提升页面加载速度。众所周知，Animation 有 8 大属性...

AJie 2019-08-29 17:19 评论0 收藏0
Lottie&vue-lottie--更简单的动画实现方式

摘要：什么是是一个可以通过插件来解析动画，并生成格式的文件。对于复杂的动画，开发同学要用很长的时间来实现，并且还有可能无法达到设计同学的最初的效果。是一个基于的动画效果实现组件。它基于开源项目，可以将导出的文件渲染成动画效果。什么是Lottie Lottie是一个可以通过bodymovin插件来解析Adobe After Effects动画，并生成json格式的文件。该json文件可以通过...

dreamans 2019-08-20 19:04 评论0 收藏0