php人物行走,非常震撼的纯CSS3人物行走动画

今天分享给大家的是一个用纯CSS3实现的人物行走动画，在没有使用JavaScript的情况下，用CSS3技术将人物行走的姿态描绘得非常逼真。其实动画实现的原理也是比较简单的，将人物行走时的状态分割成多张图片，然后利用CSS3的动画属性将这些图片串联起来形成人物行走动画效果。

AAffA0nNPuCLAAAAAElFTkSuQmCC

HTML代码

基本CSS代码#canvas {    height: 600px;    width: 760px;    margin: 0;    padding: 0;    position: relative;    overflow: hidden;

}#canvas div {    position: absolute;    -webkit-animation-iteration-count: infinite;    -moz-animation-iteration-count: infinite;    -ms-animation-iteration-count: infinite;    -o-animation-iteration-count: infinite;    animation-iteration-count: infinite;    -webkit-animation-timing-function: linear;    -moz-animation-timing-function: linear;    -ms-animation-timing-function: linear;    -o-animation-timing-function: linear;    animation-timing-function: linear;

}#canvas:target div:not(.overlay) {    border: 1px solid black;

}#canvas:target div.me div{    background: rgba(255, 255, 255, 0.25);

}.me {    top: 50px; left: 350px;    -webkit-animation-name: me;    -moz-animation-name: me;    -ms-animation-name: me;    -o-animation-name: me;    animation-name: me;

}.me, .me div {    background-repeat: no-repeat;    -webkit-animation-duration: 1750ms;    -moz-animation-duration: 1750ms;    -ms-animation-duration: 1750ms;    -o-animation-duration: 1750ms;    animation-duration: 1750ms;

}.torso {    width: 86px; height: 275px;    background-image: url(images/me/torso.png);

}.arm {    left: 12px;    -webkit-transform-origin: 20px 10px;    -moz-transform-origin: 20px 10px;    -ms-transform-origin: 20px 10px;    -o-transform-origin: 20px 10px;    transform-origin: 20px 10px;

}.right.arm {    top: 93px;    -webkit-animation-name: right-bicep;    -moz-animation-name: right-bicep;    -ms-animation-name: right-bicep;    -o-animation-name: right-bicep;    animation-name: right-bicep;

}.left.arm {    top: 87px;    -webkit-animation-name: left-bicep;    -moz-animation-name: left-bicep;    -ms-animation-name: left-bicep;    -o-animation-name: left-bicep;    animation-name: left-bicep;

}.bicep {    height: 124px; width: 51px;

}.right.bicep { background-image: url(images/me/right-bicep.png); }.left.bicep { background-image: url(images/me/left-bicep.png); }.forearm {    top: 108px; left: 14px;    width: 36px; height: 121px;    -webkit-transform-origin: 3px 7px;    -moz-transform-origin: 3px 7px;    -ms-transform-origin: 3px 7px;    -o-transform-origin: 3px 7px;    transform-origin: 3px 7px;

}.right.forearm {    background-image: url(images/me/right-forearm.png);    -webkit-animation-name: right-forearm;    -moz-animation-name: right-forearm;    -ms-animation-name: right-forearm;    -o-animation-name: right-forearm;    animation-name: right-forearm;

}.left.forearm {    background-image: url(images/me/left-forearm.png);    -webkit-animation-name: left-forearm;    -moz-animation-name: left-forearm;    -ms-animation-name: left-forearm;    -o-animation-name: left-forearm;    animation-name: left-forearm;

}.leg {    left: 6px;    -webkit-transform-origin: 30px 20px;    -moz-transform-origin: 30px 20px;    -ms-transform-origin: 30px 20px;    -o-transform-origin: 30px 20px;    transform-origin: 30px 20px;    -webkit-animation-name: thigh;    -moz-animation-name: thigh;    -ms-animation-name: thigh;    -o-animation-name: thigh;    animation-name: thigh;

}.right.leg {    top: 235px;    -webkit-animation-name: right-thigh;    -moz-animation-name: right-thigh;    -ms-animation-name: right-thigh;    -o-animation-name: right-thigh;    animation-name: right-thigh;

}.left.leg {    top: 225px;    -webkit-animation-name: left-thigh;    -moz-animation-name: left-thigh;    -ms-animation-name: left-thigh;    -o-animation-name: left-thigh;    animation-name: left-thigh;

}.thigh {    width: 70px; height: 145px;

}.left.thigh { background-image: url(images/me/left-thigh.png); }.right.thigh { background-image: url(images/me/right-thigh.png); }.shin {    top: 115px;    width: 50px; height: 170px;    background-image: url(images/me/shin.png);    -webkit-transform-origin: 30px 25px;    -moz-transform-origin: 30px 25px;    -ms-transform-origin: 30px 25px;    -o-transform-origin: 30px 25px;    transform-origin: 30px 25px;

}.right.shin {    -webkit-animation-name: right-shin;    -moz-animation-name: right-shin;    -ms-animation-name: right-shin;    -o-animation-name: right-shin;    animation-name: right-shin;

}.left.shin {    -webkit-animation-name: left-shin;    -moz-animation-name: left-shin;    -ms-animation-name: left-shin;    -o-animation-name: left-shin;    animation-name: left-shin;

}.foot {    top: 155px; left: 2px;    width: 67px; height: 34px;    background-image: url(images/me/foot.png);    -webkit-transform-origin: 0 50%;    -moz-transform-origin: 0 50%;    -ms-transform-origin: 0 50%;    -o-transform-origin: 0 50%;    transform-origin: 0 50%;

}.right.foot {    -webkit-animation-name: right-foot;    -moz-animation-name: right-foot;    -ms-animation-name: right-foot;    -o-animation-name: right-foot;    animation-name: right-foot;

}.left.foot {    -webkit-animation-name: left-foot;    -moz-animation-name: left-foot;    -ms-animation-name: left-foot;    -o-animation-name: left-foot;    animation-name: left-foot;

}.toes {    top: 9px; left: 66px;    width: 28px; height: 25px;    background-image: url(images/me/toes.png);    -webkit-transform-origin: 0% 100%;    -moz-transform-origin: 0% 100%;    -ms-transform-origin: 0% 100%;    -o-transform-origin: 0% 100%;    transform-origin: 0% 100%;

}.right.toes {    -webkit-animation-name: right-toes;    -moz-animation-name: right-toes;    -ms-animation-name: right-toes;    -o-animation-name: right-toes;    animation-name: right-toes;

}.left.toes {    -webkit-animation-name: left-toes;    -moz-animation-name: left-toes;    -ms-animation-name: left-toes;    -o-animation-name: left-toes;    animation-name: left-toes;

}.shadow {    width: 200px; height: 70px;    left: 270px; bottom: 5px;    background-image: url(images/misc/shadow.png);    -webkit-animation-name: shadow;    -moz-animation-name: shadow;    -ms-animation-name: shadow;    -o-animation-name: shadow;    animation-name: shadow;

}/* setting proper z-indexes so that limbs show up correctly */div.right.arm { z-index: 1; }div.left.arm { z-index: -3; }div.arm > div.bicep > div.forearm { z-index: -1; }div.right.leg { z-index: -1; }div.left.leg { z-index: -2; }div.leg > div.thigh > div.shin { z-index: -1; }.overlay {    width: 100%; height: 100%;    background: url(images/misc/gradient-left.png) repeat-y top left,                url(images/misc/gradient-right.png) repeat-y top right;

}.sky div {    background-repeat: no-repeat;    -webkit-animation-name: prop-1200;    -moz-animation-name: prop-1200;    -ms-animation-name: prop-1200;    -o-animation-name: prop-1200;    animation-name: prop-1200;

}.cloud-1, .cloud-2 {    width: 82px; height: 90px;    background-image: url(images/clouds/1.png);    -webkit-animation-duration: 120s;    -moz-animation-duration: 120s;    -ms-animation-duration: 120s;    -o-animation-duration: 120s;    animation-duration: 120s;

}.cloud-3, .cloud-4 {    top: 70px;    width: 159px; height: 90px;    background-image: url(images/clouds/2.png);    -webkit-animation-duration: 80s;    -moz-animation-duration: 80s;    -ms-animation-duration: 80s;    -o-animation-duration: 80s;    animation-duration: 80s;

}.cloud-5, .cloud-6 {    top: 30px;    width: 287px; height: 62px;    background-image: url(images/clouds/3.png);    -webkit-animation-duration: 140s;    -moz-animation-duration: 140s;    -ms-animation-duration: 140s;    -o-animation-duration: 140s;    animation-duration: 140s;

}.cloud-7, .cloud-8 {    top: 100px;    width: 94px; height: 81px;    background-image: url(images/clouds/4.png);    -webkit-animation-duration: 90s;    -moz-animation-duration: 90s;    -ms-animation-duration: 90s;    -o-animation-duration: 90s;    animation-duration: 90s;

}.cloud-1 { left: 0px; }.cloud-2 { left: 1200px; }.cloud-3 { left: 250px; }.cloud-4 { left: 1450px; }.cloud-5 { left: 500px; }.cloud-6 { left: 1700px; }.cloud-7 { left: 950px; }.cloud-8 { left: 2150px; }.horizon {    top: 350px;    width: 1800px; height: 50px;    background: url(images/misc/horizon.png) repeat-x;    -webkit-animation-name: prop-600;    -moz-animation-name: prop-600;    -ms-animation-name: prop-600;    -o-animation-name: prop-600;    animation-name: prop-600;    -webkit-animation-duration: 40s;    -moz-animation-duration: 40s;    -ms-animation-duration: 40s;    -o-animation-duration: 40s;    animation-duration: 40s;

}.ground div {    background-repeat: no-repeat;    -webkit-animation-name: prop-2000;    -moz-animation-name: prop-2000;    -ms-animation-name: prop-2000;    -o-animation-name: prop-2000;    animation-name: prop-2000;

}.sign-all-css {    width: 160px; height: 188px;    top: 325px; left: 1600px;    background-image: url(images/signs/all-css.png);    -webkit-animation-duration: 35s;    -moz-animation-duration: 35s;    -ms-animation-duration: 35s;    -o-animation-duration: 35s;    animation-duration: 35s;

}.sign-lots-of-divs {    width: 102px; height: 120px;    top: 345px; left: 1150px;    background-image: url(images/signs/lots-of-divs.png);    -webkit-animation-duration: 56s;    -moz-animation-duration: 56s;    -ms-animation-duration: 56s;    -o-animation-duration: 56s;    animation-duration: 56s;

}.sign-no-js {    width: 65px; height: 77px;    top: 348px; left: 1150px;    background-image: url(images/signs/no-js.png);    -webkit-animation-duration: 71s;    -moz-animation-duration: 71s;    -ms-animation-duration: 71s;    -o-animation-duration: 71s;    animation-duration: 71s;

}.sign-best {    width: 43px; height: 50px;    top: 350px; left: 1000px;    background-image: url(images/signs/best.png);    -webkit-animation-duration: 95s;    -moz-animation-duration: 95s;    -ms-animation-duration: 95s;    -o-animation-duration: 95s;    animation-duration: 95s;

}

