Google奉上首个CSS动画涂鸦-快科技-科技改变生活

Google奉上首个CSS动画涂鸦

萧萧
2011年05月11日 09:14
0

Google今天的涂鸦十分特别，这个动画图片并非传统的GIF图像，而是使用CSS Sprite技术，利用一个初始图片和一张画满各个动作的拼接图片，从而实现了动画效果。

初始图片

拼接图片

Google今日涂鸦是为了纪念现代舞先驱玛莎·葛兰姆（Martha Graham，1894年5月11日－1991年4月1日）117周年诞辰，他是美国舞蹈家和编舞家，也是现代舞蹈史的创始人之一。其作品多以美国人文或是希腊古典神话为主题，代表作有《原始的神秘》（Primitive Mysteries，1936年）、《给世界的信》（Letter to the World，1940年）、《阿帕拉契山脈之春》（Appalachian Spring，1944年）、《夜旅》（Night Journey，1947年）。

文章纠错

#快讯

好文点赞
水文反对

此文章为快科技原创文章，快科技网站保留文章图片及文字内容版权，如需转载此文章请注明出处：快科技

观点发布网站评论、账号管理说明

热门评论

{for c in All}
         <div class="pluninfo"> 
      
      <div class="pluninfo_head" style="height:auto;">
        <div class="pface">
              {if (c.UserName=="") ||(c.UserName=="guest")} 
              <a href="javascript:;"><img src="//11.mydrivers.com/m/images/v1/qianshui.jpg"></a> 
             {else}
              <a href="javascript:;" onclick="userCommentInfo(${c.UserID});"><img src="//passport.mydrivers.com/comments/getusertouxiang.aspx?uid=${c.UserID}&size=medium"></a> 
              {if (c.UserID== 746167)} <span class="zuozhe">作者</span>{else}
            <span class="jibie">${c.userlevel}</span> {/if}
          {/if}
       </div>
        <div class="plcenter">
          <div class="pluninfo_top1"> <span class="username {if (c.usersex == 2)} girl{else} boy{/if}">  {if (c.UserName=="")||(c.UserName=="guest")} ${c.AUserName}{else}${c.UserName}{/if}</span> 
                 {if (c.Cfrom!="" && c.Cfrom != "mobile")}<span onclick="downapp_float();" title="下载驱家新闻客户端，展示小尾巴" class="span_from dev ${c.Cfrom}">${c.model}</span>{else}<span class="span_from dev {if (c.model!= "手机用户" && c.model!="")} browser{else} ${c.Cfrom}{/if}">{if (c.model!= "手机用户" && c.model!="")}<img src="${c.bwimg}">{/if}${c.model}</span>{/if}   
                </div>
          <div class="pluninfo_top2"><span>${c.IPAdd}</span><span>${c.PostDate}</span></div>
        </div>
        <div class="plright"><img src="//11.mydrivers.com/m/images/v1/plun_moreinfo.svg" alt=""/> 
          <div class="pedite_img" style="display: none;"><img src="//11.mydrivers.com/m/images/v1/triangle-up.svg" alt=""/></div>
          <div class="pedite" style="display: none;">
            <ul>
              <li><a href="javascript:;" onclick="ShowMyReply(${c.ID})" class="huifu">回复</a></li>
              <li> <a href="javascript:;" onclick="userReport(${c.ID},${c.TitleID})" class="jubao">举报</a></li>
              <li><a href="javascript:;" class="taoyan">讨厌</a></li>
              <li> <a href="javascript:;" class="dels">删除</a></li>
            </ul>
          </div> 
        </div>
      </div>
      <div style="clear:both"></div>
       
      
      <div class="pluninfo_center">${c.Content}
           {if (c.RevertContent!="")}
          	  <div class="yinyong">
        <div class=" plunxx_center1">
        <span class="username {if (c.usersex == 2)} girl{else} boy{/if}">{if (c.RevertUserName=="")} ${c.RevertAUserName}{else}${c.RevertUserName}{/if}的原贴：</span>
             ${c.RevertContent}
        </div> 
		  </div>
           {/if}
      </div>
       
      
      <div class="pluninfo_bottom">
        <div class="fayan">
          <ul>
            <li><a href="javascript:;" id="s_${c.ID}"  onclick="sndReq(${c.TitleID},${c.ID},'support',${c.Support})" class="zhichi">支持[${c.Support}]</a></li>
            <li><a href="javascript:;" id="o_${c.ID}"  onclick="sndReq(${c.TitleID},${c.ID},'oppose',${c.Oppose})" class="fandui">反对[${c.Oppose}]</a></li>
            <li onclick="ShowMyReply(${c.ID})">回复</li>
          </ul>
        </div>
      </div>
       
      
      
      <div class="div_huifu" id="div_reply_${c.ID}"></div>
      <div style="clear:both"></div>
       
    </div>
   {/for}

查看全部评论

邮件订阅

0 | 0| 0 | 0

相关报道

最热文章排行查看排行详情

邮件订阅

分享到