外贸建站之纯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; ?}}