CSS动画相关代码@-webkit-keyframes me {

0% { -webkit-transform:   rotate(5deg) translate( 5px,   0px); }

25% { -webkit-transform:  rotate(5deg) translate(-5px, -14px); }

50% { -webkit-transform:  rotate(5deg) translate( 5px,   0px); }

75% { -webkit-transform:  rotate(5deg) translate(-5px, -14px); }

100% { -webkit-transform: rotate(5deg) translate( 5px,   0px); }

}

@-webkit-keyframes right-bicep {

0%   { -webkit-transform: rotate(26deg); }

50%  { -webkit-transform: rotate(-20deg); }

100% { -webkit-transform: rotate(26deg); }

}

@-webkit-keyframes left-bicep {

0%   { -webkit-transform: rotate(-20deg); }

50%  { -webkit-transform: rotate(26deg); }

100% { -webkit-transform: rotate(-20deg); }

}

@-webkit-keyframes right-forearm {

0%   { -webkit-transform: rotate(-10deg); }

50%  { -webkit-transform: rotate(-45deg); }

100% { -webkit-transform: rotate(-10deg); }

}

@-webkit-keyframes left-forearm {

0%   { -webkit-transform: rotate(-45deg); }

50%  { -webkit-transform: rotate(-10deg); }

100% { -webkit-transform: rotate(-45deg); }

}

