外貿建站之純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代碼 實測，沒有問題，僅供大家學習參考。

外貿建站之純CSS動畫效果天之藍滾動的白雲代碼分享