+发表新主题
查看: 1567|回复: 0

[HTML5开发] CSS3绘制的眨眼猫咪

[复制链接]

[HTML5开发] CSS3绘制的眨眼猫咪

[复制链接]
皮皮 发表于 2015-9-15 22:43:06 浏览:  1567 回复:  0 [显示全部楼层] 回帖奖励 |倒序浏览 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
纯css3写的动画,一个眨眼的猫咪,代码很简洁,主要是使用css3的animation属性,需要的可以参考下

  • <!DOCTYPE html>
  • <html lang="en">
  • <head>
  • <meta charset="UTF-8">
  • <title>Document</title>
  • <style>
  • .play {
  •         width: 76px;
  •         height: 73px;
  •         margin:40px auto;
  •         background-image: url("cat_play.png");
  •         -webkit-animation: play 2s steps(53) infinite;
  •         -moz-animation: play 2s steps(53) infinite;
  •         -ms-animation: play 2s steps(53) infinite;
  •         -o-animation: play 2s steps(53) infinite;
  •         animation: play 2s steps(53) infinite;
  • }
  • @-webkit-keyframes play {
  •         from { background-position:0 0; }
  •         to { background-position: -4028px 0; }
  • }
  • @-moz-keyframes play {
  •         from { background-position:0 0; }
  •         to { background-position: -4028px 0; }
  • }
  • @-ms-keyframes play {
  •         from { background-position:0 0; }
  •         to { background-position: -4028px 0; }
  • }
  • @-o-keyframes play {
  •         from { background-position:0 0; }
  •         to { background-position: -4028px 0; }
  • }
  • @keyframes play {
  •         from { background-position:0 0; }
  •         to { background-position: -4028px 0; }
  • }
  • </style>
  • </head>
  • <body>
  •         <div class="play"></div>
  • </body></html>

复制代码
回复

使用道具 举报


您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

手机版| 赣南网

© 2013-2016 Comsenz Inc. Powered by Discuz! X3.4

用微信扫一扫

赣南网