html5多重背景图片,多重背景CSS动画
CSS背景动画很长时间以来都是一个热门话题,很多时候都是因为效果特别绚丽,而且不需要额外的技术。最近有人问我是否可以给页面上一个指定的元素安排多重背景动画,答案是yes….虽然有些限制因素。让我们来看看如何实现这个效果!
CSS代码
给一个页面元素设置多个背景图片,这种技术很早就可行了,你只需要用逗号把各个背景分隔开:
.animate-area{
background-image: url(twitter-logo-bird.png), url(treehouseFrog.png), url(bg-clouds.png);
background-position: 20px -90px, 30px 80px, 0px 0px;
background-repeat: no-repeat, no-repeat, repeat-x;
}
需要注意的是,你希望出现在最上层的背景图应该放在图片队列的第一位。让这些背景图片动起来需要变化background-position,也是用逗号分隔:
@keyframes animatedBird {
from { background-position: 20px 20px, 30px 80px, 0 0; }
to { background-position: 300px -90px, 30px 20px, 100% 0; }
}
.animate-area{
animation: animatedBird 4s linear infinite;
}
这样做的结果就是三种背景在同一个元素上移动!
当然,这样实现的并不是最理想的效果,你无法单个的移动某个背景图片的位置,它们必须保持相同的速率和持续时间。
html5多重背景图片,多重背景CSS动画相关推荐
- php背景图片 存放位置,CSS中背景图片位置 background-position 的使用方法
在使用背景图片时,经常会遇到背景图片所在的位置不是我们想要的,那如何设置背景图片的位置呢?以下就来介绍CSS中背景图片位置 background-position 的用法. 在背景图片的背景图片位置属 ...
- CSS 背景色 背景图片 渐变背景 - 径向渐变 background-image:radial-gradient()
radial-gradient() 用来生成径向渐变的图片 基础语法 background-image: radial-gradient(shape extent at positionX posit ...
- Web前端,CSS中关于背景颜色、背景图片、背景平铺、背景位置、背景相关属性连写
前言 持续总结输出中,今天分享的是Web前端,CSS中关于背景颜色.背景图片.背景平铺.背景位置.背景相关属性连写 1.背景颜色 background-color(bgc) 颜色取值: 关键字.rgb ...
- CSS背景图片定位(background-position,css sprit,背景定位,background-imag
CSS背景图片定位(background-position,css sprit,背景定位,background-imag 标签: 杂谈 分类: css 在CSS中,背景图片的定位方位有3种: 1)关键 ...
- Css的背景(背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定)
通过css背景属性,可以给页面元素添加背景样式. 背景属性可以设置背景颜色.背景图片.背景平铺.背景图片位置.背景图像固定等. 背景颜色: Background-color:#******: < ...
- CSS的背景属性设置(背景颜色、背景图片、背景平铺、背景附着、背景复合写法)
文章目录 1 背景颜色 2 背景图片 3 背景平铺 4 背景图片位置 5 背景图像固定(背景附着) 6 背景复合写法 7 背景色半透明 8 背景总结 案例:五彩导航 通过CSS背景属性,可以给页面元素 ...
- CSS 背景色 背景图片 渐变背景 - 重复线性渐变 background-image: repeating-linear-gradient()
repeating-linear-gradient() 用来生成重复的线性渐变图案 基础语法 background-image: repeating-linear-gradient(angleValu ...
- 【CSS】 Css背景图片及背景渐变综合知识和技巧大全(代码实例)
background-image:url("baif.png"); 背景图片地址 背景图片大小设置 background-size:30%; 0%~100%之间的任何值,将背景图片 ...
- 【CSS】CSS 背景设置 ④ ( 超大背景图片设置 | 背景图片定位设置 background-position: center top; )
文章目录 一.超大背景图片设置 1.超大背景图片问题 2.超大背景图片默认显示 3.超大背景图片推荐定位方式 4.超大背景图片编辑策略 二.代码示例 1.背景图片展示 2.代码示例 3.展示效果 一. ...
- html实现图片加载动画效果,HTML5+javascript实现图片加载进度动画效果
在网上找资料的时候,看到网上有图片加载进度的效果,手痒就自己也写了一个. 图片加载完后,隐藏loading效果. 想看加载效果,请ctrel+F5强制刷新或者清理缓存. 效果预览: 0% 代码如下: ...
最新文章
- python做测试书籍推荐_学习pytest应该观看的书籍?
- 超越PVT、Swin,南大开源高效Transformer:ResT​
- 「周末观赛指南」澳网新王当立?勇士冲击十连胜
- 信用卡葵花宝典笔记(一)
- 安卓使用ImageView显示OpenCV-Mat
- json怎么读取数据库_如何:使用Json插入数据库并从中读取
- c语言删除文件remove_Python中的文件和目录操作
- oracle 根据分隔符提取,oracle使用指定分隔符导出数据到文件
- 3Dshader之膨胀与收缩
- 苹果7闪存速度测试软件,iphone6 plus闪存检测教程 iphone6检测tlc闪存图文步骤
- 列存储中常用的数据压缩算法
- 寻找春天nbsp;九宫格日记-2012.03.09
- 计算机操作系统产生的先后顺序,任务调度优先级
- 【干货】消费金融助贷业务实操全速览
- 骁龙855和Helio P90为什么没有与A12和麒麟980“相同”的NPU?...
- 前端高效开发必备的 js 库
- string类型转换成LPCTSTR
- toft 测试用例rat_TD-LTE终端测试规范——通信功能和性能分册(上).pdf
- 【我参加NVIDIA Sky Hackathon】感悟篇
- 求助!matlab软件下SVM(支持向量机)做回归预测,软件版本为2016b看,老是报错看,不知道怎么解决这个问题。