CSS3特效:CSS蓝天白云背景变换动画

2016年12月1日 1193点热度 1人点赞 0条评论

手机网站的北景用的是图片,显示的效果总是有点模糊,于是考虑能不能让CSS实现蓝天白云,经过搜索之后,找到一个不错的特效,虽然不是全CSS实现的,但是使用CSS3特效,再加上图片的锯齿相对减少,于是果断的收藏下来。

bluesky

CSS代码如下:


.sky {
  height: 480px;
  background: #007fd5;
  position: relative;
  overflow: hidden;
  -webkit-animation: sky_background 50s ease-out infinite;
  -moz-animation: sky_background 50s ease-out infinite;
  -o-animation: sky_background 50s ease-out infinite;
  animation: sky_background 50s ease-out infinite;
  -webkit-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.clouds_one {
  background: url("img/cloud_one.png");
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 300%;
  -webkit-animation: cloud_one 50s linear infinite;
  -moz-animation: cloud_one 50s linear infinite;
  -o-animation: cloud_one 50s linear infinite;
  animation: cloud_one 50s linear infinite;
  -webkit-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.clouds_two {
  background: url("img/cloud_two.png");
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 300%;
  -webkit-animation: cloud_two 75s linear infinite;
  -moz-animation: cloud_two 75s linear infinite;
  -o-animation: cloud_two 75s linear infinite;
  animation: cloud_two 75s linear infinite;
  -webkit-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.clouds_three {
  background: url("img/cloud_three.png");
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 300%;
  -webkit-animation: cloud_three 100s linear infinite;
  -moz-animation: cloud_three 100s linear infinite;
  -o-animation: cloud_three 100s linear infinite;
  animation: cloud_three 100s linear infinite;
  -webkit-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

@-webkit-keyframes sky_background {
  0% {
	background: #007fd5;
	color: #007fd5
  }
  50% {
	background: #000;
	color: #a3d9ff
  }
  100% {
	background: #007fd5;
	color: #007fd5
  }
}
@-moz-keyframes sky_background {
  0% {
	background: #007fd5;
	color: #007fd5
  }
  50% {
	background: #000;
	color: #a3d9ff
  }
  100% {
	background: #007fd5;
	color: #007fd5
  }
}
@keyframes sky_background {
  0% {
	background: #007fd5;
	color: #007fd5
  }
  50% {
	background: #000;
	color: #a3d9ff
  }
  100% {
	background: #007fd5;
	color: #007fd5
  }
}

@-webkit-keyframes cloud_one {
  0% {
	left: 0
  }
  100% {
	left: -200%
  }
}
@-moz-keyframes cloud_one {
  0% {
	left: 0
  }
  100% {
	left: -200%
  }
}
@keyframes cloud_one {
  0% {
	left: 0
  }
  100% {
	left: -200%
  }
}

@-webkit-keyframes cloud_two {
  0% {
	left: 0
  }
  100% {
	left: -200%
  }
}
@-moz-keyframes cloud_two {
  0% {
	left: 0
  }
  100% {
	left: -200%
  }
}
@keyframes cloud_two {
  0% {
	left: 0
  }
  100% {
	left: -200%
  }
}

@-webkit-keyframes cloud_three {
  0% {
	left: 0
  }
  100% {
	left: -200%
  }
}
@-moz-keyframes cloud_three {
  0% {
	left: 0
  }
  100% {
	left: -200%
  }
}
@keyframes cloud_three {
  0% {
	left: 0
  }
  100% {
	left: -200%
  }
}

HTML代码如下:


<div class="sky">
<div class="clouds_one"></div>
<div class="clouds_two"></div>
<div class="clouds_three"></div>
</div>

演示地址:点击这里

下载地址:本地下载

via:源码之家

WPTalk

这个人很懒,什么都没留下

文章评论

您需要 登录 之后才可以评论