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

  • word怎么插入封面(怎么在word里插封面)

    word怎么插入封面(怎么在word里插封面)

  • 拼多多在哪申请发票(拼多多在哪申请退款流程)

    拼多多在哪申请发票(拼多多在哪申请退款流程)

  • 赠送好友加速器看不到好友(赠送好友加速器是真的吗)

    赠送好友加速器看不到好友(赠送好友加速器是真的吗)

  • 为什么苹果国际版便宜(为什么苹果国际价格高)

    为什么苹果国际版便宜(为什么苹果国际价格高)

  • 电话手表可以用自己的手机卡吗(电话手表可以用充电宝充电吗?)

    电话手表可以用自己的手机卡吗(电话手表可以用充电宝充电吗?)

  • wln键盘是什么意思(wlwhee是什么键盘)

    wln键盘是什么意思(wlwhee是什么键盘)

  • 普通网线支持千兆吗(普通网线支持千m吗)

    普通网线支持千兆吗(普通网线支持千m吗)

  • qq聊天记录多久会消失(qq聊天记录多久会自动删除)

    qq聊天记录多久会消失(qq聊天记录多久会自动删除)

  • 怎样登qq号不用短信验证码(怎样登qq号不用验证码)

    怎样登qq号不用短信验证码(怎样登qq号不用验证码)

  • stlink仿真器有什么用(stlink仿真器怎么用)

    stlink仿真器有什么用(stlink仿真器怎么用)

  • 候补提交成功啥意思(候补提交成功可以上车吗)

    候补提交成功啥意思(候补提交成功可以上车吗)

  • plc的输出形式分别是哪三种(plc的输出形式分为哪几种)

    plc的输出形式分别是哪三种(plc的输出形式分为哪几种)

  • hryaloota是华为什么型号(华为hry-alooa是啥型号)

    hryaloota是华为什么型号(华为hry-alooa是啥型号)

  • 手机怎么给自己屏幕录视频(手机怎么给自己银行卡转钱)

    手机怎么给自己屏幕录视频(手机怎么给自己银行卡转钱)

  • 华为mate20没有耳机孔吗(华为mate20没有耳机吗)

    华为mate20没有耳机孔吗(华为mate20没有耳机吗)

  • 小米手环可以连接华为吗(小米手环可以连蓝牙耳机听歌吗)

    小米手环可以连接华为吗(小米手环可以连蓝牙耳机听歌吗)

  • 美团怎么给异地订外卖(美团怎么给异地点餐点外卖)

    美团怎么给异地订外卖(美团怎么给异地点餐点外卖)

  • 抖音作品怎么设置成私密(抖音作品怎么设置不让别人下载)

    抖音作品怎么设置成私密(抖音作品怎么设置不让别人下载)

  • 苹果xs怎么拍摄出广角(苹果xs怎么拍摄照片好看)

    苹果xs怎么拍摄出广角(苹果xs怎么拍摄照片好看)

  • 移动硬盘可以连手机吗(移动硬盘可以连接手机吗)

    移动硬盘可以连手机吗(移动硬盘可以连接手机吗)

  • iphone7调制解调器空白(iphone7调制解调器恢复要多少钱)

    iphone7调制解调器空白(iphone7调制解调器恢复要多少钱)

  • 怎么把美团闪付卡取消(怎么把美团闪付关掉)

    怎么把美团闪付卡取消(怎么把美团闪付关掉)

  • 人人视频app扫一扫在哪里(人人视频在哪儿扫码)

    人人视频app扫一扫在哪里(人人视频在哪儿扫码)

  • 小红书如何保存图片(小红书如何保存图片不留水印)

    小红书如何保存图片(小红书如何保存图片不留水印)

  • 大溪地海岸附近的乌翅真鲨,法属波利尼西亚 (© Paul Mckenzie/Minden Pictures)(大溪地海岛在什么地方)

    大溪地海岸附近的乌翅真鲨,法属波利尼西亚 (© Paul Mckenzie/Minden Pictures)(大溪地海岛在什么地方)

  • 应交税费借方和贷方各表示什么
  • 废铁回收行业前景怎么样
  • 入股资金打进公司帐户要交税吗
  • 分摊房屋租赁费计入什么科目
  • 一般纳税人能不能开3个点的专票
  • 扣缴义务人怎么删除
  • 金税盘维护费申报
  • 税控盘专票认证登录密码正确还是登录不上去
  • 个税手续费返还属于政府补助吗
  • 预付账款是
  • 符合营改增应税服务规定的有
  • 双薪制工资如何缴纳个人所得税?
  • 开出增值税普通发票需要交税吗
  • 图文解析定期定额小规模纳税人怎么申报?
  • 资金账簿印花税最新政策2022年
  • 承包学校的食堂如何纳税
  • 建筑成本百分比如何确定?
  • 不计提折旧的固定资产是()
  • 抵税的税额怎么计算
  • 投资性房地产公允价值模式账务处理
  • 离婚后房产过户需要多少钱
  • linux连接windows的服务redis
  • 全月应纳税所得额什么意思
  • 滴滴公司的员工打车要钱吗
  • Windows11如何使用管理员账号登录
  • 建筑行业挂靠开票怎么做账务处理?
  • mozilla是什么文件
  • 会计账簿登记错误怎么办
  • php 调试工具
  • 应交增值税视频讲解
  • php7.3安装
  • 代理业务资产的含义
  • tcp/ip协议含义
  • php 遍历树
  • 论文 导论
  • 毕业设计教程
  • html六边形的盒子怎么做
  • 刚刚学完小车可以学摩托车吗
  • php curl_exec
  • 审图费谁出
  • 固定资产一次性折旧账务处理
  • 经营性现金流减利息
  • 财报层次和认定层次
  • 个人所得税其他扣除300一个月
  • 长期债权投资业务处理
  • 医用耗材税率是多少
  • 单位全额承担社保能税前扣除吗
  • 公转私户违法吗
  • 苹果macos安装
  • 提供劳务收入包含什么
  • 总分类账与明细分类账平行登记的要点包括
  • 小规模纳税人减按1%怎么计算
  • 代扣代缴附加税怎么做账
  • 刷信用卡的手续费一般是多少
  • 简易征收的进项税可以抵扣吗
  • 企业支付宝要交税吗?
  • 提高纳税遵从度依靠行政执法还是纳税服务
  • 建账要求
  • 建造固定资产的账务处理(出包方式)
  • 银行本票具体操作流程
  • 怎样计算加班工资?
  • sqlalchemy merge
  • xp如何把ie浏览器设置为默认浏览器
  • win10回收此电脑
  • vrvedp_m.exe是什么
  • win8为什么
  • win10预览版和正式版区别
  • 有趣的linux命令
  • win7怎么下到u盘
  • 正在进行设备安装 win10安装打印机
  • 勒索病毒一般勒索多少钱
  • javascript屏蔽元素
  • Javascript之Number对象介绍
  • javascript中声明变量的关键字
  • docker如何部署环境到生产
  • jquery可以实现哪些效果
  • 实用的app都有哪些
  • 欢迎使用本公司智能语音电动车
  • 广州地税微信公众号
  • 本季度可以弥补上季度亏损吗
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设