css制作动画(动效的序列帧图)

相信 animation 大家都用过很多,知道是 CSS3做动画用的。而我自己就只会在 X/Y轴 上做位移旋转,使用 animation-timing-function 规定动画的速度曲线,常用到的 贝塞尔曲线。但是这些动画效果都是连续性的。

今天发现个新功能 animation-timing-function 的另外个属性值 steps()功能符,可以让动画不连续,就是制作逐帧动画。

steps(n,start/end)

第一个参数 number 为把动画分为 n 步阶段性展示,表示把我们的动画分成了多少段;

第二个参数默认为 end,设置最后一步的状态,start 为结束时的状态,end 为开始时的状态。

第二个参数具体说就是,emmmm.....................我寄几也没详细看(没理解),附上传送门你们看下张鑫旭大神的讲解  CSS3 animation属性中的steps功能符深入介绍

这里只需要第一个参数就好了

10a747a015b54d6a13e53b672e629275.png

这张素材宽高:2128*241、总共为8帧,故 steps(8)

CSS3 animation属性中的steps实现GIF动图(逐帧动画)

.main {

margin: 100px auto;

width: 266px;

height: 241px;

background: url(./people.jpg);

background-size: 2128px;

animation: sprite 1s steps(8) infinite

}

@keyframes sprite {

0% {

background-position: 0 0

}

100% {

background-position: 100% 0;

}

}

ok,大功告成,效果预览,当然这张GIF来的

css3 animation 属性众妙

animation中的steps()逐帧动画

在我们平时做宽高确定,需要背景图片切换的效果时,我如果用的是一张大的png图片.而且恰好是所有小图都是从左向右排列的,那么 我们只需测量出某一个小图距左侧有多少像素(x),然后我们banckgroun ...

css3 animation实现逐帧动画

css3里面的animation属性非常强大,但是自己用的比较少,最近有次面试就刚好被问到了,趁现在有时间就对animation做一个小总结.同时实现一个逐帧动画的demo作为练习 animation ...

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
回答: 要实现CSS片闪光动效,你可以使用CSS的animation属性和@keyframes规则。首先,你需要在CSS中定义一个@keyframes规则,用于描述闪光动画的关键帧。例如,你可以设置一个从透明度为0到透明度为1的关键帧。然后,你可以将这个动画应用到你的片上,通过设置animation属性来指定动画的名称、持续时间、重复次数等。在你提供的HTML代码中,你可以在img标签上添加一个class属性,比如"glow-effect",然后在CSS中定义这个class的样式,包括animation属性和@keyframes规则。这样,片就会显示闪光动效了。以下是一个示例代码: ```css @keyframes glow { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } } .glow-effect { animation: glow 2s infinite; } ``` 在上面的代码中,@keyframes规则定义了一个名为"glow"的动画,从0%到50%的时间内,透明度从0变为1,然后在50%到100%的时间内,透明度再次变为0。然后,通过设置animation属性,将这个动画应用到具有"class"为"glow-effect"的元素上,持续时间为2秒,无限重复播放。 你可以将上述CSS代码添加到你的CSS文件中,或者直接在HTML文件的`<style>`标签中添加。然后,将你的片的class设置为"glow-effect",就可以实现片闪光动效了。 #### 引用[.reference_title] - *1* [纯CSS发光动效-CSS制作logo发光效果](https://blog.csdn.net/m0_60965117/article/details/121475100)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值