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

  • 印花税资本金项目如何缴纳
  • 公司买大米怎么做账
  • 现金折扣的销售额
  • 现金形式发放的福利需要扣税吗
  • 商业银行的下列哪些行为违反了法律规定?给存款大户
  • 建设用地规划许可证和建设工程规划许可证的区别
  • 工程项目增值税税率
  • 核销贷款收回会计分录
  • 房屋预售缴款怎么交
  • 企业认缴出资怎么做账
  • 房租发票一下全部开出
  • 存货盘亏怎么做账务处理
  • 互联网合同要交社保吗
  • 建筑企业对员工管理制度
  • 营改增后税金由哪几项费用组成
  • 会计做账中记账表怎么做
  • 计提固定资产减值准备会计科目
  • 业务招待费是什么科目
  • 如何在windows11中安装google play
  • 总公司拨给分公司款需要交税吗
  • 交际应酬费可以抵扣吗
  • 投资性房地产减值准备属于什么科目
  • 电脑锁屏密码设置步骤
  • 销售费用中业务费包括哪些
  • 研发费用支出税前扣除比例
  • wind10待机唤醒
  • 跨年租赁费如何处理
  • 自制生产设备领用原材料按照什么确认收入
  • 员工提前预支工资借条
  • 企业类型变更是什么意思
  • 总分类账户原材料
  • 工业企业采购部工作职责
  • ci框架文档
  • 老生常谈PHP 文件写入和读取(必看篇)
  • 完美解决索尼电视arc无声音
  • vue路由实现
  • 计提的福利费怎么处理
  • 分布式网络爬虫
  • Laravel 5.3 学习笔记之 安装
  • uni app ios
  • 帝国cms添加栏目前台不显示
  • 转增资本属于什么会计科目
  • 商户待清算账户是什么
  • C++ 使用dll路径不在当前路径时如何调用
  • java获取resources下文件路径
  • SQLite教程(十):内存数据库和临时数据库
  • 详解帝国cms图集大全
  • 税局代个人开增值税普通票样板
  • 一次性伤残补助金怎么计算
  • 增值税发票抵扣联丢失怎么办
  • 印花税每月未计提怎么办
  • 支付员工经济补偿金会计处理方式
  • 房租转租怎么处理合法
  • 装修费用一次性税前扣除
  • 其他综合收益是当期损益吗
  • 折扣 会计
  • 纳税人购进国内商品
  • 本年利润是什么科目?
  • 一般纳税人抵扣进项税有时间要求吗
  • 存货成本计算方法有几种?分别是什么?
  • sql排序分组
  • sqlserver多表查询 索引
  • mysql5717安装及配置超详细教程
  • win8wifi受限
  • centos如何查看所有用户
  • 制作xp系统盘需要多大u盘
  • svaplayer.exe - svaplayer是什么进程 有何作用
  • win1021年更新
  • 组策略配置锁屏
  • linux计划任务执行脚本
  • C#绘制准心脚本
  • js设置图片宽度
  • shell监控端口状态
  • c#委托实现的步骤
  • java stringapi
  • 江苏税务怎么在手机上办
  • 工会经费范围税率是多少
  • 河北省国税局发展前景
  • uk开票网络连接异常怎么回事
  • 税务网上抄报流程是什么
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设