css的animation 使用ransform-origin实现gif动画效果 -兔子动态效果（纯css动画）

最新推荐文章于 2023-11-16 19:42:38 发布
最新推荐文章于 2023-11-16 19:42:38 发布
阅读量214 收藏
点赞数
文章标签： css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dxlei44/article/details/134140642
版权

使用css+div 制作类似gif动画效果-兔子拜年动画，这里有给anim设置的动画小技巧就是如何让动画层次分明，以及动画的流畅性，效果如下gif图

看官觉得有趣，觉得有帮助或者对各位以后坐css动画有启发可以点个赞收藏下，大佬请勿喷，手下留情！

 废话不多说先上代码

1 结构如图

2个结构 ，第一个分层好的图片（这块需要ps帮助，有动画制作经验的更好）第二个式main.css文件

首先先看第一个img包结构

里面分层了每个动画部件，然后按照下面的div结构排列如图

那么基础准备好了，下面就是重点css的设置

首先要把兔子的基本形状摆好

代码如下：

.rabbit-box {

    width: 353px;

    height: 314px;

    position: relative;

    top: 30px;

    left: 40px

}

/* 最上面的耳朵，深度层级为1-因为这只耳朵在最后面被其他兔子层级挡住*/

.rabbit-upEar {

    position: absolute;

    z-index: 1;

    width: 95px;

    height: 41px;

    background-image: url('../img/rabbit/upEar.png');

    background-position: center;

    background-repeat: no-repeat;

    background-size: contain;

    animation: points-move-coordinate-top-upEar 2s infinite;

}

/* 短飘带层，深度层级为2*/

.rabbit-shortStreamer {

    position: absolute;

    z-index: 2;

    width: 84px;

    height: 25px;

    background-image: url('../img/rabbit/shortStreamer.png');

    background-position: center;

    background-repeat: no-repeat;

    background-size: contain;

    animation: points-move-longStreamer 2s infinite;

}

/*兔子身体，深度层级为3*/

.rabbit-body {

    position: absolute;

    z-index: 3;

    width: 353px;

    height: 314px;

    background-image: url('../img/rabbit/rabbit_body.png');

    background-position: center;

    background-repeat: no-repeat;

    background-size: contain;

    animation: points-move-coordinate-top 2s infinite;

}

/*下面的耳朵，深度层级为4*/

.rabbit-downEar {

    position: absolute;

    z-index: 4;

    width: 98px;

    height: 46px;

    background-image: url('../img/rabbit/upEar.png');

    background-position: center;

    background-repeat: no-repeat;

    background-size: contain;

    animation: points-move-coordinate-top-downEar 2s infinite;

}

/* 长飘带层，深度层级为5 */

.rabbit-longStreamer {

    position: absolute;

    z-index: 5;

    width: 214px;

    height: 72.5px;

    background-image: url('../img/rabbit/longstreamer.png');

    background-position: center;

    background-repeat: no-repeat;

    background-size: contain;

    animation: points-move-longStreamer 2s infinite;

}


 

/* 灯笼手层，深度层级为6 */

.rabbit-lantern {

    position: absolute;

    z-index: 6;

    width: 168px;

    height: 117px;

    background-image: url('../img/rabbit/lantern.png');

    background-position: center;

    background-repeat: no-repeat;

    background-size: contain;

    animation: points-move-coordinate-top-lantern 2s infinite;

}

 开始设置动画属性，想让兔子的身体有个飘动的效果，就必须有个概念，就是动画部件必须根据一个中心点来上下或者左右摆动，那么在css里面这里有个重要的设置transform-origin，这个可以设置中心点，div以这个中心点为基础上下或者左右运动，下面飘带的png图，设置transform-origin: 0 100%; 表示中心点 如图：

关于如何准确设置需要调试具体可以看一个博客，里面写的非常清楚，有空可以多了解下，

CSS transform-origin-CSDN博客

第二个细节就是在3个铜钱动画里面有个环绕的效果，是钱币在动画时间的进程中，百分比进度通过设置z-index 变化层级来实现，简单来说就是钱币在通过兔子身体后面的时候，马上设置z-index比最低的层级还小就可以让兔子身体覆盖住钱币，然后整体动画再设置一下钱币大小变化形成一个由近至远的环绕兔子的视觉效果 。具体代码如下

@keyframes points-move-longStreamer {

    0% {

        top: 181px;

        left: 135px;

        transform: rotate(5deg);

        transform-origin: 0 100%;

    }

    50% {

        top: 181px;

        left: 135px;

        transform: rotate(0deg);

        transform-origin: 0 100%;

    }

    100% {

        top: 181px;

        left: 135px;

        transform: rotate(5deg);

        transform-origin: 0 100%;

    }

}

@keyframes points-move-coordinate-top {

    0% {

        transform: translateY(0px);

    }

    50% {

        transform: translateY(10px);

    }

    100% {

        transform: translateY(0px);

    }

}

