css吃豆人动画
2021-06-03 22:03
阅读：537
标签：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
上一篇：js---交换两个值
评论
亲，登录后才可以留言！