外贸建站之纯CSS动画效果天之蓝滚动的白云代码分享

/*改写chinaobd2.com Begin*/
/*如有定义header, footer 注意设置相应的位置，颜色等*/
body {
  padding-top: 0px;
}
@media (max-width: 577px) {
  body {
    padding-top: 35px;
  }
}

/*应用效果；未应用效果时可直接清除*/
@media (min-width: 768px) {
  header {
    background: #0064A6;
    padding-top: 40px;
    position: relative;
  }
}

footer {
  background: rgba(230,230,230,1);
  padding-top: 1rem;
}

/*header. footer, main*/
.xr-hd-logo h1,
.xr-hd-logo span {
  font-size: 55%;
  font-weight: normal;
  color: #CCC; /*未应用效果时一般为999*/
  text-align: center;
  position: absolute;
  left: 33%;
  top: 67%;
  margin: 0px;
  padding: 0px;
  overflow: hidden;
  width: 65%;
}

@media (min-width: 992px) {
  .xr-hd-logo h1,
  .xr-hd-logo span {
    font-size: 65%;
  }
}
@media (min-width: 1200px) {
  .xr-hd-logo h1,
  .xr-hd-logo span {
    font-size: 75%;
  }
}

.xr-bg-picture {
  background: url(images/logo_bg_s_gray.png) no-repeat center center;
}

/*应用效果，注意body, nav 菜单栏需要修正位置*/
@media (min-width: 1200px) {
  .xr-365-hd-nav-md-right {
    padding-top: 4px;
  }
}
.xr-365-hd-nav-poptags a {
  color: #E8E8E8 !important;
}
.xr-365-hd-nav-poptags a:hover {
  color: #FFFF00 !important;
}
.xr-365-bg-darkblue {
  background: #0064A6;
}

.xr-365-hd-nav-navbar {
}

@media (min-width: 768px) {
 .xr-365-sky {
    background: #007fd5;
    position: absolute;
    overflow: hidden;
    -webkit-animation: xr-365-sky-background 50s ease-out infinite;
    -moz-animation: xr-365-sky-background 50s ease-out infinite;
    -o-animation: xr-365-sky-background 50s ease-out infinite;
    animation: xr-365-sky-background 50s ease-out infinite;
    height: 100%; /*如果需要，可以调节高度*/
    width: 100%;
    margin-top: -40px;
   }
}

.xr-365-sky-clouds-1 {
  background: url(images/assets/cloud_one.png);
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 300%;
  -webkit-animation: xr-365-sky-cloud-ani-1 50s linear infinite;
  -moz-animation: xr-365-sky-cloud-ani-1 50s linear infinite;
  -o-animation: xr-365-sky-cloud-ani-1 50s linear infinite;
  animation: xr-365-sky-cloud-ani-1 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);
}

.xr-365-sky-clouds-2 {
  background: url(images/assets/cloud_two.png);
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 300%;
  -webkit-animation: xr-365-sky-cloud-ani-2 75s linear infinite;
  -moz-animation: xr-365-sky-cloud-ani-2 75s linear infinite;
  -o-animation: xr-365-sky-cloud-ani-2 75s linear infinite;
  animation: xr-365-sky-cloud-ani-2 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);
}