@keyframes points-move-coordinate-top-lantern {

    0% {

        top: 109px;

        transform: rotate(5deg) scale(1);

        transform-origin: 100% 50%;

    }

    50% {

        top: 110px;

        transform: rotate(0deg) scale(1.1);

        transform-origin: 100% 50%;

    }

    100% {

        top: 109px;

        transform: rotate(5deg) scale(1);

        transform-origin: 100% 50%;

    }

}

@keyframes points-move-coordinate-top-upEar {

    0% {

        top: 14px;

        left: 138px;

        transform: rotate(5deg);

        transform-origin: 10% 100%;

    }

    50% {

        top: 24px;

        left: 138px;

        transform: rotate(20deg);

        transform-origin: 10% 100%;

    }

    100% {

        top: 14px;

        left: 138px;

        transform: rotate(5deg);

        transform-origin: 10% 100%;

    }

}

@keyframes points-move-coordinate-top-downEar {

    0% {

        top: 53px;

        left: 180px;

        transform: rotate(15deg);

        transform-origin: 0 100%;

    }

    50% {

        top: 59px;

        left: 180px;

        transform: rotate(0deg);

        transform-origin: 0 100%;

    }

    100% {

        top: 53px;

        left: 180px;

        transform: rotate(15deg);

        transform-origin: 0 100%;

    }

}

@keyframes points-move-coordinate-top-coin1 {

    0% {

        top: 1px;

        left: 80px;

        z-index: 6;

        transform: rotate(0deg) scale(0.8);

    }

    50% {

        top: 85px;

        left: 280px;

        z-index: 6;

        transform: rotate(360deg) scale(1.4);

    }

    60% {

        z-index: 0;

        transform: scale(1.1);

    }

    80% {

        z-index: 0;

    }

    100% {

        top: 5px;

        left: 80px;

        z-index: 6;

        transform: rotate(0deg) scale(0.8);

    }

}

@keyframes points-move-coordinate-top-coin2 {

    0% {

        z-index: 6;

        top: 150px;

        left: 270px;

        transform: rotate(0deg) scale(1.3);

    }

    20% {

        z-index: 0;

        transform: scale(0.9);

    }

    50% {

        z-index: 0;

        top: 50px;

        left: 10px;

        transform: rotate(180deg) scale(0.7);

    }

    60% {

        z-index: 6;

        transform: scale(1.1);

    }

    100% {

        z-index: 6;

        top: 150px;

        left: 270px;

        transform: rotate(0deg) scale(1.3);

    }

}

@keyframes points-move-coordinate-top-coin3 {

    0% {

        z-index: 0;

        top: 135px;

        left: 150px;

        transform: rotate(0deg);

    }

    50% {

        z-index: 4;

        top: 125px;

        left: 250px;

        transform: rotate(180deg);

    }

    100% {

        z-index: 0;

        top: 135px;

        left: 150px;

        transform: rotate(0deg);

    }

}

好，整个兔子动画就完成了，希望能给到大家启发和帮助，谢谢观看！ 

需要源码可以留言！（新手暂时不知道怎么放，研究研究）

