WebKit的图像魔法:深入CSS Image Values支持
/* 定义一个简单的CSS规则,使用WebKit的图片值特性 */
@-webkit-keyframes {
0% {
background-image: -webkit-canvas(magic_sponge);
}
100% {
background-image: -webkit-canvas(oil_slick);
}
}
/* 在canvas上定义魔法动画 */
body {
-webkit-animation-name: magic;
-webkit-animation-duration: 5s;
-webkit-animation-iteration-count: infinite;
}
/* 在WebKit内核的浏览器中,这将创建一个背景图像的变化动画 */
这个CSS样例展示了如何在WebKit浏览器中使用@-webkit-keyframes
规则和-webkit-canvas
功能来创建一个简单的背景图像动画。这个特性在旧版的WebKit浏览器中可能不被支持,但在一些移动浏览器中可能会有奇特的视觉效果。注意,由于这是一个非标准特性,最好在较新的浏览器中测试其兼容性。
评论已关闭