对CSS3的强大一如既往的自信，自己在倒腾一个用例，就是一朵白云的两个表情切换，想想很容易实现吧，在PC上也是如此，
用两个keyframes就搞定了。
代码示例：
04 |
background-image: url ('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIoAAAAuCAMAAADA1HGuAAAAWlBMVEUAAAD///////////////////////////////////////////////////////////+hU1eoYmXAjY/HFh7Im53LJSzVUFbZX2TcbXLji4/qqKv44uP88PH///8siCrvAAAAEHRSTlMAECAwQFBgcICPn6+/z9/vIxqCigAAAVFJREFUGBnNwYlWwjAUBcCbhfSFZnFX1Pv/v2ldUNQWemhIOoMStB0oNGYlJH6JfWfQiNlm/pG8Rn2bwFHBoi4bOKnXqEd5HpM71GIiTwgKVZjMk5JBBY5zZIOL23CebHBhJnOmHPghBTG4AJV4jiQapfU8l1coyvF8eYOCVOYSW5QjXCYqFKIyF4oKZQgXCygjcTmPEgxLsCjAs4SE2bSTgTP4J7KIDrNoSfySvMYvimUkzKAk85BXgLIifQgiG8cp11d7NzxwfbV3x0MOJ5nIP5JEltfjFJO53MvuGycJjjOZBbw+3n6633FaMjhCRZbxsnt8eHh6fuVRDtOEdTlM0azNYoJnbVlhXGJ1HqMMG9AY49hAhzHCBiLGCFvACN2zhZBIxk7hh8tsKVvsdWzN4ZNlc1njQ2J7W7wzXAOFgXANLAbCNRAMhGsgGFhZA403G4qlogsKb6IAAAAASUVORK5CYII='); |
05 |
-webkit-animation: large 3s ease infinite; |
06 |
animation: large 3s ease infinite; |
08 |
@-webkit-keyframes large{ |
10 |
background-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='); |
13 |
background-image: url ('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIoAAAAuCAMAAADA1HGuAAAAWlBMVEUAAAD///////////////////////////////////////////////////////////+hU1eoYmXAjY/HFh7Im53LJSzVUFbZX2TcbXLji4/qqKv44uP88PH///8siCrvAAAAEHRSTlMAECAwQFBgcICPn6+/z9/vIxqCigAAAVFJREFUGBnNwYlWwjAUBcCbhfSFZnFX1Pv/v2ldUNQWemhIOoMStB0oNGYlJH6JfWfQiNlm/pG8Rn2bwFHBoi4bOKnXqEd5HpM71GIiTwgKVZjMk5JBBY5zZIOL23CebHBhJnOmHPghBTG4AJV4jiQapfU8l1coyvF8eYOCVOYSW5QjXCYqFKIyF4oKZQgXCygjcTmPEgxLsCjAs4SE2bSTgTP4J7KIDrNoSfySvMYvimUkzKAk85BXgLIifQgiG8cp11d7NzxwfbV3x0MOJ5nIP5JEltfjFJO53MvuGycJjjOZBbw+3n6633FaMjhCRZbxsnt8eHh6fuVRDtOEdTlM0azNYoJnbVlhXGJ1HqMMG9AY49hAhzHCBiLGCFvACN2zhZBIxk7hh8tsKVvsdWzN4ZNlc1njQ2J7W7wzXAOFgXANLAbCNRAMhGsgGFhZA403G4qlogsKb6IAAAAASUVORK5CYII='); |
18 |
background-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='); |
21 |
background-image: url ('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIoAAAAuCAMAAADA1HGuAAAAWlBMVEUAAAD///////////////////////////////////////////////////////////+hU1eoYmXAjY/HFh7Im53LJSzVUFbZX2TcbXLji4/qqKv44uP88PH///8siCrvAAAAEHRSTlMAECAwQFBgcICPn6+/z9/vIxqCigAAAVFJREFUGBnNwYlWwjAUBcCbhfSFZnFX1Pv/v2ldUNQWemhIOoMStB0oNGYlJH6JfWfQiNlm/pG8Rn2bwFHBoi4bOKnXqEd5HpM71GIiTwgKVZjMk5JBBY5zZIOL23CebHBhJnOmHPghBTG4AJV4jiQapfU8l1coyvF8eYOCVOYSW5QjXCYqFKIyF4oKZQgXCygjcTmPEgxLsCjAs4SE2bSTgTP4J7KIDrNoSfySvMYvimUkzKAk85BXgLIifQgiG8cp11d7NzxwfbV3x0MOJ5nIP5JEltfjFJO53MvuGycJjjOZBbw+3n6633FaMjhCRZbxsnt8eHh6fuVRDtOEdTlM0azNYoJnbVlhXGJ1HqMMG9AY49hAhzHCBiLGCFvACN2zhZBIxk7hh8tsKVvsdWzN4ZNlc1njQ2J7W7wzXAOFgXANLAbCNRAMhGsgGFhZA403G4qlogsKb6IAAAAASUVORK5CYII='); |
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的效果，分两步：
- 调整HTML结构，给原来HTML元素增加一个子元素
- 调整CSS，控制新增子元素的opacity值
代码示例：
05 |
background-color: transparent; |
06 |
background-repeat: no-repeat; |
07 |
background-position: 0 0; |
13 |
-webkit-animation: switch 2s ease infinite; |
14 |
animation: switch 2s ease infinite; |
16 |
@-webkit-keyframes switch{ |
32 |
.cloud.large, .cloud.large .switch{ |
35 |
background-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='); |
38 |
background-position: -138px 0; |
1 |
<div class="cloud large"><div class="switch"></div></div> |
搞定！测试页面：http://tid.tenpay.com/labs/example/cloud/
免责声明：本站文章系图趣网整理发布，如需转载，请注明出处，素材资料仅供个人学习与参考，请勿用于商业用途！
本文地址：
http://www.tuquu.com/tutorial/wd2631.html