@-webkit-keyframes right-thigh {

0%   { -webkit-transform: rotate(-45deg); }

50%  { -webkit-transform: rotate(10deg); }

100% { -webkit-transform: rotate(-45deg); }

}

@-webkit-keyframes left-thigh {

0%   { -webkit-transform: rotate(10deg); }

50%  { -webkit-transform: rotate(-45deg); }

100% { -webkit-transform: rotate(10deg); }

}

@-webkit-keyframes right-shin {

0%   { -webkit-transform: rotate(30deg); }

25%  { -webkit-transform: rotate(20deg); }

50%  { -webkit-transform: rotate(20deg); }

75%  { -webkit-transform: rotate(85deg); }

100% { -webkit-transform: rotate(30deg); }

}

@-webkit-keyframes left-shin {

0%   { -webkit-transform: rotate(20deg); }

25%  { -webkit-transform: rotate(85deg); }

50%  { -webkit-transform: rotate(30deg); }

75%  { -webkit-transform: rotate(20deg); }

100% { -webkit-transform: rotate(20deg); }

}

@-webkit-keyframes right-foot {

0%   { -webkit-transform: rotate(-5deg); }

25%  { -webkit-transform: rotate(-7deg); }

50%  { -webkit-transform: rotate(-16deg); }

75%  { -webkit-transform: rotate(-10deg); }

100% { -webkit-transform: rotate(-5deg); }

}

