css3动画(animation)效果1-漂浮的白云
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>漂浮的白云</title>
<style type="text/css">
.box {
position: relative;
height: 300px;
width: 500px;
} .in1, .in2 {
position: absolute;
height: 100%;
width: 100%;
background-size: cover;
animation: move 100s infinite linear alternate;
} @keyframes move {
100% {
background-position: 500% 0;
}
} .in1 {
background-image: url('http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/cloud.png');
} .in2 {
background-image: url('http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/cloud1.png');
animation-duration: 10s;
}
</style>
</head>
<body>
<h1>漂浮的白云</h1>
<div class="box">
<div class="in1"></div>
<div class="in2"></div>
</div> <strong>【简要介绍】</strong>
<p>漂浮的白云主要通过远景白云和近景白云来实现立体漂浮效果。远景和近景分别使用两张背景图片,通过改变其背景定位来实现白云移动效果,通过设置不同的动画持续时间来实现交错漂浮的效果</p>
</body>
</html>
效果图:
原链接:https://www.cnblogs.com/xiaohuochai/p/5419236.html
css3动画(animation)效果1-漂浮的白云的更多相关文章
- 前端CSS3动画animation用法
前端CSS3动画animation用法 学习如下动画属性 @keyframes animation-name animation-duration animation-delay animation- ...
- CSS3 动画animation
关键帧 什么是关键帧.一如上面对Flash原理的描述一样,我们知道动画其实由许多静态画面组成,第一个这样的静态画面可以表述为一帧.其中关键帧是在动画过程中体现了物理明显变化的那些帧. 比如之前的例子中 ...
- css3 动画(animation)-简单入门
css3之动画(animation) css3中我们可以使用动画,由于取代以前的gif图片,flash动画,以及部分javascript代码(相信有很多同学都用过jquery中的animate方法来做 ...
- CSS3 动画 animation和@keyframes
CSS3 @keyframes 规则 如需在 CSS3 中创建动画,您需要学习 @keyframes 规则. @keyframes 规则用于创建动画.在 @keyframes 中规定某项 CSS 样式 ...
- CSS3动画animation认识,animate.css的使用
CSS动画 可以取代js动画 在移动端会更加流畅! 下面是一个的绘制太阳系各大行星运行轨迹笔记,可以自学参考! -------------------------------------------- ...
- css3动画animation
动画:animation animations这物似乎还是只在webkit,moz核心的浏览器上起作用 <!DOCTYPE html><html lang="en&qu ...
- CSS3 动画Animation的8大属性
animation复合属性.检索或设置对象所应用的动画特效. 如果有多个属性值时以","隔开,适用于所有元素,包含伪对象:after和:before 1.animation-nam ...
- css3动画-animation
animation驱使一组css style变化到另外一组css style,它可以定义keyframes的集合,指定style的开始和结束状态,它是transition的增强. 配置animatio ...
- 最新的css3动画按钮效果
效果演示 插件下载
- 纯CSS3动画按钮效果
在线演示 本地下载
随机推荐
- Flat Shading
[Flat Shading] Per-vertex渲染技术是针对每个顶点进行渲染计算,然后把计算得到的颜色值和这个顶点关联起来.然后在多边形的面上进行颜色插值以后的平滑的渲染效果.这也叫做Gourau ...
- JAVA中Colllection的基本功能
Collection中的add方法: 代码: public static void main(String[] args) { // TODO Auto-generated method ...
- 使用jQuery解析JSON数据-已验证
本文来源于:http://www.cnblogs.com/codeplus/archive/2011/07/18/2109544.html 上例中得到的JSON数据如下,是一个嵌套JSON: {&qu ...
- VUE+WebPack游戏开发:神庙逃亡的游戏设计
- 纸牌游戏CardBattle的设计与开发
- SQL Server的聚集索引和非聚集索引
微软的SQL SERVER提供了两种索引:聚集索引(clustered index,也称聚类索引.簇集索引)和非聚集索引(nonclustered index,也称非聚类索引.非簇集索引)…… (一) ...
- 68. Text Justification一行单词 两端对齐
[抄题]: Given an array of words and a width maxWidth, format the text such that each line has exactly ...
- cannot launch node of type [arbotix_python/arbotix_driver]: arbotix_python
这个时候提示错误: ERROR: cannot launch node of type [arbotix_python/arbotix_driver]: arbotix_python ROS path ...
- /etc/profile、~/.bash_profile等几个文件的执行过程
/etc/profile.~/.bash_profile等几个文件的执行过程 摘自:http://blog.chinaunix.net/uid-14735472-id-3190130.html 分类 ...
- Web大文件上传(断点续传)控件-Xproer.HttpUploader6-安装教程
安装教程: IE8控件安装教程 IE9控件安装教程 Firefox控件安装教程 Chrome控件安装教程 Chrome 45+控件安装教程 相关问题: 提示Runtime Error错误 360拦 ...