位置: IT常识 - 正文

【疯狂世界杯】css 动画实现跳动的足球(疯狂世界百科)

编辑:rootadmin
【疯狂世界杯】css 动画实现跳动的足球 📋 个人简介💖 作者简介:大家好,我是阿牛,全栈领域优质创作者😜📝 个人主页:馆主阿牛🔥🎉 支持我:点赞👍+收藏⭐️+留言📝📣 系列专栏:前端实用小demo🍁💬格言:迄今所有人生都大写着失败,但不妨碍我继续向前!🔥

推荐整理分享【疯狂世界杯】css 动画实现跳动的足球(疯狂世界百科),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:疯狂世界史,疯狂足球世界,疯狂世界杯游戏机,疯狂世界赛车,世界杯疯狂球迷,疯狂世界1963,疯狂世界1963,疯狂世界杯游戏机,内容如对您有帮助,希望把文章链接给更多的朋友!

目录📋 个人简介前言最终效果思路分析小球的动画阴影的动画代码及素材获取代码图片素材结语前言

2022卡塔尔世界杯正在如火如荼的进行之中,作为“诸神的黄昏”,本届世界杯备受瞩目,足坛巅峰老将c罗,梅西,内马尔也将随本次世界杯退役,一代人的青春到此结束!本篇博客我将用css动画写一个简单的跳动的足球,适合初学者练习css动画,赶紧学起来吧!

最终效果

思路分析

这个效果的布局我是采用flex布局,素材都是背景图片的方式,这些都没啥可讲的,自己去看代码即可! 重点分析一下这个动画,可以将这个效果分解为两个动画:

小球的动画 可以看到小球有个向上跳动的动画,同时在向上跳动的时候资深换有个旋转!

【疯狂世界杯】css 动画实现跳动的足球(疯狂世界百科)

阴影的动画 阴影有个透明度和缩放的变化。

需要注意的是,小球的动画和阴影的动画所消耗的时间是一样的,这样才能保持动画的同步。 还需要注意的是,第二个小球和第三个小球有个动画延迟的效果!

下面就分别来看看这两个简单动画的实现代码吧!

小球的动画/*小球跳动的动画*/ @keyframes move{ from{ transform: translateY(0) rotate(0); } to{ transform: translateY(-350px) rotate(-360deg); } }

由代码可以看到向上移动了350px,移动的同时逆时针旋转360度! 需要注意的是:移动 translate 一定要放在旋转 rotate 的前面!

阴影的动画/*阴影变化的动画*/ @keyframes shadowMove{ 0%{ opacity: 0.5; transform: scale(0.75); } 100%{ opacity: 0.2; transform: scale(1); } }

由初态到终态,透明度逐渐增大,缩放逐渐恢复!

