位置: 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 执行命令)

  • 小米滑板车怎么调节到运动模式(小米滑板车怎么启动)

    小米滑板车怎么调节到运动模式(小米滑板车怎么启动)

  • 宽带200兆和300兆区别(宽带200兆和300兆在技术上有区别)

    宽带200兆和300兆区别(宽带200兆和300兆在技术上有区别)

  • 苹果xs充电速度(苹果xs充电速度测试)

    苹果xs充电速度(苹果xs充电速度测试)

  • 苹果11后盖玻璃碎了能保修吗(苹果11后盖玻璃原装价格)

    苹果11后盖玻璃碎了能保修吗(苹果11后盖玻璃原装价格)

  • 一加7自带root吗(一加7能不能root)

    一加7自带root吗(一加7能不能root)

  • 淘宝换货一次还能在换吗(淘宝换货一次还能换吗)

    淘宝换货一次还能在换吗(淘宝换货一次还能换吗)

  • 为啥开微信视频手电筒打不开(为啥开微信视频会黑屏)

    为啥开微信视频手电筒打不开(为啥开微信视频会黑屏)

  • ipadair3怎么调分屏(ipadair3怎么分屏一半而不是悬浮)

    ipadair3怎么调分屏(ipadair3怎么分屏一半而不是悬浮)

  • 华为音乐会员下载的歌,会员到期后还能听吗(华为音乐会员下载的歌怎么导出来)

    华为音乐会员下载的歌,会员到期后还能听吗(华为音乐会员下载的歌怎么导出来)

  • 手机poweroff是什么意思啊(手机显示power off)

    手机poweroff是什么意思啊(手机显示power off)

  • 户户通信号质量达到多少就可以看电视(户户通信号质量和强度都为0)

    户户通信号质量达到多少就可以看电视(户户通信号质量和强度都为0)

  • 苹果可以应用分身吗(苹果可以应用分身淘宝吗)

    苹果可以应用分身吗(苹果可以应用分身淘宝吗)

  • 华为出现hd是怎么关闭(华为出现hd是怎么回事儿)

    华为出现hd是怎么关闭(华为出现hd是怎么回事儿)

  • 微信聊天背景能保存吗(微信聊天背景能单独设置吗)

    微信聊天背景能保存吗(微信聊天背景能单独设置吗)

  • 苹果8来电闪光灯不闪(苹果8来电闪光灯怎么设置不起作用)

    苹果8来电闪光灯不闪(苹果8来电闪光灯怎么设置不起作用)

  • iphone7a1778哪国版本(iphone71778是什么版)

    iphone7a1778哪国版本(iphone71778是什么版)

  • 手机爱奇艺广告怎么关闭(手机爱奇艺广告屏蔽)

    手机爱奇艺广告怎么关闭(手机爱奇艺广告屏蔽)

  • 节点自由度什么意思(节点自由度概念)

    节点自由度什么意思(节点自由度概念)

  • 铃声多多怎么导入快手(铃声多多怎么导入酷狗)

    铃声多多怎么导入快手(铃声多多怎么导入酷狗)

  • 金立m6怎么强制格式化(金立m6强制格式化怎样选泽)

    金立m6怎么强制格式化(金立m6强制格式化怎样选泽)

  • 苹果手机充电孔变松了(苹果手机充电孔进水了充不了电怎么办)

    苹果手机充电孔变松了(苹果手机充电孔进水了充不了电怎么办)

  • 怎样启用内存卡(怎么启用内存卡)

    怎样启用内存卡(怎么启用内存卡)

  • 红米k20pro有没有nfc(红米k20Pro有没有红外)

    红米k20pro有没有nfc(红米k20Pro有没有红外)

  • web端是什么意思(web端是什么意思的缩写)

    web端是什么意思(web端是什么意思的缩写)

  • 【CSS】CSS字体样式【CSS基础知识详解】(css中字体样式设置)

    【CSS】CSS字体样式【CSS基础知识详解】(css中字体样式设置)

  • 应交税费是什么科目借贷方向
  • 企业当期应纳增值税
  • 施工项目预缴税率是多少
  • 税盘维护费的账务处理
  • 增值税专用发票几个点
  • 纳税人识别号是什么哪里可以查到
  • 即征即退的增值税属于政府补助
  • 正常工资薪金所得是什么意思
  • 中小企业所得税优惠政策有哪些
  • 长期股权投资的账务处理
  • 服务业暂估成本分录
  • 事业单位代扣社保公积金分录怎么写的
  • 经济补偿金也需要交个人所得税吗?
  • 公司商务卡可以日常消费
  • 全额拨款事业单位企业所得税
  • 个人承包经营所得是什么意思
  • 内账价税分离余额怎么处理
  • 小微企业需要开公户吗
  • 被吊销营业执照的公司如何注销
  • 核定征收的小型微利企业
  • 季度有利润可以弥补以前年度亏损吗
  • 简述房地产开发企业设立的特殊规定
  • 已经销售但是没货怎么办
  • 缴纳投标保证金
  • 企业为职工缴纳的五险一金占工资总额的多少
  • 贴现息等于什么
  • 减免活动怎么做
  • 酒店的原材料和包装
  • 菲律宾薄荷岛疫情最新消息
  • 工商年报纳税总额包括滞纳金吗
  • 会计处理的正确顺序
  • php处理xml数据
  • php获取当前页面url
  • 固定资产加速折旧最新税收政策2023
  • 深度学习部署(十九): CUDA RunTime API YOLOV5后处理cpu解码以及gpu解码
  • js面试必问
  • 收到境外服务费可以退税吗
  • 借款利息记入短期借款吗
  • 简述跨期摊提账户
  • 以前年度的应交税费贷方怎么调平
  • 公司贷款买车有什么风险
  • mongo mysql区别
  • 个税的缴纳期数是什么
  • sql死锁的简单例子
  • 材料帐怎么记
  • 翻唱歌曲发行至国外的好处
  • 权益法转其他权益工具
  • 质量赔偿金
  • 跨月报销的算当月还是上个月的
  • 软件开发销售属于什么行业
  • 建筑工程审计流程
  • 收到退回的企业所得税会计分录
  • 公司人事怎么办公积金提取流程?
  • 公司不做账不报税有什么后果?
  • 资产负债表上应交税费是什么意思
  • 应付股利计提了长期不支付
  • 营业外收入算未开票收入吗
  • 预提费用怎么做凭证
  • 苹果电脑bim
  • Ubuntu操作系统安装步骤
  • WIN764位系统8G内存识别一半解决办法
  • launch.exe打不开
  • win7系统无法自动检测此网络的代理设置
  • 微信小程序异步回调函数
  • Extjs EditorGridPanel中ComboBox列的显示问题
  • kotlin开发教程
  • Node.js中的construct构造函数
  • Python 正则表达式实现计算器功能
  • Node.js中的什么模块是用于处理文件和目录的
  • nodejs require原理
  • javascript高级程序设计电子书
  • jquery js区别
  • jqgrid分页pager
  • 地税编码哪里查
  • 全国大学生数学竞赛证书电子版查询
  • 中国税务精神内容英文
  • 昆山国税局上班时间
  • 一般纳税人沙石税率是多少
  • 车船税代收有发票吗
  • 商铺转让要交哪些税费和费用
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设