@-webkit-keyframes left-foot {

0%   { -webkit-transform: rotate(-16deg); }

25%  { -webkit-transform: rotate(-10deg); }

50%  { -webkit-transform: rotate(-5deg); }

75%  { -webkit-transform: rotate(-7deg); }

100% { -webkit-transform: rotate(-16deg); }

}

@-webkit-keyframes right-toes {

0%   { -webkit-transform: rotate(0deg); }

25%  { -webkit-transform: rotate(-10deg); }

50%  { -webkit-transform: rotate(-10deg); }

75%  { -webkit-transform: rotate(-25deg); }

100% { -webkit-transform: rotate(0deg); }

}

@-webkit-keyframes left-toes {

0%   { -webkit-transform: rotate(-10deg); }

25%  { -webkit-transform: rotate(-25deg); }

50%  { -webkit-transform: rotate(0deg); }

75%  { -webkit-transform: rotate(-10deg); }

100% { -webkit-transform: rotate(-10deg); }

}

@-webkit-keyframes shadow {

0%   { opacity: 1; }

25%  { opacity: 0.75; }

50%  { opacity: 1; }

75%  { opacity: 0.75; }

100% { opacity: 1; }

}

@-webkit-keyframes prop-600 {

0%   { -webkit-transform: translateX(0px); }

100% { -webkit-transform: translateX(-600px); }

}

@-webkit-keyframes prop-1200 {

0%   { -webkit-transform: translateX(0px); }

100% { -webkit-transform: translateX(-1200px); }

}

@-webkit-keyframes prop-2000 {

0%   { -webkit-transform: translateX(0px); }

100% { -webkit-transform: translateX(-2000px); }

}http://www.codeceo.com/article/pure-css3-person-walking.html

本文作者：码农网 – 小峰

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/506367.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

php jquery 弹窗提示框,jQuery实现消息弹出框效果

php jquery 弹窗提示框,jQuery实现消息弹出框效果

