CSS3 Animation:background-image

css教程 2015-04-07

对CSS3的强大一如既往的自信,自己在倒腾一个用例,就是一朵白云的两个表情切换,想想很容易实现吧,在PC上也是如此,

CSS3 Animation:background-image

用两个keyframes就搞定了。

代码示例:

01.cloud.large{
02width: 138px;
03height: 46px;
04background-image: url ('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIoAAAAuCAMAAADA1HGuAAAAWlBMVEUAAAD///////////////////////////////////////////////////////////+hU1eoYmXAjY/HFh7Im53LJSzVUFbZX2TcbXLji4/qqKv44uP88PH///8siCrvAAAAEHRSTlMAECAwQFBgcICPn6+/z9/vIxqCigAAAVFJREFUGBnNwYlWwjAUBcCbhfSFZnFX1Pv/v2ldUNQWemhIOoMStB0oNGYlJH6JfWfQiNlm/pG8Rn2bwFHBoi4bOKnXqEd5HpM71GIiTwgKVZjMk5JBBY5zZIOL23CebHBhJnOmHPghBTG4AJV4jiQapfU8l1coyvF8eYOCVOYSW5QjXCYqFKIyF4oKZQgXCygjcTmPEgxLsCjAs4SE2bSTgTP4J7KIDrNoSfySvMYvimUkzKAk85BXgLIifQgiG8cp11d7NzxwfbV3x0MOJ5nIP5JEltfjFJO53MvuGycJjjOZBbw+3n6633FaMjhCRZbxsnt8eHh6fuVRDtOEdTlM0azNYoJnbVlhXGJ1HqMMG9AY49hAhzHCBiLGCFvACN2zhZBIxk7hh8tsKVvsdWzN4ZNlc1njQ2J7W7wzXAOFgXANLAbCNRAMhGsgGFhZA403G4qlogsKb6IAAAAASUVORK5CYII=');
05-webkit-animation: large 3s ease infinite;
06animation: large 3s ease infinite;
07}
08@-webkit-keyframes large{
0950% {
10background-image: url ('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIoAAAAuCAMAAADA1HGuAAAAe1BMVEUAAAD///////////////////////////////////////////////////////////+RNzuZRUmhU1eoYmWwcHO4foHAjY/HFh7Im53LJSzQqavSQkjVUFbZX2TcbXLji4/nmZ3n1NXqqKvv4uP109X38fH44uP88PH///8OmAEfAAAAEHRSTlMAECAwQFBgcICPn6+/z9/vIxqCigAAAZ9JREFUWMPNlu2WgiAQQEP8QETIat2tbT9ct5r3f8LN1TpaYJQE3D/RHH/cMwMzM5tNB4VHgpljcJLl0MEZCV15BITDBYK6sMEUpPDYdkYUIg251cwkAsZIkS0RlMENOLZkksNNhJUbgwXoYMEl0DOx4KJTnQ7WSguWRk9RYfAIgpq/xwk8CjM8pQKYAPGgPOc2bLDzhTANgT1JikmXqUlpXAzVaGQab5aLxdtOI5yb6W7KPrsryhp2m3klC5fDsJF3FClzUmz+f6p5PQxXXXiQF/3+giJyJJGsP6myOqvLQ/uvPB1e+mGq6RHn6jVVOX1W5woU/fCylob10hKL614dJoQylpIYK+uz6p++Ova98BLuTMv1cibS7O7nun5t2asftMnxP8Zna7Id+SRDVkzg8N6YrH8nrJsUTPHzsf0+3PiGPrep38WIC7esou66EVgnfPpN0V+kFCrCvgpE5nfWR8m8eD8tyB8V2cVFxIlK3jR4nvYnNebglMRxdWStFwnnKqd3Td2bAHfX3eRpCX0waYejHyrMM5WA+MCx8f4ByS0/Tk6yxsIAAAAASUVORK5CYII=');
11}
12100% {
13background-image: url ('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIoAAAAuCAMAAADA1HGuAAAAWlBMVEUAAAD///////////////////////////////////////////////////////////+hU1eoYmXAjY/HFh7Im53LJSzVUFbZX2TcbXLji4/qqKv44uP88PH///8siCrvAAAAEHRSTlMAECAwQFBgcICPn6+/z9/vIxqCigAAAVFJREFUGBnNwYlWwjAUBcCbhfSFZnFX1Pv/v2ldUNQWemhIOoMStB0oNGYlJH6JfWfQiNlm/pG8Rn2bwFHBoi4bOKnXqEd5HpM71GIiTwgKVZjMk5JBBY5zZIOL23CebHBhJnOmHPghBTG4AJV4jiQapfU8l1coyvF8eYOCVOYSW5QjXCYqFKIyF4oKZQgXCygjcTmPEgxLsCjAs4SE2bSTgTP4J7KIDrNoSfySvMYvimUkzKAk85BXgLIifQgiG8cp11d7NzxwfbV3x0MOJ5nIP5JEltfjFJO53MvuGycJjjOZBbw+3n6633FaMjhCRZbxsnt8eHh6fuVRDtOEdTlM0azNYoJnbVlhXGJ1HqMMG9AY49hAhzHCBiLGCFvACN2zhZBIxk7hh8tsKVvsdWzN4ZNlc1njQ2J7W7wzXAOFgXANLAbCNRAMhGsgGFhZA403G4qlogsKb6IAAAAASUVORK5CYII=');
14}
15}
16@keyframes large{
1750% {
18background-image: url ('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIoAAAAuCAMAAADA1HGuAAAAe1BMVEUAAAD///////////////////////////////////////////////////////////+RNzuZRUmhU1eoYmWwcHO4foHAjY/HFh7Im53LJSzQqavSQkjVUFbZX2TcbXLji4/nmZ3n1NXqqKvv4uP109X38fH44uP88PH///8OmAEfAAAAEHRSTlMAECAwQFBgcICPn6+/z9/vIxqCigAAAZ9JREFUWMPNlu2WgiAQQEP8QETIat2tbT9ct5r3f8LN1TpaYJQE3D/RHH/cMwMzM5tNB4VHgpljcJLl0MEZCV15BITDBYK6sMEUpPDYdkYUIg251cwkAsZIkS0RlMENOLZkksNNhJUbgwXoYMEl0DOx4KJTnQ7WSguWRk9RYfAIgpq/xwk8CjM8pQKYAPGgPOc2bLDzhTANgT1JikmXqUlpXAzVaGQab5aLxdtOI5yb6W7KPrsryhp2m3klC5fDsJF3FClzUmz+f6p5PQxXXXiQF/3+giJyJJGsP6myOqvLQ/uvPB1e+mGq6RHn6jVVOX1W5woU/fCylob10hKL614dJoQylpIYK+uz6p++Ova98BLuTMv1cibS7O7nun5t2asftMnxP8Zna7Id+SRDVkzg8N6YrH8nrJsUTPHzsf0+3PiGPrep38WIC7esou66EVgnfPpN0V+kFCrCvgpE5nfWR8m8eD8tyB8V2cVFxIlK3jR4nvYnNebglMRxdWStFwnnKqd3Td2bAHfX3eRpCX0waYejHyrMM5WA+MCx8f4ByS0/Tk6yxsIAAAAASUVORK5CYII=');
19}
20100% {
21background-image: url ('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIoAAAAuCAMAAADA1HGuAAAAWlBMVEUAAAD///////////////////////////////////////////////////////////+hU1eoYmXAjY/HFh7Im53LJSzVUFbZX2TcbXLji4/qqKv44uP88PH///8siCrvAAAAEHRSTlMAECAwQFBgcICPn6+/z9/vIxqCigAAAVFJREFUGBnNwYlWwjAUBcCbhfSFZnFX1Pv/v2ldUNQWemhIOoMStB0oNGYlJH6JfWfQiNlm/pG8Rn2bwFHBoi4bOKnXqEd5HpM71GIiTwgKVZjMk5JBBY5zZIOL23CebHBhJnOmHPghBTG4AJV4jiQapfU8l1coyvF8eYOCVOYSW5QjXCYqFKIyF4oKZQgXCygjcTmPEgxLsCjAs4SE2bSTgTP4J7KIDrNoSfySvMYvimUkzKAk85BXgLIifQgiG8cp11d7NzxwfbV3x0MOJ5nIP5JEltfjFJO53MvuGycJjjOZBbw+3n6633FaMjhCRZbxsnt8eHh6fuVRDtOEdTlM0azNYoJnbVlhXGJ1HqMMG9AY49hAhzHCBiLGCFvACN2zhZBIxk7hh8tsKVvsdWzN4ZNlc1njQ2J7W7wzXAOFgXANLAbCNRAMhGsgGFhZA403G4qlogsKb6IAAAAASUVORK5CYII=');
22}
23}
1<div class="cloud large"></div>

