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

转载于:https://www.cnblogs.com/huanghuali/p/8489479.html

css3动画（animation）效果1-漂浮的白云相关推荐

css3动画-animation
css3动画-animation animation 属性是 8 个属性的简写: 你是否被gif loading加载太慢或有锯齿而感到困扰? 项目中,当页面内容或图片比较多或在加载一些比较大的数据接口 ...
CSS3动画 animation
CSS3动画 animation 动画是使元素从一种样式逐渐变化为另一种样式的效果, 可以改变任意多的样式任意多的次数.请用百分比来规定变化发生的时间,或用关键词 "from" 和 ...
CSS3 动画 animation属性
@keyframes只是用来声明一个动画,而动画本身并不执行任何操作.因此,如果希望为某个元素应用动画,还需要把动画与该元素关联起来. 如果一个动画没有与任何元素关联,它就不会被调用,也就不会产生动画 ...
CSS3动画animation认识和Animate.css的使用
CSS动画可以取代js动画在移动端会更加流畅! 下面是一个的绘制太阳系各大行星运行轨迹笔记,可以自学参考! 首先我们需要创建一个@keyframes规则 @keyframes name{from{w ...
幻灯片（基于CSS3动画animation）
效果预览: 实现思路: 类似于:h5+css3+js之移动端轮播图将存放所有图片的容易按照一定的时间在X轴进行移动,但是此处使用的是纯CSS实现,利用动画animation定义每一帧的动画,在每一帧 ...
Css3动画(animation)
在 CSS3 出现之前,动画都是通过 JavaScript 动态的改变元素的样式属性来完成了,这种方式虽然能够实现动画,但是在性能上存在一些问题.CSS3 的出现,让动画变得更加容易,性能也更加好. ...
css3动画 --- Animation
Animation CSS animations 使得可以将从一个CSS样式配置转换到另一个CSS样式配置. 动画包括两个部分:描述动画的样式规则:用于指定动画开始.结束以及中间点样式的关键帧. 相较 ...
css3动画animation，transition
animation demo1 <!DOCTYPE html> <html><head><meta charset="UTF-8"> ...
CSS3动画animation
一.语法 animation: animation-name(创建的动画名) animation-duration(动画时间) animation-timing-function(动画方式) anim ...
CSS3动画(animation) 捕鱼达人之无限摆动游泳的鱼案例
本案例下载地址>>>点击打开链接效果: 代码: <!DOCTYPE html> <html lang="en"> <head> ...

css3动画（animation）效果1-漂浮的白云

css3动画（animation）效果1-漂浮的白云相关推荐

最新文章

热门文章