代码及素材获取代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>跳动的足球</title> <style> body{ width: 100vw; height: 100vh; display: flex; justify-content:center; align-items:flex-end; background: url(img/780.jpg) 0 -100px; } .box{ width: 350px; height: 300px; display: flex; flex-direction: column; justify-content: center; align-items: center; } .ball{ width: 100px; height:100px; background: url("img/782.jpg"); background-size: 100px 100px; border-radius: 100%; animation: move 1s infinite alternate; /*infinite无限循环,alternate动画反向执行回到起点*/ } /*小球跳动的动画*/ @keyframes move{ from{ transform: translateY(0) rotate(0); } to{ transform: translateY(-350px) rotate(-360deg); } } .shadow{ width:150px; height: 40px; background-color: #000; border-radius: 100%; opacity: 0.5; margin-top: -10px; animation: shadowMove 1s infinite alternate; /*infinite无限循环,alternate动画反向执行回到起点*/ } /*阴影变化的动画*/ @keyframes shadowMove{ 0%{ opacity: 0.5; transform: scale(0.75); } 100%{ opacity: 0.2; transform: scale(1); } } /* 第二个球动画延迟0.2秒 */ .second .ball,.second .shadow{ animation-delay: 0.2s; } /* 第三个球动画延迟0.5秒 */ .thrid .ball,.thrid .shadow{ animation-delay: 0.5s; } </style></head><body> <div class="box"> <div class="ball"></div> <div class="shadow"></div> </div> <div class="box second"> <div class="ball"></div> <div class="shadow"></div> </div> <div class="box thrid"> <div class="ball"></div> <div class="shadow"></div> </div> </body></html>图片素材

结语

如果你觉得博主写的还不错的话,可以关注一下当前专栏,博主会更完这个系列的哦!也欢迎订阅博主的其他好的专栏。

🏰系列专栏 👉flask框架快速入门 👉java 小白到高手的蜕变

其他专栏请前往博主主页查看!

本文链接地址:https://www.jiuchutong.com/zhishi/298766.html 转载请保留说明!

上一篇:mlp原来是这么回事(mlp是啥啊)

下一篇:zabbix_agentd命令 Zabbix客户端守护程序(zabbix 执行命令)

  • 外地预缴税金
  • 跨区域涉税事项反馈表怎么填
  • 编制支出加工费的会计分录
  • 使用权资产计入资产负债表哪个科目
  • 换工作个税申报忘记更改
  • 建筑服务预征缴纳税款本期实际抵减税额怎么填
  • 新政府会计制度衔接预算会计需做好的账目清理工作有
  • 其他业务支出是
  • 建筑企业异地预缴增值税计算
  • 机票电子行程单和发票的区别
  • 营改增后常用发票报销的种类有哪些呢?
  • 住房按揭贷款贷后检查内容
  • 转让长期股权投资交什么税
  • 机器设备的损耗属于什么会计科目类别
  • 小规模公司怎么注册
  • 个人独资企业怎么转有限公司
  • 税率开错跨月没法收回
  • 安保服务费税率几个点怎么算
  • 股权激励个人所得税计算器
  • 股东划入资产会计处理
  • 固定资产对外投资增值税
  • 能抵扣税款的发票有哪些
  • 出租房屋如何确认收入
  • 固定资产报废的净损失计入哪里
  • 购买的固定资产进项税可以抵扣吗
  • 固定资产账面价值在什么情况下会出现负值
  • 外汇账户怎么开
  • 单位车辆车船税缴纳
  • 法人变更涉及到什么
  • 电脑开机弹出网页游戏广告
  • 赠品不开发票合理么
  • 银行存款日记账怎么记账
  • 外汇收入情况说明
  • ireike.exe - ireike是什么进程 有什么作用
  • php获取文件夹大小
  • 物流费属于什么税目
  • php调用变量的符号
  • bootstrap-
  • vue3.0路由配置
  • postman密码
  • 文件不知道在哪怎么找
  • WP Smart Preloader 为你的WordPress添加预加载动画
  • 小规模纳税人直接从农户购入农产品要交增值税吗
  • 现代服务增值税纳税义务发生时间
  • 一般纳税人和小规模
  • 辅助生产车间工人工资计入
  • 固定资产加速折旧最新税收政策2023
  • 低值易耗品还需要录入明细吗
  • sql将一个表中的值赋给另一个表
  • 财政直接支付的概念
  • 事业单位劳务派遣工能长期干下去吗
  • 个体工商户税收新政策
  • 发生销售折让的双方应做的会计分录是
  • 企业成本核算项目以及成本核算流程
  • 银行存款日记账与银行对账单之间的核对属于
  • 退货与销售折让的区别
  • 财务软件无形资产有哪些
  • 销售一批产品给丙公司,该批产品标价200万yuan
  • 补价占整个交易金额的比例
  • sql 行号
  • mysql_error
  • Ubuntu14.4下Sublime Text 3无法输入中文解决方法
  • 笔记本上安装软件怎么弄
  • 文件夹隐藏属性怎么弄
  • 进程lsass.exe
  • mac图片格式怎么转换jpeg
  • ie无法打开https
  • win10电脑磁盘损坏
  • cocos2dx怎么用啊
  • opengl transform
  • Extjs TriggerField在弹出窗口显示不出问题的解决方法
  • 批处理命令实例
  • python爬虫系统
  • javascript怎么学
  • 雷爵电动车官网
  • 基于javascript的毕业设计
  • 查税务在哪里查
  • 火车报销凭证丢了还能退款吗
  • 厂房房产税2021年税率
  • 个体户是否需要缴纳企业所得税
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设