以上代码在PC上用chrome测试妥妥的,效果还可以,直接用手机连wifi一看,完全一个静态表情啊,切到Android版的chrome

也是妥妥的,哎,这尼玛又被坑了。

后来在网上查了一下,发现background-image的“Animatable:no”

While CSS Backgrounds and Borders Module Level 3 Editor’s Draft says “Animatable: no” for

background-image at the time of writing, support for crossfading images in CSS appeared in Chrome 19 Canary.

Until widespread support arrives this can be faked via image sprites and background-position or

opacity.

引文出自:http://oli.jp/2010/css-animatable-properties

好吧,找到方向了,开始动手。开始尝试一下background-position来切换,结果不理想,只看到两个背景用位移来切换的,

一个跑马灯的效果,代码就不列举了。

继续折腾,用JS来处理,看着一堆代码,想着就麻烦。推翻重来,回到HTML和CSS上,经过一翻调整,终于整出来了在chrome

上直接用background-image的效果,分两步:

  1. 调整HTML结构,给原来HTML元素增加一个子元素
  2. 调整CSS,控制新增子元素的opacity值

代码示例:

01.cloud{
02position: absolute;
03width: 100%;
04height: 100%;
05background-color: transparent;
06background-repeat: no-repeat;
07background-position: 0 0;
08}
09.cloud .switch{
10width: 100%;
11height: 100%;
12opacity: 0;
13-webkit-animation: switch 2s ease infinite;
14animation: switch 2s ease infinite;
15}
16@-webkit-keyframes switch{
1750% {
18opacity: 1;
19}
20100% {
21opacity: 0;
22}
23}
24@keyframes switch{
2550% {
26opacity: 1;
27}
28100% {
29opacity: 0;
30}
31}
32.cloud.large, .cloud.large .switch{
33width: 138px;
34height: 46px;
35background-image: url ('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAARQAAAAuCAMAAADeOBY0AAAAflBMVEUAAAD///////////////////////////////////////////////////////////////+RNzuZRUmhU1eoYmWwcHO4foHAjY/HFh7Im53LJSzQqavSQkjVUFbZX2TcbXLji4/nmZ3n1NXqqKvv4uP109X38fH44uP88PH///8stMF9AAAAEXRSTlMAABAgMEBQYHCAj5+vv8/f7/4ucL8AAAMqSURBVGje7ZrbeuIgFEYrhxCScOhpnNaxddpO637/F5yoSY0RTBACueh/Y8qF33JtILC/3iwWN97BtA7y/JIQIGgHgv1BPFkoFwqayConyaSQvJItiBKcJpNCSg29qAInkIK56oPokqaQkgkwRtDIUkhpBlEsthRqUbJLhSNKwaUdRNKYUlABl6LzaFJyfZGkQNGkEAkDESiKFFQNgSgSSQrRAMFhrgFBchhEsyhSGIyJJpNLGVOcOiyClAxgCivuIFiPJGGTSyFjUUCL77MUmUDKmLXT7nC6ASqySaQgBddEcRxairgKRJckvJQKrs3A29EVJL8aRODAUhhcH50FlII9QIAHlYK0DwuU4aQILxCJAkrhAFPBuIFQT5ALr0ZXKZ4T5aIVNykCJrPiKsV3oux2uSBSqD+IRoGkKH8WKEJIuXAzXj3c3z99jhiWYaQQCBHqL8W+jD/vlh/wubp9Mw0vT4d5EClFECnKX4r9pnG32n+83X6cDr81wydzBY+XghmvwwwbkQwiBfKRUlC2A8mpQ3VWj/2Hw1/L9uHX8AnhXEqn23nWbkVhnFimSg8EMWlvt1qr8/i9Pu66ww8fxmHzVOlLQVyfncwR5bwSgvPMfpqtN7EmS/Pw0/Ct9VQK0+cnc5rzUoiinsRWkMfu06bJV2f4Yfgw2ZNy3lBTPNCSOe3hDkk5b6jpwv3S9fz7kC/7a3lYCtEBfvDX5jtud48OCApTideDk/Wl8qABKUGcwPalqc/zxq1ZeQQJ5AS2f/Yc/xyblV0poVDqufKyXr++bx27YUcpZbB1+v6y/rt1vaR2pXCIG2aTQiODlHYpGGKHWqSo2CDcKqWILqV3I2tBMkhcno4UFZ+lMEop44NIixQCCYJNUnQCkMwshaWQkhuk4BQglVkKT8EiDVJoChBA85ECs5FCTVJwlYRl/69hMkdHKShNdaQ8tgVaKUxDymjaSiEqKch+l2uk5JA67CCFJgcpWynpUUDjHQjS6UmyRopKj1JXqAYpZwCiDlIIzCGoZtFzAMn2UvgspNDFgs4ChM9ICp+LFPEjxSaF8jkELxZ4FiD1Ov4Pwj6gn20XvJsAAAAASUVORK5CYII=');
36}
37.cloud.large .switch{
38background-position: -138px 0;
39}
1<div class="cloud large"><div class="switch"></div></div>

搞定!测试页面:http://tid.tenpay.com/labs/example/cloud/

原文:http://www.tuquu.com/Tutorial/wd2631.html

相关推荐

ganyouxianjava / 0评论 2012-05-31