transition实现人物动起来

最新推荐文章于 2024-06-16 02:10:48 发布
最新推荐文章于 2024-06-16 02:10:48 发布
阅读量358 收藏
点赞数
分类专栏： HTML 文章标签： css html css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_54624138/article/details/129308834
版权 
<!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>Document</title>
    <style>
        .box1{
            width: 74px;
            height: 218px;
            background-image: url(./img/1.jpg);
            margin: 0 auto;
            background-position: 0 0;
            transition:0.8s steps(8);
        }
        .box1:hover{
            background-position:-663px 0 ;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
</body>
</html>

效果

transition实现人物运动

操作过程：

插入图片后，测量其宽度和高度；我插入图标为9个人物，宽度为754px，高度为218px。由图片可得一个人物的宽度为74px，218px（其实是将754除以9得到87px，在实操过程中人物行走出现溢重叠，即缩小宽度），设置transition的行走时间为0.8s，设置其分8步走，即人物9-1=8个。

简单基础小东西，后续实现循环效果。

乌鱼子乌鱼
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
transition和animation中的运动函数
qq_41938120的博客
03-22 466
transition-timing-function linear：线性过渡。 ease：平滑过渡。 ease-in：由慢到快。 ease-out：由快到慢。 ease-in-out：由慢到快再到慢。 step-start：等同于 steps(1, start) step-end：等同于 steps(1, end) steps接受两个参数的步进函数。第一个参数必须为正整数，指定函数的步数。第二个参...
unity3d怎么让模型动起来_Unity3d笔记——利用Animator使模型动起来
weixin_39726971的博客
02-04 4203
一. 从Asset Store中下载合适的模型首先点击菜单栏中的window -> asset store，调出Asset Store面板，以下图。在搜索栏中输入本身想要查找的模型便可。Tips：可在Asset Store选项卡上右键，选择Maximize，如图javascript在最大化后，可设置筛选选项，咱们能够把Price调整为0到0，从而筛选出免费的模型最后，我找到的是一个免费的机器...
4.运动 transition：时间 属性 运动形式 延迟时间 - HTML5&CSS3.0基础部分-xyphf
xyphf的博客
07-04 1557
4.运动 transition：时间 属性 运动形式 延迟时间 - HTML5&CSS3.0基础部分-xyphf
【Unity2D】实现人物跳跃二段跳以及掉落的动画和代码
dangoxiba的博客
01-25 3197
学习目标： 实现人物跳跃二段跳以及掉落的动画和代码 参考视频：秦无邪OvO的个人空间_哔哩哔哩_Bilibili 上一篇文章：CSDN 学习Idle,Walk,Jump的切换： 首先先实现Idle,Walk,Jump的切换，需要现在ProjectSetting上找到这个Jump 然后再Animator动画系统中创建四个条件 接着再加入每个Animation的Condition中，它们都不需要等待时间 再代码中封装一个叫SwitchAnimation的方法，再用一个地面检测的...
Unity为人物模型 添加动效Animator
热门推荐
newchenxf的专栏
03-07 2万+
本文讨论如何让人物模型快速绑定多种动画，并运行起来。
虚幻——动画蓝图、状态机制作人物走跑跳动作
Zhanganzhen的博客
06-17 1600
使用状态机来达到人物走跑跳的切换
Unity技能工厂——怎样实现丝滑的角色连击动画
Richard_shen的博客
11-03 1732
三个攻击动作也是这么操作，分别创建atk_1、atk_2、atk_3的图形化面板，选定atk_1、atk_2、atk_3的攻击动作并且给其Motion添加atk_1、atk_2、atk_3的动画。RPG类型的动作游戏因为其敏捷的工作动作，技能连招之间丝滑的衔接，视觉冲击感爆棚的技能释放特效，所谓“拳拳刀肉，刀刀进身”的攻击效果，吸引了一大批忠实角色类扮演游戏的忠实粉丝。分别右键atk_1、atk_2、atk_3—Make Transition—连Idle，将Has Exit Time勾选（默认是勾选的）
前端网页让照片动起来（
全栈川川
06-16 1965
展示效果： dong 截图展示： 部分代码：（主要是太多了，贴下去读者看不下去了） <!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <meta name="viewport
css动画里面transition和transform以及animation和和keyframes几个属性的区别，以及语法格式
Jason_from_China的博客
11-24 1510
TRANSTION
vue2.0 中使用transition实现动画效果使用心得
12-29
这个案例其实很简单，通过一个transition来触发多个子元素的过渡效果，我们只需要定义元素对应的过渡效果就可以，其他事情vue会帮我们搞定，由此可以扩展出其他酷炫的过渡场景效果。先来看看这个简单案例的代码实现...
Vue运用transition实现过渡动画
10-17
vue的过渡动画，主要是transition标签的使用，配合css动画实现的。接下来通过本文给大家分享Vue运用transition实现过渡动画效果，感兴趣的朋友一起看看吧
JS实现动画兼容性的transition和transform实例分析
10-20
主要介绍了JS实现动画兼容性的transition和transform方法,结合实例形式分析了transition和transform方法针对手机端浏览器兼容性问题上的相关处理技巧,需要的朋友可以参考下
(css)el-tabs滚动按钮浮动问题
nyf_unknow的博客
06-11 248
思路：找到相应元素，降低层级。
css预处理是什么？作用是什么？
tianxianghuiwei的博客
06-13 430
预处理器如Sass（SCSS）、Less和Stylus等，通过引入这些特性，使得开发者能够更高效地管理和组织大型的样式表，同时提升了代码的重用性和可读性。它们的引入使得开发者可以以更简洁、更高效的方式编写CSS，同时能够利用现代开发技术提升代码的重用性和可读性，是现代前端开发中常用的工具之一。：允许定义变量来存储颜色、字体大小、间距等，可以在整个样式表中统一管理和调整，提高了代码的灵活性和可维护性。：通过以上特性，开发者能够更高效地组织和管理大型项目的样式代码，提升了可读性和可维护性。
什么是CSS的:target选择器
ggq53219的博客
06-13 260
选择器只影响URL中当前的目标元素。如果用户刷新页面或者导航到另一个页面，然后再回来，之前的选中状态将不会保留，除非使用JavaScript或其他技术来保持状态。选择器用于选择当前活动的目标元素。当页面上的一个链接被点击，并且该链接指向一个页面内的元素（通过ID）时，被链接的元素就会成为目标元素，此时。这种选择器常常与页面内的导航（如Tab导航、折叠面板等）和“返回顶部”功能一起使用。下面是一个简单的例子，展示了如何使用。的元素）就会被选中，并且。，从而显示该元素的内容。在这个例子中，所有的。
HTML-CSS练习例子
pacong的博客
06-09 1207
HTML CSS 练习 https://icodethis.com 作为前端练习生。不敲代码只看，入门是很慢的，所以直接实战是学习前端最快的途径之一。 这个网站练习HTML CSS的，可以打开了解一下，可以每天打卡，例子简单，循序渐进，设计的也比较好看。 下面是练习，当然布局的方法有很多，下面是一种。 01基础 这是第一个练习，但是很多大佬做出了，很多不一样的效果 比如： 设计稿 代码 <!DOCTYPE html> <html lang="en"> <head&
使用ant-design/cssinjs向plasmo浏览器插件的内容脚本content中注入antd的ui组件样式
06-14 583
但是方法就是比较繁琐，需要将antd的样式拷贝出来，然后贴到一个单独的css样式文件中，然后引入到内容脚本中。
CSS从入门到精通——动画:CSS3动画执行次数和逆向播放
最新发布
m0_73614626的博客
06-16 331
因为这里的动画比较简单，这样写没什么问题。但动画效果比较复杂时，需要计算的东西就比较多了，也比较麻烦。为了完成本关任务，你需要掌握：1.动画执行次数，2.动画反向播放。可以看出，这里动画只执行了一次。）称为一个动画的周期，也就是说，动画执行了一次。看作动画的一个周期。为了方便评测， CSS 都是需要以分号。时是直接消失的，怎么让它逐渐消失呢？根据提示，在右侧编辑器补充代码，实现。本关任务：用 CSS3 实现。让动画第二次反向播放。先创建一个动画名称为。然后把这个动画绑定到。，它规定了动画是否在。
vue 移动端 transition 实现手风琴动画
05-17
手风琴动画是指在一组元素中，其中一个元素被展开时，其他元素同时被收缩，形成一个类似于手风琴的效果。在 Vue 移动端开发中，可以使用 transition 动画来实现手风琴效果。 首先，在 HTML 中定义一组需要展开和收缩的元素，可以使用 v-for 指令来动态渲染元素，并绑定一个 active 变量表示当前展开元素的索引： ``` <div class="accordion"> <div v-for="(item, index) in items" :key="index" :class="{ active: index === active }"> <div class="title" @click="toggle(index)"> {{ item.title }} </div> <div class="content"> {{ item.content }} </div> </div> </div> ``` 其中，toggle 方法用于切换展开和收缩状态： ``` methods: { toggle(index) { this.active = index === this.active ? -1 : index; } } ``` 接下来，在 CSS 中定义手风琴动画的样式，使用 transform 属性实现元素的展开和收缩： ``` .accordion { .title { cursor: pointer; } .content { overflow: hidden; transition: height 0.3s ease-out; &.active { height: auto; transition: height 0.3s ease-in; } } } ``` 其中，active 类用于控制元素的展开和收缩状态，当元素被激活时，添加 active 类，并将高度设置为 auto，实现元素的展开效果；当元素被取消激活时，移除 active 类，并将高度设置为 0，实现元素的收缩效果。 最后，在 Vue 中使用 transition 组件包裹元素，实现动画效果： ``` <transition name="accordion"> <div v-for="(item, index) in items" :key="index" :class="{ active: index === active }"> <div class="title" @click="toggle(index)"> {{ item.title }} </div> <div class="content"> {{ item.content }} </div> </div> </transition> ``` 其中，name 属性用于指定动画的名称，可以在 CSS 中定义对应的动画样式。 这样就完成了手风琴动画的实现。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值