css background动态图片,CSS3 background-position定位背景图片动画效果

本章节分享一段代码实例，它实现了利用background-position属性控制背景图片实现动画效果。

背景图片都集中在一张图片上，如下:

蚂蚁部落

* {

padding: 0px;

margin: 0px;

}

body, html {

width: 100%;

height: 100%;

margin: 0px;

padding: 0px;

}

body {

position: relative;

background-attachment: fixed;

}

.zoombie {

width: 200px;

height: 312px;

background-image: url("data/attachment/portal/201703/21/090418lrutld5ary4lbz7z.png");

animation: play 1.8s steps(10) infinite;

}

@keyframes play {

from {

background-position: 0px;

}

to {

background-position: -2000px;

}

#wrapper {

transform: translate(-50%, -50%);

position: absolute;

top: 50%;

left: 50%;

}

css background动态图片,CSS3 background-position定位背景图片动画效果相关推荐

web——CSS精灵图（背景图、定位背景图片background-position属性）
web--CSS精灵图(背景图.定位背景图片background-position 属性) 一.background-position属性二.实例一.background-position属性例 ...
黑马程序员前端-CSS背景：颜色、图片、平铺、背景图片位置、背景图像
前端学习笔记教程不定期更新中,传送门: 前端HTML第一天:什么是网页?什么是HTML?网页怎么形成? 黑马程序员前端-CSS入门总结黑马程序员前端-CSS之emmet语法黑马程序员前端-CSS的 ...
背景属性：背景颜色、背景图片、背景图片平铺方式、背景图片定位、背景属性复合写法
背景属性 1.背景颜色背景颜色应用于:内容区内间距区边框区颜色表现方式:颜色英语单词16进制代码 #rgb(0,0,0) 0-255 .box {width: 200px;height: ...
巧妙的有css合并图片解决tab切换的背景图片
巧妙的有css合并图片解决tab切换的背景图片有时候做tab切换的时候会碰到下面的这种情况我截个图过来看看 tab切换打开页面时候茶庄介绍及鼠标移上去时候是上面这样的效果当鼠标移下 ...
[css] 举例说明在css3中怎么实现背景裁剪？
[css] 举例说明在css3中怎么实现背景裁剪? background-clip: border-box(默认,背景延伸至边框外沿,但是在边框的下层) padding-box(背景延伸至paddin ...
悬停渐变特效html,CSS3 transition属性实现hover渐变动画效果
CSS3 transition属性实现hover渐变动画效果我们知道许多网页动态特效都是由FLASH或JQUERY之类的JS特效库实现的实际上现在CSS3也能实现很多类似效果了,只是在各种浏览器中兼 ...
设置背景图片，解决手机上背景图片高度适应问题
设置背景图片,解决手机上背景图片高度适应问题第一种方法:直接对图片进行设置,代码如下 <img src="url" class="PhoneBack"& ...
HTML中button怎么填充GIF,css3给按钮添加背景渐变动画
css3给按钮添加背景渐变动画 button { color:#FFF; font-size:16px; outline:none; width:300px; height:48px; backgro ...
html怎么用小小的图片铺满作为背景,多种背景图片随机切换的应用
在皮肤『QQ Style』中我使用了随机背景切换功能,这个随机背景切换是一个独立的功能,上面使用的只是其中一小部分应用.下面我将演示背景随机切换的更多应用,然后大家就可以有更多的拓展. 第一:背景图片 ...
用css3实现摩天轮旋转的动画效果
用css3实现摩天轮旋转的动画效果 1.CSS3 @keyframes 规则如需在 CSS3 中创建动画,您需要学习 @keyframes 规则. @keyframes 规则用于创建动画.在 @ke ...

css background动态图片,CSS3 background-position定位背景图片动画效果

css background动态图片,CSS3 background-position定位背景图片动画效果相关推荐

最新文章

热门文章