最近有个客户想要做一个热点图片,但我对动画没有太多的接触,经过这几天的研究和上网查找资料,终于作了出序列帧动画。
图片地址:   ><!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>
原标题:序列帧动画
关键词:序列