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

  • 促销怎么玩,品牌才不受伤?(促销教程)

    促销怎么玩,品牌才不受伤?(促销教程)

  • 荣耀20Pro怎么录制屏幕(荣耀20pro怎样录制屏幕)

    荣耀20Pro怎么录制屏幕(荣耀20pro怎样录制屏幕)

  • 在微信发什么可以出现满屏掉落东西(在微信发什么可以挣钱)

    在微信发什么可以出现满屏掉落东西(在微信发什么可以挣钱)

  • ios13.5什么时候更新(ios13.5什么时候出的)

    ios13.5什么时候更新(ios13.5什么时候出的)

  • 华为蓝牙耳机怎么充电(华为蓝牙耳机怎么配对新设备)

    华为蓝牙耳机怎么充电(华为蓝牙耳机怎么配对新设备)

  • 迅雷不能下载bt种子解决方法(迅雷不能下载小说)

    迅雷不能下载bt种子解决方法(迅雷不能下载小说)

  • 淘宝45天不发货怎么办(淘宝45天不发货赔偿)

    淘宝45天不发货怎么办(淘宝45天不发货赔偿)

  • 抖音的母公司叫什么名字(抖音母公司简介)

    抖音的母公司叫什么名字(抖音母公司简介)

  • 苹果相机录像怎么没了(苹果相机录像怎么关闭镜像)

    苹果相机录像怎么没了(苹果相机录像怎么关闭镜像)

  • 苹果已激活和未激活的区别(苹果已激活未注册怎么办)

    苹果已激活和未激活的区别(苹果已激活未注册怎么办)

  • 买家号被降权能恢复吗(买家号被降权了)

    买家号被降权能恢复吗(买家号被降权了)

  • 拼多多可以微信支付吗(拼多多可以微信分期付款吗)

    拼多多可以微信支付吗(拼多多可以微信分期付款吗)

  • 怎么判断电子眼开没开(怎么判断电子眼拍的好坏)

    怎么判断电子眼开没开(怎么判断电子眼拍的好坏)

  • 荣耀v30pro是曲面屏吗(荣耀60换一个曲面屏多少钱)

    荣耀v30pro是曲面屏吗(荣耀60换一个曲面屏多少钱)

  • 红袖怎么删除订阅(红袖怎么删社区帖子)

    红袖怎么删除订阅(红袖怎么删社区帖子)

  • inode包含文件的元信息有哪些(inode和文件一一对应)

    inode包含文件的元信息有哪些(inode和文件一一对应)

  • m1803d5xe是什么手机(m1805d1se是什么型号手机)

    m1803d5xe是什么手机(m1805d1se是什么型号手机)

  • 如何设置指定数据点显示数据标签(如何设置指定数量提醒公式)

    如何设置指定数据点显示数据标签(如何设置指定数量提醒公式)

  • 小米8屏幕指纹版防水吗(小米8屏幕指纹版多少钱)

    小米8屏幕指纹版防水吗(小米8屏幕指纹版多少钱)

  • airpods美版和国行区别(airpods美版和国行序列号)

    airpods美版和国行区别(airpods美版和国行序列号)

  • 精选照片怎么关闭(精选照片怎么关闭不显示)

    精选照片怎么关闭(精选照片怎么关闭不显示)

  • 遗传算法的基本原理(遗传算法的基本思想)

    遗传算法的基本原理(遗传算法的基本思想)

  • 苹果Mac系统看HTML5视频教程介绍(macos怎么看)

    苹果Mac系统看HTML5视频教程介绍(macos怎么看)

  • ghost分区丢失只剩c盘(ghost后分区没有了)

    ghost分区丢失只剩c盘(ghost后分区没有了)

  • 纳税怎么理解
  • 纳税申报的流程是什么
  • 国债利息属于免税吗
  • 资本公积不足冲减是什么意思
  • 个税申报人员多怎么申报
  • 员工回家探亲的文案
  • 水果店个体户怎么交税 广州
  • 发货就要开票吗是真的吗
  • 财务利润率
  • 小微企业附加税减半征收
  • 合法有效的凭证
  • 建设期利息对当年的借款如何计息?
  • 企业外购的无形资产摊销,可以加计扣除吗?
  • 资产拍卖税费谁承担
  • 代扣代缴手续费企业所得税
  • 哪些费用税务局可以抵扣
  • 简要回答建筑企业如何实现利润最大化
  • 企业的其他业务是什么
  • 股东收回投资要交税吗
  • 合作建房分配的房屋
  • 定期存款利息收入现金流
  • 法人一证通报建
  • abs付款是现金吗
  • 利润分成的会计分录
  • mac怎么查询是不是正品
  • windows10如何开热点
  • 固定资产和固定资金的区别
  • 股票分红怎么扣税
  • 提示内存不足
  • PHP:disk_total_space()的用法_Filesystem函数
  • 奖金发放的原则
  • 复式记账法含义
  • 新准则有哪些
  • php curl命令详解
  • 社保基数和实际工资怎么算
  • 异地预缴的附加税在申报税时会抵消掉么
  • 采购入库单怎么生成
  • 金税盘v2.0.41怎么扫码开票
  • db2数据库管理最佳实践
  • 应收账款与营业收入比例分析
  • 印花税不减免
  • 劳务报酬所得项目
  • 商誉在资产负债表中如何体现
  • 解决烧心最快方法
  • 同时安装vs2005团队开发版和sql 2005企业版的方法(downmoon原作)
  • sql server重新配置
  • sqlserver分布式事务
  • 待处理财产损益借方增加还是减少
  • 社保阶段性减免范围
  • 单式记账法因为其简单易学,记账效率高
  • 资本公积的相关资料
  • 其他应收款个人在贷方表示什么
  • 资产负债表中的股东权益由什么组成
  • 房地产开发票的时间?
  • 税控盘被锁死
  • 天猫佣金是什么意思
  • 残保金的计提分录
  • 记账凭证的分类及每类的具体含义是什么
  • 怎样计算加班工资?
  • mysql5.7版本下载
  • SQLServer 通用的分区增加和删除的算法
  • mac的废纸篓
  • Win10预览版怎么变回正式版
  • ubuntu安装office2019
  • Linux磁盘分区的作用
  • xp桌面底部任务在右边
  • linux软件安装在哪个文件夹
  • 电脑window8系统怎么样
  • windows8连wifi
  • win10文件资源
  • linux安全性从何而来
  • win7系统使用ituns设置iphone铃声图文教程
  • unity自动攻击
  • 清除cookie是什么意思
  • javascript入门教程
  • Python编程中的逻辑与控制
  • 页面跳转后js还会执行吗
  • 贵州地方税务局网上办税服务厅
  • 定期定额发票使用流程
  • 北京国税查询发票真伪查询系统
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设