本文实例为大家分享了jQuery消息弹出框的具体代码，供大家参考，具体内容如下效果图实现代码.showMessage {padding: 5px 10px;border-radius: 5px;position: fixed;top: 45%;left: 45%;color: #ffffff;}.showMessageSuccess {background-color: #00B7EE;}…
阅读更多...
python定义字符串数组_python数组声明

python定义字符串数组_python数组声明

广告关闭 腾讯云11.11云上盛惠 ，精选热门产品助力上云，云服务器首年88元起，买的越多返的越多，最高返5000元！ 如何在python? 我无法在文档中找到对数组的任何引用... 我正在制作一个小程序，在静态数组上保存…
阅读更多...
python函数定义中参数列表里的参数是_python函数定义中的参数说明

python函数定义中参数列表里的参数是_python函数定义中的参数说明

原博文 2020-05-23 07:50 − > 描述函数定义时 涉及到的 位置参数，默认参数，关键字参数，可变参数等的概念及用法 ## 1 示例代码#! /usr/bin/env python # -*- coding: UTF-8 -*- import logging def get_default_logger(): log... 相关推荐…
阅读更多...
我的世界手机有PHP的开服器下载,【BDS】MC基岩版官方开服器Windows版插件开发包...

我的世界手机有PHP的开服器下载,【BDS】MC基岩版官方开服器Windows版插件开发包...

您尚未登录，立即登录享受更好的浏览体验！您需要 登录 才可以下载或查看，没有帐号？注册(register)xMC基岩版官方开服器Windows版插件开发教程2019年5月22日 作者：Player前言：MC基岩版官方开服器(BDS)自发布至…
阅读更多...
c++ 协程_用yield实现协程

c++ 协程_用yield实现协程

上一篇 理解python中的yield关键字 介绍了使用yeld实现生成器函数，这一篇我们来继续深入的了解一下yield，用yield实现协程。先来解答一下上一篇留下的问题：下面的代码为什么第二次调用next打印None呢？def 事实是这样的&#xff0c…
阅读更多...
pandas 第一行_用Excel表格带你学习pandas最核心的处理操作，不再害怕条件统计

pandas 第一行_用Excel表格带你学习pandas最核心的处理操作，不再害怕条件统计

此系列文章收录在公众号中：数据大宇宙 > 数据处理 >E-pd转发本文并私信我"python"，即可获得Python资料以及更多系列文章(持续更新的)经常听别人说 Python 在数据领域有多厉害，结果学了很长时间，连数据处理都麻烦得…
阅读更多...
网页载入动画 php,网站页面加载动画代码

网页载入动画 php,网站页面加载动画代码

有时候网站服务器带宽不好或者用户网络不好，网站速度打开就会比较慢，那么用户等待就会比较无聊，下面准备了一个loading页面，可以在网站文件未完全加载完毕之前展示。HTML部分，放在body标签下面(最好是最靠近body)正在加…
阅读更多...
ehcache缓存原理_贼厉害，手撸的 SpringBoot缓存系统，性能杠杠的！

ehcache缓存原理_贼厉害，手撸的 SpringBoot缓存系统，性能杠杠的！

缓存是最直接有效提升系统性能的手段之一。个人认为用好用对缓存是优秀程序员的必备基本素质。本文结合实际开发经验，从简单概念原理和代码入手，一步一步搭建一个简单的二级缓存系统。一、通用缓存接口1、缓存基础算法FIFO（First In First Ou…
阅读更多...
angular 字符串转换成数字_Angular日期在TypeScript中格式化转换应用

angular 字符串转换成数字_Angular日期在TypeScript中格式化转换应用

组件模板中我们常常使用Angular内置管道DatePipe将其日期格式化，如同{{ startTime | date:yyyy-MM-dd }}这般操作，即可转换为字符串格式。那么在TS文件中我们也可以通过DatePipe或formatDate方法将其格式化。Angular日期在TypeScript中格式化转换应用​w…
阅读更多...
python罗马数字转换,Python3.5实现的罗马数字转换成整数功能示例

python罗马数字转换,Python3.5实现的罗马数字转换成整数功能示例

本文实例讲述了Python3.5实现的罗马数字转换成整数功能。分享给大家供大家参考，具体如下：问题概述：给定一个罗马数字 ，将罗马数字转换成整数。如罗马数字I，II，III，IV，V分别代表数字 …
阅读更多...
js在一个指定元素前添加内容_WebAR开发指南（1）---使用AR.js实现第一个WebAR demo...

js在一个指定元素前添加内容_WebAR开发指南（1）---使用AR.js实现第一个WebAR demo...

前面有一篇文章万字干货介绍WebAR的实现与应用 分析了目前流行的WebAR框架并简单的介绍一些实现方法，这个专栏我们具体的来通过一些框架实现WebAR效果。关于AR.jsAR.js是一个轻量级的增强现实类JavaScript库，支持基于标记和位置的增强现实。开发人员可以…
阅读更多...
python 最小二乘回归 高斯核_从简单数学建模开始：08最小二乘准则的应用（附python代码）...

python 最小二乘回归 高斯核_从简单数学建模开始：08最小二乘准则的应用（附python代码）...

模型拟合一般来说有这么三种：切比雪夫近似准则极小化绝对偏差之和最小二乘准则这几个原则各有各的适用范围。其中最小二乘准则是比较容易计算的。接下来我将简要的介绍最小二乘准则以及举例说明如何用python实现。最小二乘准则定义：给定某种函数类型 和 …
阅读更多...
oracle 时间集合,oracle 日期函数集合(集中版本)第2/2页

oracle 时间集合,oracle 日期函数集合(集中版本)第2/2页

oracle 日期函数集合(集中版本)第2/2页更新时间：2009年06月16日 23:45:55 作者：oracle 日期函数网上已经有了不少，特我们跟集中一下，免得大家麻烦。一、 常用日期数据格式1.Y或YY或YYY 年的最后一位，两位或三位SQL&g…
阅读更多...
中缀表达式转后缀表达式两位数_再见，正则表达式！

中缀表达式转后缀表达式两位数_再见，正则表达式！

从一段指定的字符串中，取得期望的数据，正常人都会想到正则表达式吧？写过正则表达式的人都知道，正则表达式入门不难，写起来也容易。但是正则表达式几乎没有可读性可言，维护起来，真的会让人抓狂&a…
阅读更多...
php 腾讯云 文字识别_腾讯科技（成都）有限公司

php 腾讯云 文字识别_腾讯科技（成都）有限公司

成都IT内推圈是由IT行业老兵组建的民间组织，我们希望能为广大IT同仁提供力所能及的帮助，我们不仅提供靠谱的职位，我们更是有温度的圈子！为了帮助更多的朋友寻找到靠谱的内推职位，老农在此号召大家：1. 发布职…
阅读更多...
oracle插入性能优化,Oracle- insert性能优化

oracle插入性能优化,Oracle- insert性能优化

看见朋友导入数据，花了很长时间都没完成！其实有很多快速的方法，整理下！向表中插入数据有很多办法,但是方法不同，性能差别很大.----1.原始语句drop table t1 purge;create table t1(sid number,sname varchar2(20)) tab…
阅读更多...
winscp 自动断开无法连接_winscp教程，winscp教程，看完就学会的winscp教程

winscp 自动断开无法连接_winscp教程，winscp教程，看完就学会的winscp教程

作为一个站长，当你的网站流量逐渐变大时，就会发现目前的主机无法满足正常需要，就要更换更高一级的云主机或VPS主机，新手就需要使用WinSCP和Putty，来管理主机。IIS7服务器管理工具可以批量管理、定时上传下载、同步操作…
阅读更多...
oracle客户端数据恢复,AnyBackup-Oracle 数据恢复任务恢复到异客户端失败，并提示错误：数据源为空，请检查恢复环境是否授权...

oracle客户端数据恢复,AnyBackup-Oracle 数据恢复任务恢复到异客户端失败，并提示错误：数据源为空，请检查恢复环境是否授权...

关键字Oracle、数据源适用产品AnyBackup Express 7.0.6 - 7.0.8AnyBackup CDM 7.0.6 - 7.0.8问题描述登录 AnyBackup 管理控制台，依次点击定时数据保护 > 数据恢复 > 新建，新建 Oracle 数据恢复任务，选择恢复数据到异客户端&#xff0c…
阅读更多...
linux祖先进程,Linux下的几种特殊进程

linux祖先进程,Linux下的几种特殊进程

1、Linux的登录环境Linux是一个多任务多用户的操作系统，其设计初衷: 就是要达成多用户同时使用单个计算机大的任务。多用户：早期计算机资源紧张，为了让更多的人都可以使用。多任务：服务于多用户，同时提高计算机的吞吐量…
阅读更多...
@select注解_SSM框架（十三）：Spring框架中的IoC（3）新注解，完全摆脱xml文件

@select注解_SSM框架（十三）：Spring框架中的IoC（3）新注解，完全摆脱xml文件

spring中的新注解1、Configuration作用：指定当前类是一个配置类细节：当配置类作为AnnotationConfigApplicationContext对象创建的参数时，该注解可以不写。2、ComponentScan作用：用于通过注解指定spring在创建容器时要扫描的包属性…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023