dxlei44
关注
CSS3——CSS3动画(animation)及应用
流楚丶格念的博客
07-15 4852
改革春风吹满地动画(CSS3) animation案例1：太阳系的运作案例2：图片播放标题 动画(CSS3) animation 动画是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。 语法格式： animation:动画名称 花费时间 运动曲线 何时开始 播放次数 是否反方向; 关于几个值，除了名字，动画时间，延时有严格顺序要求其它随意r @keyframes 动画名称 { from{ 开始位置 } 0% to{ 结束 }
css实现动画效果：transition+transform的使用
qq_44787874的博客
11-26 1281
css的具体动画效果： 4种用法： （1）2D 3D转换： 概念： translate（移动）： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>beijingshezhi</title> <link href="css/new_file.css" type="text/css" rel="stylesheet" /> </he
纯CSS3 animation属性实现GIF图片进度加载效果
11-05
纯CSS3 animation属性实现GIF图片进度加载效果 纯CSS3 animation属性实现GIF图片进度加载效果
【每日一练】65—CSS实现文本裁切gif动画效果
web前端开发
09-20 168
今天这个练习是一个文本剪辑GIF图片后得到的动画效果，最终效果如下：具体的代码实现过程，可以看后面的HTML与CSS代码，这个里面的gif图片已经采用线上地址了，因此，就没有图片素材了，大家可以直接获取。具体代码如下:HTML：<html> <head> <meta charset="UTF-8"> <title&...
前端多张图片生成Gif效果，
qq_39041201的博客
09-17 1134
前端多张图片生成Gif效果， 例：如下三张图片 效果展示： 方式一（css）: <style> *{padding: 0;margin: auto;} .box{width: 200px;height: 50px;position: relative;} .box img{position: absolute; width: 100%;height: 100%;} .sloganBg01{ z-index: 3; animation: slogan1 1.5
CSS中的transform-origin
m0_64415782的博客
09-09 4000
CSS3 transform-origin详解
CSS 实现 图片鼠标悬停折叠效果
01-18
CSS 实现 图片鼠标悬停折叠效果 1. 实现要点 折叠是由多个块级元素来完成的; 图片是以背景图片的方式呈现出来的; 给每个块级元素设置同一张背景图片，通过background-position来控制显示的区域（类似于雪碧图）; ...
CSS -- 2D转换
qq_48802092的博客
07-30 266
​第一个参数水平方向​第二个参数垂直方向​注意点​如果取值是1,代表不变​如果取值大于1,代表需要放大​如果取值小于1,代表需要缩小​如果水平和垂直缩放都一样,那么可以简写为一个参数。属性定义3D元素距视图的距离，以像素计，该属性允许改变3D元素查看3D元素的视图，当为元素定义perspective属性时，其子元素会获得透视效果，而不是元素本身。transform-origin​第一个参数水平方向​第二个参数垂直方向。如果是角度值为负，则沿逆时针旋转。...
CSS3新增样式2D+3D效果-立方体旋转
weixin_43981560的博客
05-30 339
CSS3新增样式2D+3D变形 下面是通过旋转和平移实现的3D立方体旋转 CSS3新增2D变形属性 2D变形：transform主要包括以下几种：none、旋转rotate、扭曲skew、缩放scale、移动translate、矩阵变形matrix 旋转和平移属性 transform：rotate(30deg);//旋转角度 transform:translate(100px,200px);//顺着X、Y轴平移的像素 transform:translateX(100px);//顺着X轴平移的像素
iOS 动画Animation - 6 - 2：实战练习之淘宝购物车动画解析
Yan
04-24 1875
首先说明：这是一系列文章，参考本专题下其他的文章有助于你对本文的理解。首先我所要说的购物车动画并不是说把商品加入购物车时商品图片旋转飞出的动画，如果看了我这一个系列的博客，就会觉得那个简直不要太简单。我今天要说的是这个动画，就是在点击购物车的时候弹出View的动画，这个动画在很多APP上都有，包括淘宝，天猫，简书，京东，等等。
showloading js css gif动图
02-25
ShowLoading这个jQuery插件设计用于当运行Ajax请求时，可以在屏幕某一特殊区域(id,class或者html标签)覆一张正在加载中的图片。 有时候我们页面调用后台程序时间比较长时，前台页面暴露在用户之下，如果用户点击可能会造成逻辑混乱。这时候，遮罩就起到了很好的效果，在触发后台程序时我们将前台页面遮住，不让操作，同时给予一个程序运行请等待的效果。
CSS中的过渡效果及动画：transform和animation
最新发布
weixin_51473175的博客
11-16 2587
CSS样式中的过渡效果transition，以及transform属性，还有动画效果animation
css3 模拟gif每桢,CSS3 animation属性中的steps实现GIF动图(逐帧动画)
weixin_30536391的博客
08-03 991
相信 animation 大家都用过很多，知道是 CSS3做动画用的。而我自己就只会在 X/Y轴 上做位移旋转，使用 animation-timing-function 规定动画的速度曲线，常用到的 贝塞尔曲线。但是这些动画效果都是连续性的。今天发现个新功能 animation-timing-function 的另外个属性值steps()功能符，可以让动画不连续，就是制作逐帧动画。steps(n...
使用CSS3实现动态加载gif图片的效果
zhangfeng2124的专栏
12-21 9963
css代码： .glyphicon-refresh-animate { -animation: spin .7s infinite linear; -ms-animation: spin3 .7s infinite linear; -webkit-animation: spin2 .7s infinite linear; -moz-animation: spin4
纯CSS3实现GIF图片动画效果
weixin_30901729的博客
12-01 1332
在线演示 本地下载 转载于:https://www.cnblogs.com/qixidi/p/10051423.html
CSS3+PNG实现GIF动画效果
精彩人生
02-16 4242
昨天讲到了JavaScript+PNG模拟GIF动画，今天教大家用css3 + PNG实现GIF动画效果。代码很简单主要用到了css3的animation属性，代码如下： @-webkit-keyframes loading{0%{-webkit-transform: rotate(0deg);}50%{-webkit-transform: rotate(180deg);}100%{-w
html css将图片实现gif的效果
qq_33745371的博客
03-10 1543
文章目录效果图代码按钮图 效果图 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>测试</title> </head> <body> <img src="buy.png" class="imgDemo"> </body> <style> @keyf
css t ransform旋转
10-10
CSS的transform属性可以用来对元素进行旋转。它有两种常用的旋转方式：rotate()和rotateZ()。 1. rotate(angle)：按照指定的角度angle对元素进行旋转。正值表示顺时针旋转，负值表示逆时针旋转。例如，transform: rotate(45deg);会将元素顺时针旋转45度。 2. rotateZ(angle)：与rotate()相同，但只能进行二维旋转。该函数是rotate()的快捷方式，只能指定一个角度。例如，transform: rotateZ(180deg);会将元素顺时针旋转180度。 下面是一个示例代码，展示如何使用CSS transform进行旋转： ```html <!DOCTYPE html> <html> <head> <style> .box { width: 100px; height: 100px; background-color: red; transform: rotate(45deg); } </style> </head> <body> <div class="box"></div> </body> </html> ```
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值