星空网 > 软件开发 > 网页设计

序列帧动画

最近有个客户想要做一个热点图片,但我对动画没有太多的接触,经过这几天的研究和上网查找资料,终于作了出序列帧动画。

图片地址:   ><!doctype html><html lang="en"><head> <meta charset="UTF-8" /> <title>序列帧动画练习一</title> <!--如果图片是单行排列 那他的每帧百分比可以不细分--> <style type="text/css"> .girl { background: url('hotspot.png');/*图片的宽高为128 3200px*/ /* 务必设置box的宽度,这样其他不在box中就不会显示*/ background-size: 128px 3200px;/*表示在图片标签中显示的宽高 一般是序列帧图片的宽高或者他的倍数 3200px / 128px == 25 */ -webkit-animation: demo 2s steps(25) infinite; /*steps(25)表示设置25步完成动画*/ width: 128px; height: 128px; } @-webkit-keyframes demo { 0% { background-position: 0 0; } 100% { background-position: 0px -3200px; } /*设置背景图的位置从0 到-3200px -表示图片向上移*/ } </style></head><body bgcolor="gray"> <div class="girl" style="top: 38%;left: 36%;position: absolute;"></body></html>

 

  

原标题:序列帧动画

关键词:序列

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

越南到美国海运费:https://www.goluckyvip.com/tag/104663.html
越南国际货运:https://www.goluckyvip.com/tag/104664.html
出口越南 陆运:https://www.goluckyvip.com/tag/104665.html
出口越南货物运输:https://www.goluckyvip.com/tag/104666.html
到越南货运:https://www.goluckyvip.com/tag/104667.html
货运到越南:https://www.goluckyvip.com/tag/104668.html
37号文今后是否会更新?一文详解关键信息 :https://www.kjdsnews.com/a/1836441.html
探讨内地人开设香港账户的可行性 :https://www.kjdsnews.com/a/1836442.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流