[笔记] 纯 CSS 制作图片轮拨效果

章节连结

先前在练习刻画网页时,想说做个图片轮拨器试试。不过在不用 JavaScript 的情况下,单纯用CSS3 也可以达到一样的效果。
css3 logo


语法解说

其实跟过往运用 Flash 制作动画的原理是类似的。你需要有告知浏览器你的“关键影格”资讯。换言之,就是“发生变化的时间点”、“何种变化”、“动画总长度”。
1. @keyframes 是 CSS3 所使用动画关键影格属性,至于其他的相关属性列表,你可以点选这里来查看。
2. 动画的作用区以 <div> 外层包覆后,将动画指令写在此 <div> 上。
3. 要变化的图片,其相邻时间是写在包覆图片的标签上,如 <a> 或是 <div>。
4. 鼠标移到图片上后的暂停效果,是写在包覆图片的标签上。
5. 影格的时间是以百分比表示。若以 “进退场 0.5 秒”+“一张图片显示3秒”,一共有5张图片轮拨的状况下,共需20秒。
100%/20=5%  (5% = 1秒),所以关键影格中的三个关键数值就会是 2.5%(0~0.5秒);17.5%(0.5秒~3.5秒);20%(3.5秒~4秒)

浏览器支援度

根据 CanIUse.com 所述,截至2019年5月查询时,市面上超过9成的浏览器都已支援此效果。
CSS animation support

示范程式码

资料来源

1.简单究好 Simple is Best 网页前端开发资讯
2.梅问题教学网


按赞加入粉丝团

延伸阅读