.xr-365-sky-clouds-3 {
  background: url(images/assets/cloud_three.png);
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 300%;
  -webkit-animation: xr-365-sky-cloud-ani-3 100s linear infinite;
  -moz-animation: xr-365-sky-cloud-ani-3 100s linear infinite;
  -o-animation: xr-365-sky-cloud-ani-3 100s linear infinite;
  animation: xr-365-sky-cloud-ani-3 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 xr-365-sky-background {
  0% {
  background: #007fd5;
  color: #007fd5
  }
  50% {
  background: #000;
  color: #a3d9ff
  }
  100% {
  background: #007fd5;
  color: #007fd5
  }
}
@-moz-keyframes xr-365-sky-background {
  0% {
  background: #007fd5;
  color: #007fd5
  }
  50% {
  background: #000;
  color: #a3d9ff
  }
  100% {
  background: #007fd5;
  color: #007fd5
  }
}
@keyframes xr-365-sky-background {
  0% {
  background: #007fd5;
  color: #007fd5
  }
  50% {
  background: #000;
  color: #a3d9ff
  }
  100% {
  background: #007fd5;
  color: #007fd5
  }
}

@-webkit-keyframes xr-365-sky-cloud-ani-1 {
  0% {
  left: 0
  }
  100% {
  left: -200%
  }
}
@-moz-keyframes xr-365-sky-cloud-ani-1 {
  0% {
  left: 0
  }
  100% {
  left: -200%
  }
}
@keyframes xr-365-sky-cloud-ani-1 {
  0% {
  left: 0
  }
  100% {
  left: -200%
  }
}

@-webkit-keyframes xr-365-sky-cloud-ani-2 {
  0% {
  left: 0
  }
  100% {
  left: -200%
  }
}
@-moz-keyframes xr-365-sky-cloud-ani-2 {
  0% {
  left: 0
  }
  100% {
  left: -200%
  }
}
@keyframes xr-365-sky-cloud-ani-2 {
  0% {
  left: 0
  }
  100% {
  left: -200%
  }
}

@-webkit-keyframes xr-365-sky-cloud-ani-3 {
  0% {
  left: 0
  }
  100% {
  left: -200%
  }
}
@-moz-keyframes xr-365-sky-cloud-ani-3 {
  0% {
  left: 0
  }
  100% {
  left: -200%
  }
}
@keyframes xr-365-sky-cloud-ani-3 {
  0% {
  left: 0
  }
  100% {
  left: -200%
  }
}

@media (min-width: 768px) {
  .xr-365-effect-car {
    position: relative;
    padding-top: 30px;
  }
}

.xr-365-effect-car-stone {
  width: 30px;
  height: 16px;
  background: #333;
  border-radius: 16px 16px 5px 5px;
  position: absolute;
  left: 70%;
  box-shadow: 1px 1px 1px #333;
  bottom: 0;
}

.chinaobd2-com {
  position: absolute;
  left: 0;
  z-index: 7;
  -webkit-animation: chinaobd2-com-ani-driving 20s ease-in infinite;
  -moz-animation: chinaobd2-com-ani-driving 20s ease-in infinite;
  -o-animation: chinaobd2-com-ani-driving 20s ease-in infinite;
  -ms-animation: chinaobd2-com-ani-driving 20s ease-in infinite;
  animation: chinaobd2-com-ani-driving 20s ease-in infinite;
  bottom: 90px;
}
@-webkit-keyframes chinaobd2-com-ani-driving {
  0% {
    left:90%;
  }
  2.5% {
    left:71%;
    bottom:90px;
    transform:rotate(0deg);
  }
  3% {
    left:70%;
    bottom:110px;
    transform:rotate(-10deg);
  }
  3.5% {
    left:69.5%;
    bottom:95px;
    transform:rotate(-8deg);
  }
  3.6%,5% {
    left:66%;
    bottom:90px;
    transform:rotate(0deg);
  }
  12.5% {
    left:50%;
  }
  25%,100% {
    left:-200%;
  }
}
@-moz-keyframes chinaobd2-com-ani-driving {
  0% {
    left:90%;
  }
  2.5% {
    left:71%;
    bottom:90px;
    transform:rotate(0deg);
  }
  3% {
    left:70%;
    bottom:110px;
    transform:rotate(-10deg);
  }
  3.5% {
    left:69.5%;
    bottom:95px;
    transform:rotate(-8deg);
  }
  3.6%,5% {
    left:66%;
    bottom:90px;
    transform:rotate(0deg);
  }
  12.5% {
    left:50%;
  }
  25%,100% {
    left:-200%;
  }
}
@-o-keyframes chinaobd2-com-ani-driving {
  0% {
    left:90%;
  }
  2.5% {
    left:71%;
    bottom:90px;
    transform:rotate(0deg);
  }
  3% {
    left:70%;
    bottom:110px;
    transform:rotate(-10deg);
  }
  3.5% {
    left:69.5%;
    bottom:95px;
    transform:rotate(-8deg);
  }
  3.6%,5% {
    left:66%;
    bottom:90px;
    transform:rotate(0deg);
  }
  12.5% {
    left:50%;
  }
  25%,100% {
    left:-200%;
  }
}
@-ms-keyframes chinaobd2-com-ani-driving {
  0% {
    left:90%;
  }
  2.5% {
    left:71%;
    bottom:90px;
    transform:rotate(0deg);
  }
  3% {
    left:70%;
    bottom:110px;
    transform:rotate(-10deg);
  }
  3.5% {
    left:69.5%;
    bottom:95px;
    transform:rotate(-8deg);
  }
  3.6%,5% {
    left:66%;
    bottom:90px;
    transform:rotate(0deg);
  }
  12.5% {
    left:50%;
  }
  25%,100% {
    left:-200%;
  }
}
@keyframes chinaobd2-com-ani-driving {
  0% {
    left:90%;
  }
  2.5% {
    left:71%;
    bottom:90px;
    transform:rotate(0deg);
  }
  3% {
    left:70%;
    bottom:110px;
    transform:rotate(-10deg);
  }
  3.5% {
    left:69.5%;
    bottom:95px;
    transform:rotate(-8deg);
  }
  3.6%,5% {
    left:66%;
    bottom:90px;
    transform:rotate(0deg);
  }
  12.5% {
    left:50%;
  }
  25%,100% {
    left:-200%;
  }
}

.chinaobd2-com .chinaobd2-com-body {
  position: absolute;
  -webkit-animation:chinaobd2-com-ani-body-shake 5s ease-in infinite;
  -moz-animation:chinaobd2-com-ani-body-shake 5s ease-in infinite;
  -o-animation:chinaobd2-com-ani-body-shake 5s ease-in infinite;
  -ms-animation:chinaobd2-com-ani-body-shake 5s ease-in infinite;
  animation:chinaobd2-com-ani-body-shake 5s ease-in infinite;
}
@-webkit-keyframes chinaobd2-com-ani-body-shake {
  0%,16%,18.3%,100% {
    top:0;
  }
  17.4% {
    top:8px;
  }
}
@-moz-keyframes chinaobd2-com-ani-body-shake {
  0%,16%,18.3%,100% {
    top:0;
  }
  17.4% {
    top:8px;
  }
}
@-o-keyframes chinaobd2-com-ani-body-shake {
  0%,16%,18.3%,100% {
    top:0;
  }
  17.4% {
    top:8px;
  }
}
@-ms-keyframes chinaobd2-com-ani-body-shake {
  0%,16%,18.3%,100% {
    top:0;
  }
  17.4% {
    top:8px;
  }
}
@keyframes chinaobd2-com-ani-body-shake {
  0%,16%,18.3%,100% {
    top:0;
  }
  17.4% {
    top:8px;
  }
}

.chinaobd2-com .chinaobd2-com-body-top-1, .chinaobd2-com .chinaobd2-com-body-top-2 {
  width:45px;
  height: 35px;
  border-top-left-radius:10px;
  border-top-right-radius:10px;
  background: rgb(246,126,40);
  position: absolute;
  left:0;
  top:0;
  -webkit-transform:skew(24deg);
  -moz-transform:skew(24deg);
  -o-transform:skew(24deg);
  -ms-transform:skew(24deg);
  transform:skew(24deg);
}
.chinaobd2-com .chinaobd2-com-body-top-1 {
  left:-29px;
  top:0px;
  -webkit-transform:skew(-24deg);
  -moz-transform:skew(-24deg);
  -o-transform:skew(-24deg);
  -ms-transform:skew(-24deg);
  transform:skew(-24deg);
}
.chinaobd2-com .chinaobd2-com-body-window-1, .chinaobd2-com .chinaobd2-com-body-window-2 {
  width:24px;
  height:24px;
  background: #fff;
  border-top-left-radius:10px;
  position: absolute;
  left:13px;
  top:6px;
  -webkit-transform:rotate(80deg) skew(-10deg);
  -moz-transform:rotate(80deg) skew(-10deg);
  -o-transform:rotate(80deg) skew(-10deg);
  -ms-transform:rotate(80deg) skew(-10deg);
  transform:rotate(80deg) skew(-10deg);
}
.chinaobd2-com .chinaobd2-com-body-window-1 {
  left:-22px;
  -webkit-transform:rotate(0deg) skew(-10deg);
  -moz-transform:rotate(0deg) skew(-10deg);
  -o-transform:rotate(0deg) skew(-10deg);
  -ms-transform:rotate(0deg) skew(-10deg);
  transform:rotate(0deg) skew(-10deg);
}
.chinaobd2-com .chinaobd2-com-body-window-1:after, .chinaobd2-com .chinaobd2-com-body-window-2:after {
  content:‘‘;
  display:inline-block;
  width:10px;
  height: 24px;
  background: #fff;
  position: absolute;
  left:16px;
  top:0;
  -webkit-transform:skew(10deg);
  -moz-transform:skew(10deg);
  -o-transform:skew(10deg);
  -ms-transform:skew(10deg);
  transform:skew(10deg);
}
.chinaobd2-com .chinaobd2-com-body-window-2:after {
  top:9px;
  left:7px;
  -webkit-transform:rotate(-90deg) skew(-10deg);
  -moz-transform:rotate(-90deg) skew(-10deg);
  -o-transform:rotate(-90deg) skew(-10deg);
  -ms-transform:rotate(-90deg) skew(-10deg);
  transform:rotate(-90deg) skew(-10deg);
}
.chinaobd2-com .chinaobd2-com-body-bottom-1,.chinaobd2-com .chinaobd2-com-body-bottom-2 {
  width:74px;
  height:33px;
  background: rgb(246,126,40);
  border-top-left-radius: 24px 20px;
  border-bottom-left-radius: 3px;
  border-bottom:8px solid rgb(186,188,187);
  position: absolute;
  top:34px;
  left:-66px;
  -webkit-transform:skew(-4deg);
  -moz-transform:skew(-4deg);
  -o-transform:skew(-4deg);
  -ms-transform:skew(-4deg);
  transform:skew(-4deg);
}
.chinaobd2-com .chinaobd2-com-body-bottom-2:before {
  content: ‘365‘;
  font-size:12px;
  font-weight: bolder;
  color:#fff;
  position: absolute;
  top:5px;left:45px;
}
.chinaobd2-com .chinaobd2-com-body-bottom-1:after {
  content: ‘‘;
  display: inline-block;
  background: rgb(247,244,111);
  width:10px;
  height: 16px;
  border-radius: 6px/8px;
  position: absolute;
  top:11px;
  left:6px;
}
.chinaobd2-com .chinaobd2-com-body-bottom-2 {
  height: 36px;
  border-top-left-radius: 0;
  border-top-right-radius: 13px 17px;
  border-bottom-right-radius: 3px;
  left:0px;
  top:31px;
  -webkit-transform:skew(8deg);
  -moz-transform:skew(8deg);
  -o-transform:skew(8deg);
  -ms-transform:skew(8deg);
  transform:skew(8deg);
}
.chinaobd2-com .chinaobd2-com-wheel-front, .chinaobd2-com .chinaobd2-com-wheel-rear {
  width:34px;
  height:34px;
  border-radius: 50%;
  background:#333;
  position: absolute;
  top:55px;
  left:-40px;
}
.chinaobd2-com .chinaobd2-com-wheel-rear {
  left:20px;
}
.chinaobd2-com .chinaobd2-com-wheel-front:after, .chinaobd2-com .chinaobd2-com-wheel-rear:after {
  content: ‘‘;
  display: inline-block;
  width:14px;
  height: 14px;
  background: #fff;
  border-radius: 50%;
  position: absolute;
  top:50%;
  left:50%;
  margin-top: -7px;
  margin-left: -7px;
}
.chinaobd2-com .chinaobd2-com-exhaust {
  width:18px;
  height:18px;
  background: rgba(0,0,0,0.3);
  border-radius: 8px 8px 8px 1px;
  position: absolute;
  left:80px;
  top:55px;
  opacity: 0;
  -webkit-animation:chinaobd2-com-ani-exhaust 5s ease-in infinite;
  -moz-animation:chinaobd2-com-ani-exhaust 5s ease-in infinite;
  -o-animation:chinaobd2-com-ani-exhaust 5s ease-in infinite;
  -ms-animation:chinaobd2-com-ani-exhaust 5s ease-in infinite;
  animation:chinaobd2-com-ani-exhaust 5s ease-in infinite;
}
@-webkit-keyframes chinaobd2-com-ani-exhaust{
  0%,20%{
    opacity: 0;
  }
  25%{
    left:75px;
    opacity:1;
  }
  30%{
    opacity: 0;
    left:87px;
    top:50px;
  }
  100%{
    opacity: 0;
  }
}
@-moz-keyframes chinaobd2-com-ani-exhaust{
  0%,20%{
    opacity: 0;
  }
  25%{
    left:75px;
    opacity:1;
  }
  30%{
    opacity: 0;
    left:87px;
    top:50px;
  }
  100%{
    opacity: 0;
  }
}
@-o-keyframes chinaobd2-com-ani-exhaust{
  0%,20%{
    opacity: 0;
  }
  25%{
    left:75px;
    opacity:1;
  }
  30%{
    opacity: 0;
    left:87px;
    top:50px;
  }
  100%{
    opacity: 0;
  }
}
@-ms-keyframes chinaobd2-com-ani-exhaust{
  0%,20%{
    opacity: 0;
  }
  25%{
    left:75px;
    opacity:1;
  }
  30%{
    opacity: 0;
    left:87px;
    top:50px;
  }
  100%{
    opacity: 0;
  }
}
@keyframes chinaobd2-com-ani-exhaust{
  0%,20%{
    opacity: 0;
  }
  25%{
    left:75px;
    opacity:1;
  }
  30%{
    opacity: 0;
    left:87px;
    top:50px;
  }
  100%{
    opacity: 0;
  }
}

应客户要求，要在chinaobd2.com上面增加一个蓝天白云，滚动效果，以上CSS代码实测，没有问题，仅供大家学习参考。

原文地址：https://www.cnblogs.com/aid12580/p/10541632.html

时间： 2024-07-29 15:44:23

外贸建站之纯CSS动画效果天之蓝滚动的白云代码分享的相关文章

外贸建站之自适应网站电脑手机网站不同JS效果区分写法代码分享

外贸建站之自适应网站电脑手机网站不同JS效果区分写法代码分享,今天给客户要求把网站Can Clip搞成自适应的,要求电脑跟手机上菜单展开采用不同的效果, 相信很多程序员都有遇到过这种情况,这里把我们的解决方案分享给大家. 1 if($(window).width()>768){ 2 3 //电脑PC端JS代码 4 5 } 对,没错,只需要给电脑端显示的代码用上这个,就可以了,大家可以根据自己的需要修改不同的宽度,我们在Porsche Piwis III项目中,将PC跟手机端显示的区分宽度设置的

外贸建站之酷炫jquery模仿flash导航

外贸建站之酷炫jquery模仿flash导航,简单实用,好用. JS代码, <script> $(document).ready(function(){ $(".con").prepend('<div class="nav_ub"></div><div class="nav_db"></div>') $(".con").hover(function(){ $(this

15个来自 CodePen 的酷炫 CSS 动画效果【下篇】

CodePen 是一个在线的前端代码编辑和展示网站,能够编写代码并即时预览效果.你在上面可以在线分享自己的 Web 作品,也可以欣赏到世界各地的优秀开发者在网页中实现的各种令人惊奇的效果. 今天这篇文章为大家挑选了15个超炫的 CSS 动画效果的例子,这些 Demo 可以说都是艺术品.(为保证最佳的效果,请在 Chrome.Firefox 和 Safari 等现代浏览器中浏览) 9. 3D Synth Pure CSS 3D Synthesizer (mousedown for rotation

CSS动画效果的回调

用纯JS实现动画效果代码量大,计算复杂.因此现在前端页面的动画效果一般都采用CSS来实现. CSS动画实现简单高效,但是在处理动画,控制动画过程上却缺少一些有效手段. 例如我们想在动画效果完成时调用回调函数来处理一些事务,会发现CSS并没有提供直接的方法来让我们使用. 一.css动画简介 css动画效果有两种,即过渡和动画. 1.过渡当元素从一种样式转变为另一种样式,我们为这种转变添加动画效果,这种效果就称作过渡. CSS的过渡是通过 transtion 属性实现的. transtion属性必

赞！15个来自 CodePen 的酷炫 CSS 动画效果

CodePen 是一个在线的前端代码编辑和展示网站,能够编写代码并即时预览效果.你在上面可以在线分享自己的 Web 作品,也可以欣赏到世界各地的优秀开发者在网页中实现的各种令人惊奇的效果. 今天这篇文章为大家挑选了15个超炫的 CSS 动画效果的例子,这些 Demo 可以说都是艺术品.(为保证最佳的效果,请在 Chrome.Firefox 和 Safari 等现代浏览器中浏览) 1. JavaScript Mickey Watch Apple watch like Mickey watch by

外贸建站之内链TAG

年前,爱的外贸建站写了一篇TAG标签的正确使用方法的时候,介绍了内链TAG标签的概念,这里为广大外贸建站技术员,优化推广专员以及广大外贸业务员们,详细介绍一下内链TAG标签. 相信做优化的朋友对内链和TAG标签这两个概念都不陌生,那有必要搞一个内链TAG标签吗?内链TAG标签是什么鬼?跟内链和TAG标签有什么区别,有必要放在一起单独搞一个名词吗? 内链大家都知道,增加网站内部信息的关联度,方便搜索引擎更好的理解网站信息,内链对网站的排名帮助也是非常大,可以提高网站的收录量和相关关键词的排名,但是

外贸建站之智能建站系统剖析

年前有一个合作了5年的外贸公司,将网站改成了建站之星搞的网站,爱的外贸建站拥有12年的外贸建站经验,对国内外的主流建站程序都是非常了解的,简单看了一下网站,就知道是建站之星搞的,建站之星这种智能建站系统,说是智能,但是SEO方面的体验是非常差的, 最基本的超级链接,title都不加, 图片alt属性也没有,只是网站表面上看着还可以,客户自己自动调整拖动模块,对不懂网站的人来说,感觉还行,但是感官会欺骗你,搜索引擎是注重的往往不是网站样式,搞的花里胡哨的网站,对优化没啥帮助,很多国外排名很好的网站

外贸建站之网站导航栏菜单高亮JS实现代码分享

外贸建站之网站导航栏菜单高亮JS实现代码分享,今天客户要给CAN Clip加一个菜单高亮的效果,原本打算用PHP代码实现,但是感觉过于复杂,JS有更好的解决方案, 这里把我们开发的代码分享给大家. 1 var urlstr = location.href; 2 var urlstatus=false; 3 var urlnum = 1; 4 $("#navbar a").each(function () { 5 if ((urlstr + '/').indexOf($(this).at

外贸建站为什么越来越多人选择海外服务器呢？

一.我国出口带宽不足,国际间访问延迟大.由于目前国内出口带宽严重不足,导致在海外访问国内网站服务器的速度非常的慢,而一个网站的访问速度有影响着用户的体验度,如果网站迟迟打不开,便会是的用户失去访问的兴趣,从而使企业失去潜在的客户.因此,把空间放到海外服务器上,直接面向目标客户群,便不会再出现网站访问速度慢的问题别.所以,只有海外服务器才能满足速度快的要求,这也是海外服务器在外贸建站中最突出的优点之一.二.使用海外服务器稳定性能更高服务器是否稳定,将会对搜索引擎和用户体验具有很大的影响.海外服务器