css吃豆人动画

标签：form   div   时长   绝对定位   ima   sla   pac   ati   移动   

一. Css吃豆人动画

1. 上半圆：两个div，内部一个圆div，外部设置宽高截取半圆

外部div动画：animation: 动画样式 1s(时长) ease(动画先低速后快速) infinite(动画无限播放)

动画样式：@keyframes：设置50%转45度，100%转0度

transform-origin: 50% 100%：定义旋转基点位置，左上角为0% 0%

2. 下半圆：改变旋转动画和基点位置，截取下半圆令外部div向下移动50%：translateY(-50%)

3. 豆子（设置三个）：使用绝对定位div，背景和圆角设置其left为起点位置

动画：.选择器: nth-of-type(3){...}：设置3个同class豆子不同样式动画，表示此节点的父节点下第三个元素

animation:三个豆子动画时长1.5秒，规定liner动画速度相同，设定延时0.5秒和1秒

动画样式：@keyframes：0% opacity:1（透明度）100% left: 15px opacity 0.4（设置终点和透明度）

css吃豆人动画

标签：form   div   时长   绝对定位   ima   sla   pac   ati   移动   

原文地址：https://www.cnblogs.com/dlm17/p/12345301.html